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>