Bulletproof Web Design: Improving flexibility and protecting against worstcase scenarios with XHTML and CSS [Electronic resources] نسخه متنی

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.

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).

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.

COMMON ROLLOVERS

The navigation for 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.