258 HOW: Style Sheets for Designers: Designing with Style

Figure 10.1

The New Year’s 2001 Greeting at zeldman.com. The background image, text, and “core” button are exactly positioned via CSS, which also creates the black outline and background colors. Notice that the image hugs the upper left corner of the browser window, a feat that is easily achieved by using CSS to set margins and padding at “0.” JavaScript was used to route Netscape 6 users, IE5 users, and Opera 5 users to subtly different pages (www.zeldman.com/ 2001.html).

Separation of Style from Content

Beyond providing designers with a powerful tool set, CSS serves an additional purpose—that of formally separating a website’s style (or design elements) from its content (otherwise known as writing and such).

Disadvantages of Traditional Web Design

Methods

The way web designers have historically designed pages, style and content are hopelessly intermingled. Text appears inside table cells. <FONT> tags are wrapped around every paragraph.

Taking Your Talent to the Web

259

While this old system works, and while it is used in literally millions of sites, it has two powerful disadvantages:

1.Problems in the present: wasted bandwidth and HTML abuse. HTML tables were never intended to be used as design tools; when used for that purpose, they slow the rendering of web pages in the browser and can cause problems for users of text-based browsers— such as people with disabilities. While they do work in most browsers, these tags and tricks slow down web pages and contribute to bandwidth problems by forcing the user to download unnecessary text (namely, the tags themselves). They also clutter the markup.

2.Problems for the future: retarding progress. By mingling content with style, the present system makes it much more difficult for web designers and programmers to create sites that can be used by nongraphical browsers and devices, such as web phones, Personal Digital Assistants (PDAs), and audio browsers for the blind. Such devices represent a growing and vital market. On the other hand, if content and style are formally separated, then nongraphical browsers can simply display text and links, while computer users with graphical browsers still enjoy a rich visual experience created by web designers. In addition to the harmful effects on web-enabled devices, the mingling of content and style also makes it more difficult to design and build robust interactive sites, including the e-commerce sites you will inevitably find yourself designing.

CSS Advantages: Short Term

Under the present system, designers who wish to control the appearance of text on the Web must type <FONT> tags for every paragraph of client content. This adds up to hundreds of kilobytes of wasted bandwidth on every site and hundreds of hours of tedious labor for the web designer and/or the HTML technician.

260 HOW: Style Sheets for Designers: Designing with Style

After all those hours of labor, if the client requests a design change, many more hours of labor must be put in, as the designer or web technician manually searches for and replaces all those annoying <FONT> tags.

It’s a dumb way to work. With style sheets, the web designer can change just one document—a global style sheet—and the layout and typography of the entire site will be instantly changed. Hundreds of hours of the dullest sort of labor can be saved in this way. If style sheets are used to control layout as well as typography, the savings in labor (and client costs) can be even more profound.

What can you do with the client dollars saved? You can spend them on design, programming, writing, photography, illustration, research, testing, marketing, and maintenance. With less of it wasted on monkey work, the same budget now enables you to create a richer, more powerful site.

Another bonus is that after putting every ounce of our experience and talent into the design of web pages, we typically turn the sites over to our clients, who then update the sites as needed. Websites are not carved in stone; a site that’s not minty-fresh is a dead site. How many clients have a background in design and extensive knowledge of web technology? We’ve been lucky enough to find precisely one such client in nearly six years of doing this work.

As explained in Chapter 7, “Riding the Project Life Cycle,” often during the hand-off and maintenance phase, a junior or mid-level person with no design experience and little web knowledge is made responsible for the site’s maintenance and updating. Frequently, “refreshing the site” is merely one of that employee’s daily duties. The more our pages are filled with <FONT> tags, complex tables and framesets, the sooner that overworked web coordinator can turn the site into an eyesore as well as a usability nightmare. By separating design elements from content, we make it much harder for our clients to destroy the sites we’ve worked so hard to create for them. CSS is our friend.