Category list

- page 19

Summary

If there's one thing you should take away from this chapter, it's the importance of allowing the user to control the size of text on any given page . I've shared a strategy that's been successful for me, using keywords and percentages. But every Web site is different; each has its own requirements and circumstances. Ideally, you'll be able to enable that flexibility in your own projects as well.

Here are some important points to remember:

Understand that IE/Win users cannot resize text set with px .
Keywords offer a simple, easy-to-grasp method of sizing text that permits user resizing.
Percentages can make future updates or user-defined style sheets a quick and easy way to modify an entire site's text size with one CSS rule.
Using the keyword/percentage combination can still allow a certain level of precision when targeted at default browser settings.

And here's some good news: this initial chapter is probably the least interesting of the entire book but very necessary in order to set a solidno, flexible foundation for the examples that follow. What we'll be able to do next is assume that the user can scale the size of text on the page any way he or she desires. With that knowledge in hand, we'll get creative with CSS, rebuilding traditional design components with flexibility in mind. And off we go.

Chapter 2. Scalable Navigation

Provide site navigation that scales to any text size or content amount.

The navigation of a Web site can often be the anchor for its design. It's a page component that is as central and important as any. Traditionally, a Web designer might crack open a favorite image editor and lovingly craft some buttons , tabs, or text to be stuffed inside a few nested <table> elements. Additionally, JavaScript might be used to trigger rollover effects that swap a second set of images. In the end, the result might look greatbut what lurks beneath the surface may not be so desirable, as we'll see by investigating a common approach to building Web site navigation.

Let's take a close look at an example based on the traditional approach to designing stylish, image-based tabs. After we analyze the shortcomings of this particular method, we then wipe the slate clean and construct a similarbut bulletproofdesign using lean, valid markup; three tiny images; and CSS.

A Common Approach

I've decided to use the main navigation tabs found at LanceArmstrong.com as an example for two reasons (Figure 2.1). First of all, I'm a fan of Lance Armstrong, but more importantly, the design lends itself to being rebuilt using CSS in a way that will improve its flexibility. The goal here is to use CSS in a creative way that eliminates large chunks of code and results in a site that is easily maintained and scales gracefully.

Figure 2.1. The nicely designed tab navigation of LanceArmstrong.com illustrates the selected and unselected states each tab may be in.

Let's zoom in and examine the design elements involved to create the tabs.

STRONG TABS

There's a subtle detail in these tabs that make them a bit more interesting than just the average border-and-background variety. For each on and off state, the tab itself has a light gradient that repeats at the top of the tab, horizontally, and fades vertically into a solid background color : white for the on state and light yellow for the off state. A single-pixel highlight at the top of the tab that is lighter in shade than the rest adds a slight dimension, as if the light source were coming from the top of the page, down (Figure 2.2).

Figure 2.2. This is a close-up of the design details for each tab state. Notice a subtle highlight at the top of each tab, with the gradient fade used to simulate dimension and light.

Before we go any further, I'd like to point out that the tabs look, well, cool . Given that good design is subjective (you may have a different opinion), we should be able to at least agree that someone spent a good amount of time making the navigation for LanceArmstrong.com attractive and functional. Mission accomplishedand that's why I selected this example.

On LanceArmstrong.com, each tab set is a single image, with selected and unselected states, depending on what page you are viewing. This image also includes the site's logo. Figure 2.3 shows one of the four possible images, viewed all by itself.

Figure 2.3. The entire tab set and logo are contained within a single, large image. The site includes at least three others like this one, highlighting each section.

COMMON ROLLOVERS

The navigation for LanceArmstrong.com does not currently feature any rollover effects, but by including some additional JavaScript and preloading a second set of images, it wouldn't be impossible , although it would require even more code. We add rollover effects to the tab set when we re-create the design in the "A Bulletproof Approach" section a bit further on. But instead of adding more code, images, and JavaScript, we accomplish the rollover with just a few lines of CSS.

So, on the surface, we have a set of navigational tabs that are specially designed to fit the rest of the site's look and feel. Clicking each tab takes you to the main sections of the site, and each tab has a corresponding text label. Good. Now, let's look under the hood, kick the tires, and eventually walk through an alternate way of handling a similar design.

Flylib.com