Navigation

Visiters to your site may arrive by way of a search engine or they might have been given a link to one of your pages by a friend. In general, you cannot control how someone comes to or accesses your page or pages, and once they are done with the page they are viewing, they may wish to view other pages on your site. It is important to consider how visitors will navigate your site, and as the designer of a site, it is your job to make that task reasonably simple.

Don't Strand Visitors

Unless you are keeping a page "secret", don't strand viewers by having no way to access the rest of your site from that page. That is, if you have a link from page A to page B on your site, make sure there is a link from page B back to some other page on your site. Although you may intend for people to see A and then B, and that if they are on B, they can just use their brower's "Back" button to return to page A, this is not a certainty. As previously mentioned, you cannot control how a viewer accesses your site, and it's possible that a search engine will take them directly to B. How then should they see the rest of your site?

If nothing else, provide a link back to you "main" or "index" page on every page.

Intra-page Links

Most pages will be relatively short; perhaps a regular printed page worth of text and graphic. Some pages, however, will go on for hundreds and hundreds, if not thousands of words. If a page is that long, it probably makes sense to break it into several smaller pages. However, if you wish to keep it as one page, help your viewers out by providing a table of contents at the top of the page. Use links within the page (see Chapter II: Links for more information) to help your viewers navigate the page.

A Menu

A navigation bar or menu is a great way to help your visitors, especially if your site consists of more than a few pages. A navigation bar will often include link to the most important pages on the site, or, if the current page is part of a separate "section", links to pages within the section, and then a link back to the "main" page. There are several common options menu systems.

Top Navigation Bar

A top navigation bar is most useful if your site has several sections, or a few main pages. The main page of this site uses a simple top navigation bar. The site kuro5hin uses an effective top navigation bar to link to each of its sections.

Bottom Navigation Bar

A bottom navigation bar works much like a top navigation bar, though the visitor must go through the whole page to get to it. It is most useful for providing links back to important pages. My main site, catalyst, uses a simply bottom navigation bar throughout. kuro5hin has a bottom navigation bar in addition to it's top bar.

Side Menus

A side menu, either on the left or the right, is often the best navigation system, especially if you have a lot of menu items. Top and bottom navigation bars wrap around and become more difficult to read if they are too long. A side menu can be split into several divisions: links to sections as well as to important pages, for example. One can see side menus on such diverse sites as Slashdot and CNN.com. I used a side menu on a smaller site, the Hugo von Hofmannsthal Resource Center as well. When doing side menus, you often need to use a table to divide your page into columns.

Techniques

Once a site becomes larger than a few dozen pages, maintaining the navigation system "by hand" becomes tedious. When you add a new page or section, the menu must be udated on every page.

For this reason, many people choose to use html-frames to divide a page in half: a narrow left-frame loads the menu, and the main frame is the page content. As discussed previously, this is not a good idea, as it means twice the work must be done, since one often needs to maintain a copy of the page/site for viewers whose browsers can't handle frames. Furthermore, frames also hinder navigation, as the correct URL is usually not given in the location bar.

One option is to maintain a separate "menu" file. One can then copy the menu "by hand" into each page whenever the site is updated. With a good editor, this is not hard to automate. One can often use Server Side Includes (SSI -- an advanced topic) to automatically include the updated menu file. The same effect can be achieved with scripting languages like PHP.

For less complex sites, it might make sense to simplify the menuing system. The menu would include links to the main pages, as well as to a "table of contents" or "site-map" page that lists all the page on the site. My main site, catalyst, employs a bottom navigation bar with links to the main pages on the site. One of those links is to a table of contents page.

Contents	Chapter 3	Previous	Next