Taking Your Talent to the Web- P19 doc

So maybe it’s time to look at a tech-nology that handles both the separation of style from content and the need for precise typographic control of web text.. While browser companies corr

T HINKING S EMANTICALLY Photoshop and ImageReady perform vital tasks splendidly, but what they cannot do is generate semantic websites predicated on the separation of style from content Being visual tools, they necessarily create visual sites—

and of course this is what most clients want and what most designers are comfortable with But this is not the only way and not necessarily the best way to create websites

Visual sites are a comforting link to the past, to our history of print and package design—of concrete objects made beautiful and intelligible through precise design Semantic sites are something else again

Because they are rooted in images, and images are necessarily of fixed and specific sizes, Photoshop and ImageReady generate image-laden sites laid out in HTML tables with specific heights and widths They do not generate the Liquid Design we discussed in Chapter 2 because it is not in the nature

of a pixel-based program to develop abstractions of form And certainly

they cannot separate style from content because style is their content.

So separating style from content becomes your job, if you choose to accept

it As an interim step, what we’ve done in our shop over the past two years

is confine ImageReady’s slicing skills to key elements that must be precisely sized—for instance, to branded navigational menu bars But whenever pos-sible, instead of slicing entire comps to create precise graphic web layouts,

we use our comps as guidelines to create HTML (or, even better) CSS equiv-alents that are loose, flexible, and fairly minimalist

This process enables us to create templates that function as “content con-tainers.” Such sites are still branded and still function as all sites function, but they are less tied down by fixed elements than traditional sites This makes them easier to revise and update (just change a style sheet) and harder for clients to screw up when they take over the maintenance chores

It also makes them easier for nontraditional browsers to process and posi-tions them for the next phase of web development

251 Taking Your Talent to the Web

We have now broached the vital next step in the web’s history: the sepa-ration of style from content Meanwhile, in our discussion of web typogra-phy, we have so far avoided the specifics of coping with actual web texts

as opposed to decorative elements So maybe it’s time to look at a

tech-nology that handles both the separation of style from content and the need

for precise typographic control of web text

The people of earth call it CSS, and the next chapter will explain how it works—and what to do when it stops working

252 HOW: Visual Tools: Thinking Semantically

chapter 10

Style Sheets for Designers

I N THE BEGINNING WAS THE WORD : without style and unadorned on a plain gray

background

The scientists who envisioned the Web saw it as a place for reasoned dis-course conducted through documents whose structure was as logical as the arguments they propounded HTML would present content and

struc-ture, and the browser (or User Agent) would interpret it visually, according

to its own built-in rules of display <h1>Headlines</h1>would look like whatever the browser decided they should look like (typically, 24pt Times)

<p>Paragraphs</p>would look like whatever the browser decided they should look like (typically, 12pt Times)

In early browsers such as Mosaic and Netscape 1.0, web page backgrounds were generally gray Why did browser developers choose this dingy color? The answers are lost in the mists of time In other words, we have no idea But we do have a theory Namely, images seemed to want to appear against

a black background for maximum contrast and impact Text, of course, wanted to appear on white We’re guessing that the makers of the first browsers compromised by giving us a washed-out gray that would provide rudimentary contrast for either type of foreground element Regardless of their reasons, the resulting web pages were not much to look at

T AG S OUP AND C RACKERS Designers and their clients, however, were not about to sit still for such lim-ited presentational capabilities, so browser companies (mainly Netscape at first) began “extending” HTML willy-nilly to offer web designers more con-trol over the visual appearance of their sites Netscape extended the

<BODY>tag, allowing us to choose background colors as well as text and link colors Microsoft gave us proprietary <BODY> tag extensions that allowed us to create margins of a limited sort

Netscape gave us the <FONT>tag We could control the size of our text, regardless of its structural context (We could, for instance, make para-graphs really big <FONT SIZE=”7”> and headlines really small <FONT SIZE=”1”>even if such approaches contradicted the underlying document structure.) Microsoft gave us the <FACE>attribute for the <FONT>tag We could control typography in a limited, Flintstonian fashion <FONT FACE=”ARIAL, HELVETICA”>would make text on the page appear in Arial

if the visitor’s operating system offered that font If not, the text would appear as Helvetica If neither font were available, visitors would see their default typeface (probably Times)

While browser companies corrupted HTML in a well-meaning but wrong-headed effort to serve designers and their clients, designers began setting their text in Photoshop and saving the images in web-friendly GIF format 14pt Meta or Futura, with precise kerning and leading, looked a lot better than <FONT FACE=”ARIAL, HELVETICA”> Instead of using HTML to present text, designers used it to embed visual representations of text

What we gained in presentational spiffiness, we lost in usability GIF images

of text could not be searched, indexed, copied, or pasted They could not even be seen by some people or in some browsers

At the same time, designers began using HTML tables to control their lay-outs, a practice most of us still follow, though it runs counter to the struc-tural nature of HTML The practice has another downside as well: It yokes our presentation to our content, making it harder or even impossible for those with disabilities or those using nontraditional browsers to access the information on our sites

254 HOW: Style Sheets for Designers: Tag Soup and Crackers

Many of us went beyond using tables and text images We harnessed invis-ible powers to our task As you know, in Photoshop any layer may be fully

or partially transparent Images in the GIF format are limited to 256 (or fewer) colors, any one of which may be designated as transparent Using Photoshop, web designers created small (1 pixel by 1 pixel) GIFs filled with

a single, transparent color We then used these transparent GIF images to control the positioning of elements on the page, as if we were designing for a fixed medium like print

We used these transparent GIF images again to simulate leading, inserting

“spacer GIFs” between lines of HTML text

<IMG WIDTH=”100” HEIGHT=”100” ALT=” “ SRC=”transparent.gif”>

Notice the height and width Netscape’s browser likes it when you indicate the size of images used This helps the browser leave space for the images, even before they have finished downloading A tangential aspect of the whole affair is that browsers will display your images at any size you tell them to Thus a 1 pixel by 1 pixel transparent.gifcould be 100 pixels wide

by 100 pixels tall if you marked it up that way in your HTML These crude feats provided rudimentary layout control, while HTML itself did not

That was the key HTML, practically the only tool at our disposal, provided

no typographic or layout control So most of us deliberately deformed the simple markup language in hopes of forcing it do our bidding We made a

“tag soup” of the Web, using <TT>(“typewriter text”) to force the browser

to display a monospaced font (usually Courier) To create vertical space, we deployed transparent GIFS or typed structurally meaningless carriage returns such as:

<br><br><br>

or went so far as to create “invisible headlines” which were never intended

to be read To create invisible headlines we used the nonstandard <FONT COLOR>attribute to set a headline to the same color as the web page’s background For example, on a page whose background color was white,

we might use the following:

<H1><FONT COLOR=”#FFFFFF”>Don’t read this headline</FONT></H1>

255 Taking Your Talent to the Web

By means of these stunts, the Web began to look better on the surface, but the markup that was supposed to hold it together was becoming less and less meaningful, more and more fragmented Documents made less and less structural sense and were more and more tied to the quirks of specific browsers “Use Netscape so you can see this page!” we screamed at our viewers in the mid-1990s

In 1996, Microsoft, Netscape, and other members of the World Wide Web Consortium (W3C) came up with a brilliant new standard technology—one intended to give designers far more power over the display of web pages, without further corrupting the structural meaning of their HTML docu-ments The name of that technology was Cascading Style Sheets (CSS) CSS is the best friend a visually oriented web designer ever had, but sup-port for this crucial standard has been a long time coming In the follow-ing section, we’ll gently introduce you to CSS, showfollow-ing how and why it works Afterward, we’ll talk about what can go wrong with CSS and pres-ent a detailed No Fault CSS Plan that enables you to harness the power of style sheets without running afoul of buggy browsers The good news about all of this is that most current web browsers now offer good-to-excellent CSS support The bad news is that older, inferior browsers are still in use, though they are fading away over time (see the section, “The 18-Month Pregnancy” in Chapter 2, “Designing for the Medium,” for comments on this topic)

As a last prefatory note, you might find yourself working at a large web agency—one where web designers spend most of their time in Photoshop and Illustrator, while HTML production chores are handled by a separate group of professionals Even at job like that, you will still need to know CSS Why? It’s because even when HTML chores are assigned to web technicians,

it is almost always the web designer’s job to create the style sheet

256 HOW: Style Sheets for Designers: CSS to the Rescue…Sort of

That may seem puzzling If web technicians and developers handle all other markup and coding, why wouldn’t those professionals also be called upon

to write the site’s style sheet? The answer is simple—style sheets control typography and layout, and that makes them the designer’s responsibility

(You don’t really want a programmer deciding how your web typography should look, do you?)

CSS is a developing web standard whose purpose is to control the display

of web pages Cascading Style Sheets Level 1, the initial version of CSS rec-ommended by the W3C in 1996, is well (or fairly well) supported in current browsers including Opera 5 or higher, Internet Explorer 5 or higher, and Netscape 6 or higher CSS empowers web designers to control such ele-ments as:

■ Font families, font sizes, and leading (“line-height” in CSS-speak)

■ Margins and page divisions

■ Colors, backgrounds, whether or not backgrounds tile, whether or not they scroll, and so on

■ Positioning of elements in relation to each other, and to the edges of the browser window

■ Borders, HTML elements (such as <FORM>elements), and more

As this list suggests, CSS is a very powerful standard that can replace the use of HTML tables to control layout; end the use of <FONT>tags to con-trol web typography; and do much more than tables and <FONT>tags ever could (see Figure 10.1)

257 Taking Your Talent to the Web

Separation of Style from Content

Beyond providing designers with a powerful tool set, CSS serves an

addi-tional purpose—that of formally separating a website’s style (or design ele-ments) 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

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

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

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 non-graphical browsers and devices, such as web phones, Personal Digi-tal 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 design-ers 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

259 Taking Your Talent to the Web

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 man-ually 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 tal-ent 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

260 HOW: Style Sheets for Designers: Designing with Style