Part of the CSS Navigation Reading List

Generally speaking, websites should feature relatively short, concise pages consisting of disciplined writing combined with judicious use of optimized graphics that retain user interest. This fact, combined with the increasing complexity of sites, means that websites often consist of dozens of pages, making navigation tend towards multi-layered, hierarchical systems. Functionally, this navigation may appear in a multitude of forms:

  • Vertically expanding, aka “accordion” menus
  • “Side” navigation from a vertically-oriented menu
  • “Drop down” menus
  • “Breadcrumb” navigation

While all of these navigational forms may be enhanced with JavaScript or , they do not require them: each can be created with HTML and some simple CSS.

Perhaps more importantly than how these menus work is what information is presented, and the relationship of this information to the organization of the site. Full-time and fast-track students should have lessons from other courses emphasizing information mapping techniques that can be applied to guide and streamline the schema design of site navigation; for all others (or if you have forgotten your lessons), information mapping can be summarized in three simple points:

Chunk related information together
Organise navigational items in logical units that allow the customer to find what they need on the site quickly and easily. (Note that this may not be what the client or the developer assumes to be the customer’s interest.) UI testing and regular reconsideration of menus is strongly recommended, particularly as a site grows.
The magical number 7, ± 2
Most people can remember no more than seven (± 2) pieces of unrelated information at any moment. (Phone numbers are seven digits long outside of a shared (and consistent) area code for this reason). Most navigational systems should be no more than nine items in length at any level of the hierarchy.
Clarity and consistency beats creative cleverness
Outside of sites that are designed to be deliberately cryptic (movie teaser, viral or “puzzle” sites), do not obfuscate your navigation: no clever icons, appearing/disappearing menus, or navigation placed in odd or inconsistent positions on the page.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.