The Top 2 Website Navigation Systems
February 16, 2005
Making a website easy to navigate is one of the most important things you can do as a web designer – if a website is not easy to navigate, people will quickly leave.
Over the years, every type navigational layout (system) has been attempted, and now we know the 2 best ways to create navigation for websites:
- Left aligned ‘master’ navigation menu using CSS buttons or links. And ‘breadcrumbs’ navigation running across the top of the page.
- A close 2nd would be to have the ‘master’ navigation float on the right. But since book layouts (table of contents) are left aligned, left aligned is best for navigation.
Why CSS based links or buttons?
In a nutshell: CSS buttons are quick to build and update. In the old-days, people used images and image-swapping techniques (using JavaScript,) to create buttons and button roll-over affects. This is something you want to replace with CSS based techniques because:
- JavaScript is not available in about 10% of the browsers
- JavaScript roll-overs can cause problems for people with disabilities – thanks Kyle for that point.
- Menu changes are very time consuming because to make a change, you will have to create new images and update the controlling JavaScript.
What are breadcrumbs?
Example:
home > articles > web design > css
As you can see, breadcrumbs are a list of links that tell the user where they are in the website. In other words, they tell users how ‘deep’ they are within the site – it’s a hierarchical view of the website.
Breadcrumbs make it that much easier for people to navigate a website, and to quickly see what else they can find within the site.
