Summary

Rebuilding a common method for image-based tabs has given us the opportunity to identify several downsides to using those techniques. At the same time, we've discovered advantages in using a simple unordered list, styled with creative CSS, not only allowing navigation designs to expand or contract with text size adjustments, but also permitting a varying amount of content to be placed within.

Here are a few points to remember when designing navigation:

• Using image-based navigation means poor-or low-vision users cannot adjust its text size.

• Simple markup (an unordered list) ensures greater accessibility to a wider range of browsers, devices, and software.

• Text-based navigation is easily updated or edited, without the need to create new images each time a change is needed.

• Creative placement of background images can add detail to a navigation's design without sacrificing its flexibility.

• There are times when using images for navigation is a requirement and unavoidable, whether for a company's typeface or because of limited screen real estate. This is not the end of the world by any means.

That last bullet point is an important one to stress. In the real world, requirements regarding typeface and/or width and height of the navigation may be decided by someone other than yourself. In those instances, run away very fast. No, not reallybut you're now prepared to make a case for using something flexible in its place. There are no wrong answersjust some that may work better than others, taking into account each unique situation.

Now that we've established a flexible navigation concept, let's move on to other components frequently found on Web pages, reworking them as we go.