14 WHY: Designing for the Medium: Breath Mint? Or Candy Mint?

Finally, the Web is different because it works best when it’s lean and mean. Looking at a full-bleed, two-page spread places no strain on magazine readers, but viewing sites that make extensive use of images, sounds, and other “heavy” media can put a serious crimp in the web user’s experience— particularly if the designer has not taken pains to optimize the site. File sizes must be kept small if web pages are to download quickly and efficiently over slow, dialup modem connections (or even fast connections). Include too many images or other files per page, and the fastest connection will slow to a crawl due to limitations in the number of files that can be served simultaneously.

This conflict between size and speed is known as bandwidth, and we will have much to say about it later in this chapter. For now, the following disturbingly technical definition will either give you your bearings or send you screaming back to the safety of print design.

A Definition of Bandwidth

According to Whatis.com (www.whatis.com):

"Bandwidth (the width of a band of electromagnetic frequencies) is used to mean… how fast data flows on a given transmission path…. It takes more bandwidth to download a photograph in one second than it takes to download a page of text in one second. Large sound files, computer programs, and animated videos require still more bandwidth for acceptable system performance."

Designing for the medium is a joy—once you understand the Web’s limita-

tions and opportunities.

BREATH MINT? OR CANDY MINT?

If you know your web history (or if you’ve skipped ahead to Chapter 5, “The Obligatory Glossary”), you’ll recall that the Web was conceived as an open platform for distributing structured text documents. When physicists Tim Berners-Lee and Robert Caillou created Hypertext Markup Language (HTML) as a limited subset of a much more complex open standard for document publishing, graphic design was the last thing on their minds.

Taking Your Talent to the Web

15

HTML was as simple as rain. It was built in that way so scientists could learn it quickly and use it to publish their physics papers online. Documents published in HTML were “styled” by the default settings of early Web browsers (the familiar Times New Roman on a gray background). Early web pages looked exactly like physics papers, which was pretty darned great if you were a physicist.

But clients don’t buy physics papers. After designers and their clients grasped the Web’s commercial potential, they began seeking ways to make web pages look as good as other professional publications. Today, web standards such as Cascading Style Sheets (CSS) allow us to do just that. But in 1994 and 1995, these standards did not exist, so web designers and browser makers such as Netscape began “extending” the behavior of HTML in nonstandard ways.

What happened to HTML was not unlike what happens to legislation introduced in the U.S. Congress. A legislator wants to change the speed limit in his home state. By the time it gets out of committee, the bill includes taxes on liquor and tobacco, gun licensing restrictions, subsidies for farmers, mandatory parental warnings on CDs and cassettes, and an impassioned plea for school prayer. Over the years, HTML was similarly amended, extended, and tacked onto by a thousand hands. Many of those amendments were intended to facilitate the needs of designers. A few were just plain wacky. We’ve been coping with the damage ever since. Take the following example:

HTML in the “Good Old Days”:

<a href=”index.html”><IMG SRC=”image.gif” alt=”Return to the home page.”></a>

HTML Today:

<tr><td valign=”top”><a HREF=”index.html” target=”elchico” onMouseOver=” window.status=’Home again, home again, jiggity jig.’; changeImages(‘toc’, ‘omen2/ coreover.gif’); return true;” onMouseOut=”window.status=’’; changeImages(‘toc’, ‘omen2/core.gif’); return true;”><img name=”toc” src=”omen2/core.gif” width=”49” height=”25” border=”0” alt=”Return to the core page.” Title=”Home again, home again, jiggity jig.”></a></td></tr>

16 WHY: Designing for the Medium: Breath Mint? Or Candy Mint?

Later in this chapter, we’ll talk about HTML and web standards in more detail. For now, it’s important to realize that the impulse behind the Web’s creation was logical, structured, and intended to address a basic need: the simple sharing of data. It was never about marketing or design.

Despite all that has befallen since those early days, many people continue to view the Web as an archive or database of searchable information. And some of these folks have espoused a set of “rules” to ensure that web pages yield their information with a minimum of fuss and confusion. Let’s call this group the Usability People. Jakob Nielsen is one of their foremost exponents, and you can read what he has to say at www.useit.com. To Usability fans, anything that impedes access to the data is bad; anything that momentarily confuses even a single user is bad; and thus, pretty much anything out of the ordinary is viewed with suspicion or banned outright. This view of the Web is straightforward and can serve as a touchstone for web designers, though the guidelines espoused by Usability gurus should not be confused with Commandments. (Last time we checked, the Commandments were written by Someone else.)

Usability basically reminds designers to think about the needs of their audience. On many commercial and informational sites, web users simply hope to find things or do things as quickly as possible. When checking sports scores or seeking low airfares, they do not wish to be creatively challenged by a complex multimedia experience. They merely want to find what they seek and get on with their lives.

This does not mean that web design is a cold, calculating science. Far from it: Like all good design, web design is aesthetic, emotional, and largely unquantifiable. The value in the Usability perspective is that it reminds web designers to create sites that people can actually use.

This ought to go without saying, but you’ll find that in web design almost nothing goes without saying. Perhaps in print you’ve known designers who become so carried away with graphic design for its own sake that they forget to communicate. The synergy between headline and visual gets lost in a haze of technique; typography advances toward illegibility; subtleties of lighting completely obscure the subject, and so on. When web designers make the same mistake, potential readers and customers are thwarted in

Taking Your Talent to the Web

17

their desire to use the site. The folks in suits start beating the designers over the head with Jakob Nielsen’s latest book, and a good time is had by no one. Don’t let this happen to you. It’s easy to avoid if you keep the intended user and usages in mind.

Magazine and ad layouts may be wild or restrained as long as they are legible. Web design must be much more than legible, though many sites fail to achieve even basic readability, and few indeed are a pleasure to read. (To say nothing of the fact that most ad layouts are intended to convey simple messages, while websites often perform numerous, complex functions.) In his widely read 1996 treatise, Creating Killer Websites, David Siegel listed three cardinal virtues of web design: “Clarity, Brevity, Bandwidth.” Though Siegel was a graphic designer and not a Usability Person (and though he did not always achieve these goals in his own work), there’s likely not a Usability Person on the planet who would disapprove of that trinity.

But many designers and artists saw something quite different in the Web: the chance to create and publish creative works that plunge the viewer into a unique world of imagery, exploration, and cinematic or personal narrative. This view, implicit in sites such as Photomontage (www.photomontage.com) and Presstube (www.presstube.com), is as vital to the health of the medium as the contrasting Usability perspective. We’ll call its exponents the web artists, though this label is somewhat misleading. For while it’s true that many web artists are motivated by the urge toward pure creative expression, the trails they blaze are invariably followed by marketers in search of deep online branding opportunities. The innovations delivered by pioneering multimedia artists quickly become the basis for sites touting Motown, Madonna, or Barney’s New York.

Web artists do not believe in holding the visitor’s hand. They judge that websites can be as challenging as paintings, music, literature, or Swedish movies. They further hold that there is an audience for sites that raise bars and test boundaries. They are, of course, correct. Challenging sites can reward patient viewers. They don’t please everyone but neither does modern painting. Writer Curt Cloninger summed up the conflict between those who view the Web as an informational database and those who see it as a wide-open aesthetic frontier when he shrugged, “Usability Experts are from Mars, Graphic Designers are from Venus” (www.alistapart.com/ stories/marsvenus/).

18 WHY: Designing for the Medium: Breath Mint? Or Candy Mint?

Figure 2.1

Supermodified looks like (and is) a work of multimedia art. Yet it serves a commercial purpose.

Visitors can trigger loops of music by typing on the keyboard. A strictly informational approach to site design, such as the Google Search Engine (Figure 2.2), would be far less effective at creating excitement about the composer’s work (www.amontobin.com).

Figure 2.2

The Google Search Engine. A classic example of function driving form (with the possible exception of the logo). Google’s search engine delivers solid results, and hardcore geeks love it because it strips away the clots that clog the arteries of most commercial search engines. Both Google and amontobin.com are successful at doing what they set out to do, yet they are clearly different in their approach to the user experience (www.google.com).