Quite a few years ago a couple of gentlemen by the name of Tim Berners-Lee and Robert Cailliau invented the World Wide Web. A system of interlinked hypertext documents accessed via the internet - a system that would change the way the vast majority of the world trades information.

Within these hypertext documents lies information. Not just the information you see on a web page, but information that controls the design and layout of the page itself. The vast majority of the pages you see on the internet are laid out using one of two methods, either tables, or cascading style sheets (CSS).

There is no reason to argue the use of one over the other, as CSS is already known to be superior, but I will point out a few reasons why I personally use CSS for mine (and my clients) web designs:

1. CSS based layouts are very search engine friendly. Using CSS helps eliminate unnecessary javascript mouseover effects.  This will make your navigation menus cleaner, and easier for search engines to read.  If a search engine has problems reading your navigation they may not find all the pages within your website.  See an apples-to-apples comparison on the code required to power one of Google’s navigation menu here.
2. CSS layouts are flexible. In a CSS based layout you have several options for positioning elements within your page.  Let them flow in the order they appear in the code, or tell certain DIVs to float left, and others to float right.  Here is a good example of this - a web page that uses a single HTML file, but lets you toggle between several style sheets to reorganize the page.
3. CSS is lightweight. Using CSS will ‘thin down’ the HTML required in a web page.  This will decrease load times, and the strains on your servers.
4. CSS design is beautiful. Just ask these guys - www.csszengarden.com.  This is a great showcase of the capabilities of CSS based design.

If you’ve got any compelling reasons to use table based layouts I’d love to hear them.  Until then I’ll stick to CSS!

Lately I’ve been looking ‘under the hood’ of a lot of websites to see how they’re built.    Being a fan of pure CSS design I was hoping to see a lot of well styled div tags, classes, lists and headings.  After doing a ‘right-click, view source’ on a few popular websites I saw some were done well with CSS, others were done with some pretty ugly JavaScript.

Here is a handful of the sites I looked at:

• CNN - CSS based, no images.  Well done.
• MySpace - Javascript based, with some CSS
• YouTube - Pretty hefty amount of markup used, but CSS based.
• IMDB - Javascript based, many images.
• Apple - CSS based, many images
• Woot - CSS based, Sliding Doors method, uses images.
• Reuters - CSS based, but uses a number of DIV tags instead of a simple list.
• Google Adwords - Poorly styled table that relies heavily on JavaScript.

So where is this going?

Now that we’ve found a few websites that use (in my opinion) poor navigation menu technique I decided to take a stab at redesigning them using NO JAVASCRIPT, and as FEW IMAGES AS POSSIBLE.

Tackling the Google Giant

The most poorly built navigation menu is that of adwords.google.com.  Google isn’t worth billions for being a great design company, so we’ll go easy on them and just compare their code against clean code.

Markup that lays out Googles navigation menu:

<script type=”text/javascript”>
document.getElementById(’infotable1′).style.display = ”;
</script>
<tr><td class=”menu” id=”tab2″ rowspan=”1″ colspan=”1″><a class=”bluelink” onClick=”changePreview(&#39;2&#39;); return false;” href=”#”>Reach more customers</a></td></tr> <tr><td class=”menu” id=”tab3″ rowspan=”1″ colspan=”1″><a class=”bluelink” onClick=”changePreview(&#39;3&#39;); return false;” href=”#”>Costs and payment</a></td></tr> <tr><td class=”menu” id=”tab4″ rowspan=”1″ colspan=”1″><a class=”bluelink” onClick=”changePreview(&#39;4&#39;); return false;” href=”#”>For local businesses</a></td></tr> <tr><td class=”menu” id=”tab5″ rowspan=”1″ colspan=”1″><a class=”bluelink” onClick=”changePreview(&#39;5&#39;); return false;” href=”#”>Success stories</a></td></tr>
<tr><td id=”empty_tab” style=”height: 16em” rowspan=”1″ colspan=”1″>&nbsp;</td></tr>

Markup that lays out my rendition of adwords.google.com (seen here):

<div id=”googleMobile”>
<ul>
<li><a href=”#”>Most Popular</a></li>
<li><a href=”#”>All Products</a></li>
<li class=”current”><a href=”#”>iPhone</a></li>
<li><a href=”#”>BlackBerry</a></li>
</ul>
</div>