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

Why It's Not Bulletproof

So what's wrong here? We're not looking to scorn the designers of [LanceArmstrong.com]the method used here mirrors those used on millions of sites all over the Web. We're simply using this site as a guide, primarily because I think it's visually compelling, but also because re-creating such a site using CSS and valid, accessible markup will be simple. That said, let's outline the characteristics that make this site -vulnerable.

MOUNTAINS OF CODE

Certainly a characteristic that plagues sites that use JavaScript and image-based navigation is the large amount of code that's required to lay them out and make them dynamic (in other words, switch states on rollover). Commonly, each tab is sliced out as its own image, with the current version using a series of nested tables, spacer GIF shims (transparent images used only for providing space between page elements), and other nonessential markup to achieve its pixel-precise layout. The result is a whole heck of a lot of codeand that means potentially slow download times and increased file size.

For [LanceArmstrong.com] in particular, all four tabs are contained within a single graphic, with an image map applied to make each tab portion of the graphic clickable. This requires less code than if each tab were a separate image and then positioned in table cells with spacer GIF shims. But the problems that follow are shared by both methods.

INACCESSIBILITY ISSUES

Another unfortunate side effect of using so much code is that it chokes the text browsers and assistive software used by visitors with disabilities. And because the entire navigation is one single image (looking back at Figure 2.3), most developers fail to specify alt attributes for each clickable area when using image maps. So, users browsing with screen readers, or those who turn off images to save download time (a common practice for users with slow connections), will have a tough time navigating the site.

SCALABILITY ISSUES

This is a big one. Because the tabs are images, there's no way for visually impaired users to bump up the text size in their browsers to increase readability. Image-based navigation just won't budge when it needs to.

LACK OF FLEXIBILITY

If, in the future, the editors of