The Art & Science of Web Design | 7

[next]

The Art & Science of Web Design

Conceptual Model

Revisionist History?

Virtually any historical account is surrounded by a certain amount of controversy. Seldom are all historians in unanimous agreement as to how events actually transpired, who did what when, and what it all means. It should come as no surprise, then, that the birth of electronic publishing is equally rife with debate. Robin Cover, who maintains a repository of SGML resources on the Web at www.oasis-open.org/cover/, provides links to a number of different interpretations of what was happening in the late 1960s. He also provides the following introduction: It appears certain to me that at least these three ideas were common already in the 1960's, often within distinct communities which rarely talked to each other: (a) the notion of separating "content and structure" encoding from specifications for [print] processing; (b) the notion of using names for markup elements which identified text objects "descriptively" or "generically"; (c) the notion of using a (formal) grammar to model structural relationships between encoded text objects. Some of these intellectual streams eventually flowed into the standards work where they took a particular canonical shape, and some important intellectual work developed outside the standards arena. How many of the "fundamental" notions ... were (first, best) articulated within efforts that may be reckoned as belonging, genetically or otherwise, to "the beginnings of SGML" will probably remain a matter of personal interpretation rather than of public record.

Well, great. So the Web came from a bunch of obsessive researchers interested in creating searchable databases out of simple pages of text. What could that possibly have to do with my Web site? Can we please just get to the part about cool graphics and fonts?

Unfortunately, it's not that easy. Before we can decide what to do, we need to understand why to do it.

When I first started developing Web sites, it was for Wired magazine's early commercial Web venture HotWired.com. This was early in 1994, and none of us really understood much about how the new medium really worked, or what would work in the new medium, for that matter. So we looked to the traditional process that we knew: designing and developing magazines.

At the time, I was working with Barbara Kuhr, one of the founders and creative directors from Wired magazine. She insisted at the time, and still does, that developing a magazine was not a linear process: you simply didn't take stories from writers, pass them through editors, dump them on designers, and ship it all out to be printed. Rather, it was an iterative process. Editors and designers had to be collaborative with one another to ensure success.

"Words and pictures," she would say, "can never be separated."

Of course, she wasn't suggesting that all designers only concerned themselves with photos and illustrations-just as editors and writers are more than mere wordsmiths. The statement is a metaphor for how the interaction between content and presentation are intimately bound. It is a simplification of the intense collaboration necessary to succeed. The only way to successfully communicate through a printed page is to tie together the stories being told with how they're being presented in such a fundamental way as to achieve something greater than the sum of their parts. And when you look at the amazingly successful work archived in Wired magazine, you can see this theory played out in page after page of stunning work.

How then could we apply this to the Web? At first glance, it seems obvious: the Web, too, is an interplay of words and pictures-structured content and visual presentation. But it is also more than that. The Web adds a third angle to the metaphor-that of behavior. Web sites and Web pages are things we use and interact with in a much more participatory way than a paper magazine. A Web site can offer the ability to solve problems in such a way that we never had imagined. We can buy airline tickets or manage stock portfolios or learn JavaScript or read the morning news and check the weather forecast.

Thus developed a model for Web development: the collaboration of Words, Pictures, and Code.

The Web, however, has its own vocabulary, and to add more detail to our conceptual model, we'll adopt it. The words, pictures, and code categories translate to the electronic publishing model with the categories of Structure, Presentation, and Behavior. So in other words, in the Web publishing world, we can extend the model to:

• Presentation: how that organization is presented visually to users
• Structure:_how something is organized and optimized for ease of use and understanding
• Behavior:_how those users then interact with the product and the product's resulting behavior

As we examine the interplay between these influences, we'll see that they not only represent a conceptual model for the Web at large, but for the pages and sites we're building today, as well as for the collaborative teams that work on them.

Contents Structure Style From Code to Teams

[next]