Section 19. About Designing Your Site s Navigation

19. About Designing Your Site's Navigation

BEFORE YOU BEGIN

17 Organize Your Site's Content

18 Build a Site Map

There's one more thing to consider before you begin creating your sitehow people will navigate through it. It's important to create a way for people to know at a glance what's available on your website, and to let them quickly jump to where they want to go.

You do all that through designing navigation for your site, the way that people will get around. You should have common navigation for all your pages. If you change the navigation, people will quickly become disoriented and lost, so keep the navigation consistent throughout.

Navigation consists of buttons or links that people can click on to get to the main areas of your site. Typically, the main areas of the site you'll want people to navigate to are the five to seven major topics you've created on your site map.

As a rule, navigation should go down the left side of each page, or else across the top (and sometimes the bottom) of each page. For navigation, you can use simple HTML links, or else buttons or even graphics. The following figure shows navigation along the top of a websitein this instance, the Sams Publishing site.

Navigation on the Sams Publishing site goes across the top of the page.

In addition to links to your five to seven major topics, you might also want to have navigational links on every page to global features or topics, as outlined earlier in this chapter. You might, for example, want to have links on every page to an FAQ or Help area, or an About Me area in addition to the topic areas. In that case, you should separate these special, global areas from your main content areas. If that's the case, you'll want to use left-side navigation combined with top or bottom navigation. Typically, if you organize your site's navigation this way, the main topic areas will go down the left side of the page, and the links to global features will go at the top or bottom of the page. The following figure shows this combination of top and side navigation, on the InformIT website.

You can combine left-side navigation with top navigation, as shown here from the InformIT website. Many sites use the left-side navigation for main content areas, and the top navigation for links to common global pages or features.

When designing your navigation, however, keep in mind that, in general, simpler is better. Complex graphics serve only to confuse. And if you do use graphics instead of buttons, make sure to include text with them as well. Not everyone in the world will know that a picture of a cherry is meant as a link to a list of your favorite fruit.

TIP

In addition to a site map, consider creating a style guide for your sitea document that covers the colors you'll use, the mood of your site, the tone of your writing, and details of word usagefor example, whether you'll use email or e-mail . You want to be as consistent as possible in everything you do, and having a written record of your style will make sure that you are.

Using "Bread Crumbs" on Your Site

Remember the story of Hansel and Gretel? As they were led by a witch deeper and deeper into the forest, Hansel scattered bread crumbs behind them so that they would be able to find their way back home.

The Web is often as confusing as a deep forest, and if you want to help your visitors find their way, you can use a Hansel-like technique called breadcrumbing. (For now, we'll forget that Hansel's bread crumb strategy didn't work because the forest's birds had eaten all the bread crumbs after he scattered them.)

Bread crumbs are, in essence, a trail of links put somewhere near the top of a page that lets you step back up through the hierarchy of a website, anywhere along the way.

Let's take an example. Say that you've created a page for your non-profit group , the Cambridge Frisbee League . There are several main areas on the site, including one titled Schedule , one titled Rosters , one titled Rules , and so on. Each of these areas has a number of pages beneath it. For example, the Schedule area has 12 pages, one with a schedule for each month of the year. If you were on that page, the breadcrumbing would look like the following figure. This enables you to see where you've been on the site, and quickly jump to a previous level. If you build a site with even more levels than this, breadcrumbing is even more useful.

Using breadcrumbs is a good way to help people know where they've been and how to return there.