Web Systems Design and Online Consumer Behavior [Electronic resources] نسخه متنی

Benefits of Web Standards

Using Web standards means considering the whole picture, including both CSS and structural HTML. It's difficult to summarize the benefits of either without mentioning the other. The real payoff happens when both are used in concert, with a document's content and structure controlled by the base HTML, and its design controlled by the CSS.

NoteThe W3C HTML validator is at the W3C's "Validate Your Markup" page (http://validator.w3.org).

The Zen Garden designs are proof that an HTML file can be modified in any number of ways by dropping a style sheet on top of it. CSS is a method of presentation that hooks into the underlying document structure of an HTML file, and though it relies on that structure, it operates independently to provide a layer of visuals on top.

What is important about the base structure is that it be well formed and valid; an invalid document will render unpredictably and cause more trouble than anyone deserves. The first rule in diagnosing a CSS layout problem, before anything else, is to make sure your markup validates.

NoteThe bandwidth benefits apply only to CSS files that sit outside of the HTML; you can also embed CSS within an HTML document, but doing so won't cause it to cache like an external CSS file, so you will lose some of the benefits.

Smaller File Sizes and Quicker Downloads

When you move your presentation out of the markup and into CSS, your file sizes usually decrease as well. What might have once taken 30 Kbits of HTML for a site's design framework might be accomplished with 10 Kbits of HTML and an additional 10Kbits or less of CSS.

In addition to initially resulting in smaller file sizes, CSS gets cached in a browser's memory. Consider that for a secondwith 30 Kbits of presentational HTML to create your page's design, every new page load on your site requires pulling that 30 Kbits, each time, in addition to whatever content is actually within the page. Browsing ten pages of a site built this way requires downloading 300 Kbits almost needlessly.

But when the design is moved to an external CSS file, not only is the final page weight smaller, but less of the design needs to be downloaded on each page loadonly 10 Kbits of extra HTML is required per page, since the 10 Kbits CSS file is pulled from the local browser memory each time. The 300 Kbits of downloading from the previous example might be reduced to as little as 110 Kbits in this case.

This sort of piecemeal file-size reduction can really add up, for both end users and the server. When your traffic is high, the extra bytes trimmed have huge implications for your total bandwidth savings. Sports network ESPN's Web site went CSS in early 2003, and its numbers are almost unreal. As stated in an interview originally published on Netscape's now-defunct DevEdge (now available at www.mikeindustries.com/blog/archive/2003/06/espn-interview), the developers of ESPN.com estimate they're now saving about 2 terabytes each and every single day. This means they can serve more users, and serve them quicker, without changing anything else. That's a substantial return on a onetime investment.

NoteCSS media types are outlined on W3C's "7 Media Types" page (www.w3.org/TR/CSS21/medial).

Increased Portability

A properly structured page doesn't even need the CSS to render, actually. In some scenarios this makes perfect sense; when you design for a large, 1024-by-768 monitor, you have plenty of space to fill; the same can't be said for a small, 240-by-320 Pocket PC.

Without CSS, the bare content remains perfectly readable, links still work, and form elements are functional. Without doing anything else, using structural markup means that you have an automatic mobile version of your site.

But CSS offers support for various media types, enabling you to more specifically target your style for the media it's presented on. Computer screens, mobile devices like cell phones, and printers all have their own media types, and even more are defined or under development.

Print-media style sheets spell the death of the little "Print This Page" link. Every page on a site can be printable without much more than a simple style sheet that formats certain items, hides others, and lays out the page more precisely for the benefit of the printer. Since printers have different restrictions than monitors, the control that a print style sheet offers is welcome.

The theory is that one day every device will rely on a media type appropriate for the challenges it faces when displaying a Web page; the reality is that right now, barely anyone makes use of anything beyond screen media (page authors and device manufacturers alike). CSS display options for cell phones rarely go beyond basic text size and color, and a browser that makes use of the spoken "aural" media type has yet to appear.

It's a chicken-and-egg problem, since better support isn't likely until content is available, and no one is producing content for devices that don't yet exist. The situation is slowly improving, though, so perhaps one day a mobile CSS Zen Garden targeting cell phone and PDA styling will be possible.

Better Accessibility

Properly structured HTML was designed to be accessible; you can create a version of your site that conforms to 90 percent of the W3C's content-accessibility guidelines simply by writing valid markup.

NoteThe W3C's Web Content Accessibility Guidelines (WCAG) are available on the W3C site (www.w3.org/TR/WAI-WEBCONTENT).

Say good-bye to text-only equivalents of your content and multiple versions of a site that are painfully difficult to keep current; say hello to one-size-fits-all Web authoring. In most cases, even visually impaired users who run screen readerswhich audibly read a Web page back to themcan use your site, without changing anything else.

There are caveats to this, of course, and a little later in this chapter we'll look at some of the accessibility problems that CSS might introduce.

Precise Control

As a styling language, CSS offers many rich new options that HTML formatting could never have hoped to match: precise control of leading (the space between the lines of text) with the line-height property, spacing between elements with the margin and padding properties, positioning of elements on a page through absolute and relative positioning, and more.

If you've ever felt constrained by the grid that a table-based layout imposes, you might be delighted to learn that CSS positioning allows you to smash out of it and place elements wherever you like on a page. If you've ever wished for more precise background control than the choice between a color and a single repeating image, the background properties of CSS could be a minor revelation.