Old School Website Design: Screen-Width Adapting Websites
Having developed for the web since 1998, I've subjected my readers and visitors to a wide variety of good and bad website design, and I wanted to talk a little bit about how we used to "kick it old school" in this ongoing feature.
Today's subject is the screen-width adapting website. This particular style of design was all the rage back in the day, and usually involved time-consuming code revision and an involuntary lobotomy (because it took so much effort to get it to work across different browsers). It's not that this type of site has completely died off; it's just that it's usually handled with CSS nowadays. Back then, we had to use tables (the horror)!
For starters, in order for a screen-width adapting website to work properly, we had to enter these attributes in the <body> tag:
marginwidth="0" marginheight="0"
Without this snippet of code, you couldn't get the site to stretch to the outer edges of the browser window (resulting in unwanted white space).
The fact that you had to create a table with a
width of 100% is a no-brainer to anyone who has used tables before, but the rest of the code was usually less-than-intuitive (it gives me a headache just thinking about it).
Are you sure you want to see this? Okay, this is the code from an old design I did circa 2003. Brace yourself...
<![CDATA[ <table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="298" height="145" align="left" valign="top">
<img src="logo.jpg" width="298" height="145"
hspace="0" vspace="0" alt="Arctic Sunburn"><br>
</td>
<td width="99%" height="145" align="left" background="top_bg.jpg"><br>
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td background="left_bg.jpg" width="118" align="left" valign="top">
<table width="118"border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="118" height="37" align="left" valign="top">
<a href="archive/"> <img src="archive.jpg" width="118"
height="37" border="0" hspace="0" vspace="0" alt="Archive"></a>
</td>
</tr>
<tr>
<td width="118" height="37" align="left" valign="top">
<a href="art.htm"> <img src="art.jpg" width="118"
height="37" border="0" hspace="0" vspace="0" alt="Art"></a>
</td>
</tr>
<tr>
<td width="118" height="37" align="left" valign="top">
<a href="index.htm"> <img src="home.jpg" width="118"
height="37" border="0" hspace="0" vspace="0" alt="Home"></a>
</td>
</tr>
<tr>
<td width="118" height="37" align="left" valign="top">
<a href="links.htm"> <img src="links.jpg" width="118"
height="37" border="0" hspace="0" vspace="0" alt="Links"></a>
</td>
</tr>
<tr>
<td width="118" height="37" align="left" valign="top">
<a href="profile.htm"> <img src="profile.jpg" width="118"
height="37" border="0" hspace="0" vspace="0" alt="Profile"></a>
</td>
</tr>
<tr>
<td width="118" height="37" align="left" valign="top">
<a href="projects.htm"> <img src="projects.jpg" width="118"
height="37" border="0" hspace="0" vspace="0" alt="Projects"></a>
</td>
</tr>
</table>
</td>
<td width="99%" align="left" valign="top">
<table width="100%" border="0" cellpadding="3" cellspacing="3">
<tr>
<td width="70%" valign="top">
<font face="Verdana,Arial,Helvetica" size="2">
<b>September 5, 2003</b><br>
It has been a long time since I last updated, so it's time to tie
up some loose ends. I'm going to get back to work on <a
href="http://members.shaw.ca/arcticsunburn/triptojapan/"> My
Trip to Japan</a>, and get <a
href="http://members.shaw.ca/arcticsunburn/survivor/"> Arctic
Sunburn: Survivor</a> back up. If I can spare the time, I will
also be working on <a href="http://mysterycastle.keenspace.com/">
Mystery Castle</a>, but we'll see how that goes.<br><br>
Rest assured I have been working on a new design for this site,
but it has not come together yet. It's easy to create a site
that's stylish, or a site that's functional, but not a site that
exemplifies both of those qualities. Here's a <a
href="sample.jpg"> sample</a> of what I've been working
on.<br><br>
<a href="archive.htm"> News Archive</a>
</font>
</td>
<td width="30%" valign="top">
<font face="Verdana,Arial,Helvetica" size="1">
<b>Some Interesting Links</b><br>
<a href="http://members.shaw.ca/arcticsunburn/japan/"> My Japanese Page</a><br>
<a href="http://mysterycastle.keenspace.com/"> My Web Comic</a><br><br>
<b>Logs</b><br>
- <a href="20030226.htm"> February 26, 2003</a><br><br>
<b>A Stinging Torture You Call Bliss</b><br>
- <a href="20030212.jpg"> #1</a>
</font>
</td>
</tr>
<tr>
<td width="100%" colspan="2" align="center" valign="top">
<font face="Verdana,Arial,Helvetica" size="2">
<br><br>
© 2001 - 2003<br>
Founded 04/12/01<br>
Optimum Resolution: 1024x768 pixels.
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>]]>
All in all I'm surprised that I was able to keep the code that compact. Notice how most images have these attributes:
hspace="0" vspace="0"
An older incarnation of Arctic Sunburn.
I'm not sure how vital that code snippet is, but I had read somewhere that it was necessary in order to rid of unwanted white space.
Some images also have
<br> tags right after them in order to combat white space. Some empty
<td> cells contain
<br> tags for the same reason. It seems completely counter-intuitive, but we did whatever we could do to get it working.
Notice the tables nested within tables. After awhile this can be a bit of a coding nightmare; especially if you forget to close a tag.
The rest of the code is pretty straight forward, all told. I just remember that there was a lot of fixing and editing that went in to it when I first pieced it together.
In conclusion, I hope that this has been an interesting trip down memory lane for you; it certainly has been for me. When I scanned through the content and updates on the old website some memories came flooding back and I started to remember what life was like back then.
In any case, if you're looking to create a screen-width adapting site I would recommend that you look up a good CSS tutorial. This is not a how-to guide. This is what we
had to do to get things working back in the day.
More old school designs coming soon!
Other Old School Screen-Width Adapting Sites:
Alex's World
Related Articles:
Old School Website Design: Frames
This article was written by David Andrew Wiebe, web designer, graphic designer, guitarist, bassist, keyboardist, songwriter, guitar instructor, and music expert. Interested in winning a free CD?
Click here for more info!
Questions? Comments? Suggestions? Recommendations?
Email me.
Published on February 27, 2008
