Introducing web navigation
Creating links
Controlling CSS link states
Mastering the cascade
Looking at links and accessibility
Examining a JavaScript alternative to pop-ups
Creating navigation bars
Working with CSS-based rollovers

Introduction to web navigation

The primary concern of most websites is the provision of information. The ability to enable nonlinear navigation via the use of links is one of the main things that sets the Web apart from other media. But without organized, coherent, and usable navigation, even a site with the most amazing content will fail.

During this chapter, we’ll work through how to create various types of navigation. Instead of relying on large numbers of graphics and clunky JavaScript, we’ll create rollovers that are composed of nothing more than simple HTML lists and a little CSS. And rather than using pop-up windows to display large graphics when a thumbnail image is clicked, we’ll cover how to do everything on a single page.

Navigation types

There are essentially three types of navigation online:

Inline navigation: General links within web page content areas

Site navigation: The primary navigation area of a website, commonly referred to as a navigation bar

Search-based navigation: A search box that enables you to search a site via terms you input yourself

Although I’ve separated navigation into these three distinct categories, lines blur, and not every site includes all the different types of navigation. Also, various designers call each navigation type something different, and there’s no official name in each case, so in the following sections, I’ll expand a little on each type.

Inline navigation

Inline navigation used to be the primary way of navigating the Web, which, many moons ago, largely consisted of technical documentation. Oddly, inline navigation—links within a web page’s body copy—is less popular than it once was. Perhaps this is due to the increasing popularity of visually oriented web design tools, leading designers to concentrate more on visuals than usability. Maybe it’s because designers have collectively forgotten that links can be made anywhere and not just in navigation bars. In any case, links—inline links in particular—are the main thing that differentiates the Web from other media, making it unique. For instance, you can make specific words within a document link directly to related content. A great example of this is Wikipedia (www.wikipedia.org), the free encyclopedia.

Site navigation

Wikipedia showcases navigation types other than inline. To the left, underneath the logo, is a navigation bar that is present on every page of the site, allowing users to quickly access each section. This kind of thing is essential for most websites—long gone are the days when users often expected to have to keep returning to a homepage to navigate to new content.

As Wikipedia proves, just because you have a global navigation bar, that doesn’t mean you should skimp on inline navigation. In recent times, I’ve seen a rash of sites that say things like, “Thank you for visiting our website. If you have any questions, you can contact us by clicking the contact details link on our navigation bar.” Quite frankly, this is bizarre. A better solution is to say, “Thank you for visiting our website. If you have any questions, please contact us,” and to turn “contact us” into a link to the contact details page. This might seem like common sense, but not every web designer thinks in this way.

Search-based navigation

Wikipedia has a search box within its navigation sidebar. It’s said there are two types of web users: those who eschew search boxes and those who head straight for them. The thing is, search boxes are not always needed, despite the claims of middle managers the world over. Indeed, most sites get by with well-structured and coherent navigation.

However, sites sometimes grow very large (typically those that are heavy on information and that have hundreds or thousands of pages, such as technical repositories, review archives, or large online stores, such as Amazon and eBay). In such cases, it’s often not feasible to use standard navigation elements to access information. Attempting to do so leads to users getting lost trying to navigate a huge navigation tree.

Unlike other types of navigation, search boxes aren’t entirely straightforward to set up, requiring server-side scripting for their functionality. However, a quick trawl through a search engine provides many options, including Google Custom Search Engine (www.google.com/coop/cse/) and Yahoo Search Builder (http://builder.search.yahoo. com/m/promo).