CSS Navigation You’ve Seen Before
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('2'); return false;” href=”#”>Reach more customers</a></td></tr> <tr><td class=”menu” id=”tab3″ rowspan=”1″ colspan=”1″><a class=”bluelink” onClick=”changePreview('3'); return false;” href=”#”>Costs and payment</a></td></tr> <tr><td class=”menu” id=”tab4″ rowspan=”1″ colspan=”1″><a class=”bluelink” onClick=”changePreview('4'); return false;” href=”#”>For local businesses</a></td></tr> <tr><td class=”menu” id=”tab5″ rowspan=”1″ colspan=”1″><a class=”bluelink” onClick=”changePreview('5'); return false;” href=”#”>Success stories</a></td></tr>
<tr><td id=”empty_tab” style=”height: 16em” rowspan=”1″ colspan=”1″> </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>
Tags: Cascading Style Sheets (CSS), css navigation, styled lists
August 18th, 2008 at 12:59 pm
[...] is an open source website (download the 181kb .zip here) I built to extend off of one of the CSS based navigation menus that I designed. Its built entirely in W3C valid CSS and XHTML (strict), and is very [...]
September 19th, 2008 at 11:44 am
With high-speed internet image amounts are a non-issue especially with PNG images that are high quality and low size. Most browsers (not counting behind-the-times Internet Explorer) have no problems with PNG images and CSS handles them nicely.
One thing I do agree with is Javascript. It’s got to go. It’s quite clunky and applets take too long to download in my opinion. Nav bars could do with some *small* images if a certain effect or font is desired or just plain text. *Nods approvingly* Now go out and rewrite the Web!
October 1st, 2008 at 6:51 pm
Nathan - You’re definitely right about high speed internet making it easier for web designers to use images without much of a concern on page-load time. Thank goodness for that.
One big selling point of using CSS instead of images (at least for me) is how easy it makes it to add items to a list, and change the color of the text. With CSS all you do is add a list item. With images you’re stuck creating new graphics.
Now imagine if the site you’ve built is for a customer, and they come back to you 6 months after the completion of the job wondering how they can modify their nav menu…
November 22nd, 2008 at 9:25 pm
[...] 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. [...]