Optimizing GIFs Efficient Rollovers Web Typography CSS Vector Web Graphics

CSS Main Drop Shadows Navigation Menus CSS & JavaScript

CSS Navigation Menus

 

In the old days of the web, navigation buttons were (very often ugly!) image files set to swap on mouse rollovers. Navigation schemes were more often than not conceptualized by print designers who had very little exposure to usability factors. It couldn't be helped, really. There just wasn't an effective way to to present a brand online without graphic text. For a good example of how image text is used badly for site navigation, see the Tampax site (HINT: if you have to tilt your head to read, it isn't useable!) Then, look at how beautiful a text-based navigation scheme can look at Slashdot.

Perhaps the single biggest reason to eschew image text in favor of real text is for search engine optimization. Although this is no longer as big an issue as it used to be, images don't rank well in search engines. To me, this issue takes precedence over branding concerns. Who cares how your online presence looks if no one locates it?

Fortunately, Cascading Style Sheets eradicate almost every obstacle to building an online identity. Font choice is still extremely limited, that is true: CSS still only allows you to use the fonts that are present on the user's computer, and you can only color the font, it's background, and it's container's border. But, heck, that is plenty for a clean navigation system—leaving the designer to build the brand somewhere else on the page.

List Your Levels

The easiest way to organize your navigation system is to make lists out of it. After all, that's really what each level of your site is: a list of sections. Except for the third-level navigation (the jump menu on the left,) MadMac Creations' navigation scheme is built this way (as is Slashdot, BTW.) This way, you gan give each list level a CSS "class" and style it accordingly. Don't like the style? Change the CSS, and you never need to touch the actual list!

MadMac Creations used this method to create the navigation scheme for the DC Blues Society.

View the style sheet for the navigation of this page by viewing the page source. The navigation styles are up in the "Head" section.

The most popular navigation scheme involves using rounded corners to create a tabbed folder appearance. The scope of this article is too narrow to outline how to do that, but here is an excellent tutorial at Webcredible.

Contact MadMac Creations about designing your site's navigation scheme.