Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

  • Print
  • + Share This

Navigation styles

There are many styles of navigation: navigation buttons, navigation bars (usually a group of icons), plain text links, fancy animated graphics, and more. You can use illustrations, photographs, or graphic images to show a visitor around. You might use an image map as in Home Sweet Home Page, shown on the previous page-one graphic with different "hot spots" (invisible buttons) that link to other pages.

The primary navigation system to the main sections of your web site should be kept together in a compact package, either at the top of the page, the bottom, or off to the side. If you have a long, scrolling page, it's useful to place a navigation system at both the top and bottom of the page. A common variation to this approach is to place the fancy graphic version of the navigation system at the top of the page, and a simple, all-text version of the links at the bottom of the page.

Many sites have beautiful graphical navigation buttons, and there is also an all-text version of the same buttons (see Figure 2). That's because some people browse with the graphics turned off and the text links allow them to still see and use the links. Some people use very old browsers that can't display image maps, or old modems that make downloading graphics painfully slow, or maybe they're surfing a laptop on a plane, or maybe they're stuck with USWest phone service in New Mexico, so they turn off the graphics. Even with graphics on, a visitor can click the fast-loading text link without waiting for the entire graphic to download. So please create text links that match the graphic links, and provide an "alternate label."

To accommodate those who surf without graphics, make sure every graphic link is also accessible as a text link.

And make sure every graphic has an "alt label," text that appears if the graphic doesn't (see Figure 2). This label appears as the page is loading. Your web authoring software has a place for you to type in the alt label for each graphic.

In many browsers, the alt label appears when the cursor is positioned over the graphic. This means you can put special messages in the alt label that do more than simply name the graphic. Describe the product, add a love note, elaborate on the image-be creative with it!

Navigate with frames

Another technique that can aid in navigating a site is the thoughtful use of frames. Frames allow you to divide the browser window into two or more separate areas (frames) that can act independently, yet still interact with each other. This can be very useful in some situations. For instance, if you want the navigation area to remain visible at all times, you can put the navigation items (buttons, words, or icons) in a separate frame. As a visitor clicks the links, the navigation frame stays put and the new information loads into a separate part of the page (another frame).

Be careful with frames. In the wrong hands, frames can be a disaster. They can be ugly. They can make the site navigation impenetrable. Don't use frames until you have studied sites where they have been used appropriately and studied sites where they have been used stupidly. Have a good reason to use frames.

This page uses frames (see Figure 3). The upper section that holds the buttons is one frame, and the rest is another frame. As shown in Figure 4, as a visitor browses the site, the navigation frame across the top stays put. As the visitor scrolls downward on that page, the navigation frame does not move.

The navigation frame stays put when you jump to another page and while you scroll down the rest of a page.

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.