Web site navigation is such an important part of any Web site that you need to think about it from the very beginning. Good Web site navigation should allow your visitors to know three things: where they are, where they can go, and how they can get back to where they came from.
At all times and on all pages in your site, you must give the visitor a sense of place, of context within the site. Every page on your site should have a header, footer, or sidebar that tells the reader what site they're visiting and where they are within that site.
Web site navigation should be consistent from page to page, so your visitors don't have to figure out how to get places every time they encounter a new page.
Home page
Your site's home page should act as the crossroads, the point of origin for all traffic going into your site. Your home page must link to all your sections (and perhaps directly to some important articles).
Always include a link to home on every single page. This way, if users do get confused, or just want to start over from the top, they're only one click away.
Site map
Don't try to re-invent the wheel. Site maps or tables of contents work for Web site navigation just as well as they do on paper. Site maps are usually pages that contain links to all (or most) of the pages on a site. People understand these conventions, so they find them easy to use.
The nice thing here is that it provides your reader with a one-stop location to access anything on the site. The bad thing is you have to get them there in the first place. This should be your supplemental method of navigation, not the primary one.
Navigation bars
There's no hard rule about how and where to put navigation bars. Because most computer screens are wider than they are tall, and good typography for the best readability demands shorter line lengths, it makes sense to put navigation bars on the left or right side of the screen.
This layout is becoming increasingly popular because it's practical and allows the site to reserve part of the screen (usually between 150 and 200 pixels) for navigation and identity.
Images for Web site navigation
You should never rely exclusively on images for navigation bars. Of course, every graphic on your site should contain ALT text, so even if your visitors have pictures turned off they can still read and use your navigation.
That's one of the reasons why it can be risky to use image maps (a single picture that contains a number of links). Because without the pictures turned on, it's impossible to use an image map.
It's also important to note that you should always include a text version of your navigation bars, as some people surf with images turned off or even with text-only browsers. You'll often see the text navigation at the bottom of the page.
Frames
A common way to keep Web site navigation on screen no matter how much a visitor scrolls is to use frames with the navigation bar in one frame. This way, when users click from point to point, they don't have to reload the navigation bar on each page.
The problem with this is that frames can be confusing for site visitors. It's more difficult to print and bookmark a page. Using frames either prevents search engines from finding pages within a Web site, or it causes them to send visitors into a site without the proper frame context being established.
Frames can also cause visitors with older browsers to be unable to see any of the content of your site. For more information on using frames, see Advanced: HTML Frames.
JavaScript
Another method, if you're not worried about alienating visitors with older browsers, is to use JavaScript for Web site navigation.
In order to conserve space, some sites use JavaScript to open a pop-up window or reveal deeper levels of information when you mouse over a category in the navigation bar.
Many sites use JavaScript to create the classic graphic button effect that shows one image when the mouse is left alone, and another when it passes over it.
For more information on JavaScript, see Advanced: JavaScript. Generally, however, the simpler the better. You want everyone to be able to use your navigation, not just those with the latest browsers.
At all times and on all pages in your site, you must give the visitor a sense of place, of context within the site. Every page on your site should have a header, footer, or sidebar that tells the reader what site they're visiting and where they are within that site.
Web site navigation should be consistent from page to page, so your visitors don't have to figure out how to get places every time they encounter a new page.
Home page
Your site's home page should act as the crossroads, the point of origin for all traffic going into your site. Your home page must link to all your sections (and perhaps directly to some important articles).
Always include a link to home on every single page. This way, if users do get confused, or just want to start over from the top, they're only one click away.
Site map
Don't try to re-invent the wheel. Site maps or tables of contents work for Web site navigation just as well as they do on paper. Site maps are usually pages that contain links to all (or most) of the pages on a site. People understand these conventions, so they find them easy to use.
The nice thing here is that it provides your reader with a one-stop location to access anything on the site. The bad thing is you have to get them there in the first place. This should be your supplemental method of navigation, not the primary one.
Navigation bars
There's no hard rule about how and where to put navigation bars. Because most computer screens are wider than they are tall, and good typography for the best readability demands shorter line lengths, it makes sense to put navigation bars on the left or right side of the screen.
This layout is becoming increasingly popular because it's practical and allows the site to reserve part of the screen (usually between 150 and 200 pixels) for navigation and identity.
Images for Web site navigation
You should never rely exclusively on images for navigation bars. Of course, every graphic on your site should contain ALT text, so even if your visitors have pictures turned off they can still read and use your navigation.
That's one of the reasons why it can be risky to use image maps (a single picture that contains a number of links). Because without the pictures turned on, it's impossible to use an image map.
It's also important to note that you should always include a text version of your navigation bars, as some people surf with images turned off or even with text-only browsers. You'll often see the text navigation at the bottom of the page.
Frames
A common way to keep Web site navigation on screen no matter how much a visitor scrolls is to use frames with the navigation bar in one frame. This way, when users click from point to point, they don't have to reload the navigation bar on each page.
The problem with this is that frames can be confusing for site visitors. It's more difficult to print and bookmark a page. Using frames either prevents search engines from finding pages within a Web site, or it causes them to send visitors into a site without the proper frame context being established.
Frames can also cause visitors with older browsers to be unable to see any of the content of your site. For more information on using frames, see Advanced: HTML Frames.
JavaScript
Another method, if you're not worried about alienating visitors with older browsers, is to use JavaScript for Web site navigation.
In order to conserve space, some sites use JavaScript to open a pop-up window or reveal deeper levels of information when you mouse over a category in the navigation bar.
Many sites use JavaScript to create the classic graphic button effect that shows one image when the mouse is left alone, and another when it passes over it.
For more information on JavaScript, see Advanced: JavaScript. Generally, however, the simpler the better. You want everyone to be able to use your navigation, not just those with the latest browsers.
