The Art & Science of Web Design | 9

[previous] [next]

The Art & Science of Web Design

Style

https://webmonkey.com/authoring/_stylesheets/

https://style.webreview.com/

https://www.w3.org/Style/CSS/

As we discussed earlier in this chapter, HTML was never intended to address the presentation of a document. Rather, the markup language was created to merely specify what each part of a document was. And, as we've seen, it has been quite successful at that. In fact, where HTML was extended to try to encompass things like fonts and layout, it has largely been unsuccessful.

How, then, are we to do any sort of visual design on our pages and sites?

Enter Cascading Style Sheets.

"Trying to design with HTML," says my old friend Steve Mulder, "is like trying to paint a portrait with a paint roller." And he is right. Steve wrote a book on Cascading Style Sheets (CSS) a few years back, pining for the day when we would have complete control over the visual presentation of our Web pages. Browser compatibility and vendor priorities being what they are, we've only recently seen a critical mass of users upgrading to browsers that just barely support enough CSS functionality to be useful. But the theory behind CSS is important.

CSS is a simple, yet powerful text-based standard for specifying how our content should look in browsers. While HTML excels at telling us what a document has in it, CSS steps in and tells us exactly how it should appear. I won't go into the details and syntax of how the technology actually works, see the sidebar Getting Stylish for a variety of resources to help you with that.

The true power of CSS lies in the power of abstraction. Put simply: keeping your content separate from its presentation is a valuable strategy. Here's how it works.

When you create an HTML document, you add tags that describe the contents of the document to the computer. By adding a style sheet, you can also tell the browser how each tag should be rendered. You are, in effect, telling the browser to ignore the default visual appearance of each element on your page.

"Go through my document and set every paragraph in the font family Verdana. And while you're at it, make it _9-point with 16-point leading. Also, half-inch margins would be nice." And thus you start your conversation with the browser, informing the browser how you want your pages to display. This instruction, by the way, would look something like this:

P {font: normal 9pt/16pt Verdana; margin: .5in} 

Look at the shift here, though. Our presentation of the paragraph is associated with the actual paragraph by name only, not location. That means that we can change the appearance of our paragraphs-yes, all the paragraphs in our document at once-by editing one line of our style sheet while never touching our content. Add the fact that our style sheet can be linked as a separate document and linked to multiple pages across our Web sites, you can start to see the amazing change. Edit one style declaration, and you change the look and feel for an entire site.

See the connection? All of this is built on a model that dates back hundreds of years to the communication and collaboration between editors and typesetters-little style notes in the columns of copy, requesting a particular formatting. Yet we can harness this power of using text files and browsers. Our presentation and structure are both powerfully joined and valuably separate.

Behavior

The Web, though, is much more than a metaphor of words and pictures. The Web has function; it has interactivity; it has behavior.

These qualities, in fact, are what sets the Web apart from other media-from print design, or film, or even animation. In the coming chapters, we'll touch on many aspects of interactivity and behavior, and particularly how it affects design and our approach to it.

This area, in particular, is where the boundaries between the disciplines of words, pictures, and code get fuzzy. Where do we draw the line when, say, we need our pages to maintain the look and feel of a brand experience, but still function as an e-commerce application? When do designers stop worrying about color choices and page layout, and start analyzing the tasks and actions that lead to successfully purchasing of a product, or executing a stock trade, or performing a search, or downloading music?

But there are more ways in which interactivity intersects with design. Even the most basic of design decisions start to get tangled in complexity on the Web. The painfully real fact that the browsers used by your audience are varied and inconsistent will force you to develop a design strategy that includes a healthy dose of programmatic code in your design. The size and scope of Web sites, as well, are growing at an insane clip. The only solution has been to develop systems that generate Web pages from databases using templates. Imagine the variables: you don't know which browser or what content will show up in the interfaces you're trying designing.

And that's just the beginning. There is an onslaught of new technologies and innovations hurling through cyberspace every day. How can we keep up?

We probably don't have to. But we do need to know the possibilities and limitations of our new medium. And we can get help. We can collaborate.

[previous] [next]