Understanding design and technology

Embrace the Technology

The heart of design is communication: defining a problem and creating a solution that balances pure information with an aesthetic that gives the message voice. The tension between form and function is the starting point for our exploration of Web design.

Almost immediately after the first graphical browsers shipped, a division appeared between what we've called the "structuralists" and the "presentationalists." HTML was designed in 1992 specifically as a semantic markup language, with few layout capabilities. The underlying philosophy was that you could mark your content with descriptions - this is a headline, this is a quoted passage, etc. Then any machine in the world could interpret those tags in an appropriate way, leading to the universality of the Web as a way to distribute content.But then the Web got really popular.

As soon as HTML began to enter the mainstream, people (notably browser companies) began to extend the language in proprietary ways to accommodate designers accustomed to having control over design and layout. They wanted control of color, fonts, and images. Solutions like the <FONT> tag,

Other designers and technologists have taken different approaches. Notably, those who've developed emerging technologies like Cascading Stylesheets, dynamic HTML, embedded fonts, and XML. These technologies are offering a future that doesn't depend on traditional approaches to design, but rather translates centuries of design heritage into the native language of the Web.

As these technologies mature, we can be optimistic that form and function will converge in a way that will make both the structuralists and presentationalists happy.   << Back

An Approach: The Library and the Gallery

The balance between form and function in Web design isn't just limited to the development of the medium's technology - it makes a great model for how you approach the problems of designing your own site.

One way to formulate a design philosophy is to think of Web sites as lining up on a continuum between a library and gallery. A library's sole intent is to take inquisitive people to the information they are seeking with as little effort as possible. A gallery offers similar amounts of information, but through a much more experiential path. Maybe a better analogy would be an art gallery and a poster shop, where the same information - framed images - is organized and displayed in ways that perfectly suit the needs of each audience.

Imagine if the Yahoo Web site were structured like the game Myst, in which the thousands of site listings were hidden behind layers of mystery, requiring exploration to find them. This would be fun as an exercise in alternative information display, << Back

Know Your Code

In this new medium, a bond exists between content, design, and interactivity. Words, pictures, and code are inseparable; ignore any one and you fail to exploit the unique nature of the Web. Understanding the essence of the technology behind the Web lets you use the medium appropriately and avoid surprises, which results in intelligent content that adapts to its method of display.

Good design is much more than decoration, just as well-written code will take a confusing hierarchy of data and guide an audience through layers of information to the nuggets it needs. The coordination of the two is invisible to the user when done well and painfully obvious when askew.

So it's your job to know as much as possible about all of the intertwined disciplines of publishing on the Web as you can. A good designer will understand, for example, the capabilities of JavaScript and how it can be used to solve information design problems. Similarly, a valuable engineer understands how editorial content and design can be combined to create an effective communication vehicle. Same goes for production artists, marketing managers, and any other integral part of a Web development team. And, as we've said before, this strategy applies for teams of any size,

So where do you start this educational process? Begin with theft. All browsers have the ability to display the source code of any Web page you encounter. See something interesting? Look at how it was done. We're not talking about stealing the work of others. But imitation is the quickest path to mastery, whether you're learning to play the guitar or creating intricate Web layouts using tables.   << Back

Degrade Gracefully

Degradable Web pages - meaning pages that look good viewed in any browser on any computer - are crucial to success online. If the recent history of CD-ROMs has taught us anything, it is that making multiple versions of a single piece of content for different kinds of computers - with modes for different levels of color and resolution, installed fonts, and digital video standards - is not good for the bottom line.

The Web stands as an attempt to avoid that mess. Peel away the flash and hype surrounding the Web, and you'll find the beauty and elegance of an inclusive electronic publishing system. Based on a simple foundation, the World Wide Web can serve the information needs of any user, with any device, at any speed - but only when sites are created by smart authors who plan ahead and make intelligent media. Today's Web is slipping into a proprietary world of competing technologies, and only by understanding this dilemma at its core can those creating content come out ahead.

For example, cutting-edge browser features can give your pages the look you're after, but at what cost? Does it matter that only 70 percent of your audience can see the version you intended? How can you even tell who can see what?

Begin by matching features with information. As we've said all along, design must always match content. If you've determined that your page absolutely must employ something like Cascading Style sheets, then find out just how many users are going to see them.   << Back

Speed, simplicity, clarity

Speed

Speed is a fundamental aesthetic in Web design. One of the biggest Web myths is that you can't design well without high bandwidth.

Everyone talks about what the Web will look like when we all have cable modems or fiber optic cables in our living rooms. Frankly, I couldn't care less. Annotated video and streaming CD-quality music will be interesting, I'm sure.

But it's much more interesting to look at the emerging design solutions to the problem of extreme bandwidth limitations. With the emergence of technologies like Cascading Stylesheets (CSS), which offer advanced typographic and layout control as a layer on top of HTML, we see designers being able to do far more with less.

Before the advent of CSS, a headline would be made into a graphic to give your page the desired look, which wastes bandwidth, but now CSS offers the ability to select type style, precise size, and leading for regular text, as well as exact placement on the screen. New vector graphics formats like Macromedia's Flash enable tiny images to scale to any size without quality degradation. Downloadable fonts send only the characters needed for a given page. All of these things are combining to advance the Web as a medium; all are fueled by a lack of bandwidth.

But you can make your pages as fast as possible without having to rely on all these technological advances. Instead, by using a few simple techniques, you can make your pages much more manageable to your modem-based audience. Front door, will load much faster than a group of smaller, individual images.

This is because every time your browser asks for another image from a Web server, the two need to communicate about the connection. This exchange slows down your browser considerably. But by grouping many small icons and images together and using an image map for navigation, you'll make your page load faster even though the file size may become larger.

Similarly, knowing when to use a JPEG versus a GIF, and how to design the images to make the most of their various compression schemes, will arm any designer with the power needed to develop blazing sites.  << Back

simplicity

Simplicity is, of course, the essence of good Web design. As our networked world grows increasingly complex, layers and streams of information constantly bombard us. If you want to successfully design for the Web, you will take control of your content and boil it down to its very essence.

All design relies on contexts, both cultural and medium-specific ones, to communicate a message. For example, in a traditional print magazine, the reader immediately knows a bunch of things about it - how big it is, how to turn the pages, how to read the table of contents. We're only just beginning to figure out stuff like that with Web sites. Some examples include the underlined words that make your cursor turn into a hand - those are hyperlinks. Or the strip of color that runs down the left side of so many Web sites - that's part of our navigation vocabulary for now.

In a lot of ways, these basic elements of Web design are creeping into other digital information spaces. Web-page-based metaphors for navigating information really click with people who have had limited exposure to computers. Think of how information is displayed on ATMs or kiosks in airports, for example. The paradigm of linked, textual pages isn't as new as we think it is. Neither are the design philosophies we apply to them.

When Microsoft was testing its latest version of Internet Explorer, the Microsoft team found that, while advanced users were annoyed by the browser's integration in the desktop, new users loved things like the Back button, single-click launching of programs, and "favorite places" lists - regardless of whether they were surfing the Net or their own hard drive. The paradigm of linked information resources is rapidly replacing the desktop metaphor. Hyperlinks, navigation bars, and search engines are taking over where folders, files, and trash cans were once the norm.

Simplicity is absolutely essential on the Web. Successful Web design takes control of content and boils its presentation down to essential elements in a subtle visual context. And when you achieve this, you'll be saying much more than you ever could through long explanations of everything on your pages. << Back

clarity

Simple, bright, playful - the Web has a different aesthetic than most other media does, but it is similar, surprisingly, to that of children's toys. Both design aesthetics come from forms of limited bandwidth: Children are in an early stage of mechanical and mental development, so effectively their own bandwidth - the amount of information they can process - is low; Web surfers can mentally process lots of information, but the bandwidth of the Web itself is low. Thus, simplicity is key to the enterprises of both Web designers and toy makers.

Getting people to your pages is hard enough. But once a new reader has made it through the morass of the Web to your page, you have roughly 10 seconds to make an impression, to spark interest, and to keep the reader's cursor away from the Back button. Avoid confusion. Orient your readers with clear navigation, and they will be drawn into your site.

How can you do this? One effective strategy is to carefully match words and pictures together, creating an eyeful of information that easily guides your users to where they want to go.

. When visitors come to this page, they are immediately presented with a large image, coupled tightly with a big red headline. Directly under this pair is a subhead, the date, and a few lines of description. The intent is to capture a number of different layers of attention to draw people into the site and help them find exactly what interests them. By playing the headline off the image, the two can say much more than they ever could alone. And, if that sparks any interest whatsoever, the remaining pieces of information will make the "final sell" that will entice a user to make the click Words and pictures work together .Other sites employ similar strategies, while still maintaining their position on the form-versus-function continuum.

The secret to clarity in Web design is to rigorously anticipate a user's process of discovery while eloquently and succinctly placing clues to your content across your site. Show them what you've got and how to get there, then get out of the way. << Back

Navigation, interactivity

Navigation

You may not consider such fundamental concepts as linking, multimedia, navigation, and interactivity advanced topics. In fact, most design on the Web generally starts with these. But, frankly, the fact that the Web's foundations are taken for granted is a fine reason for a rigorous investigation of these capabilities. When was the last time you stopped to actually think conceptually about how hypertext works before adding that HREF? And how deeply have you studied the effects of adding rich multimedia to your pages?

Also, it's important to master the basic ideas behind Web design before you ever actually write code or create images. The foundations and aesthetics we've looked at so far have focused primarily on thinking about the Web and about how your content should best be presented online. Now, let's get down to building that amazing site.

In this column, we will take a good look at hypertext, navigation (which uses hypertext, but is more about where you send people than the actual technology of linking), multimedia, and, finally, the ways in which Web sites can become smarter. Also, you'll start to learn more about the Web user, as well as what these topics mean for the designer. << Back

Linking - Master Hypertext

One true breakthrough in this new medium is the linking together of content through hypertext - that is, the simple link.

But hypertext creates a contradiction: Links to other sources add depth to your Web site, but you don't want to send your readers away mid-sentence and mid-thought by encouraging them to click to somewhere else.

Consider the very act of reading - how your mind processes letters into word patterns and then conceptually into sentences and paragraphs. Designing a page, whether on the Web or in print, often revolves around the manipulation of these patterns. Headlines, for example, break out of the paragraph mold by altering typographic variables like font, size, and color. By separating headlines and pull quotes from the vast gray blocks of body copy, designers alert their audience to these elements, swiftly communicating their overall message.

Then think about hypertext. In order to add a layer of interactivity to a page (which, of course, is entirely appropriate), designers add links by inserting harsh blue underlined scars into the patterns of the paragraphs. The result? An overbearing distraction to the reader's subconscious. Suddenly, that reader must decide: Do I stop here and click on to this link? Do I finish the sentence and come back? Do I finish the story and scroll back to the navigation element? It's a headachy mess.

A number of strategies can fix this problem. The Cascading Stylesheet language enables you to turn off the awful underline with {text-decoration: none;}. Simply changing the color of the link won't solve the distraction problem, it will merely make it more subtle (but still annoying).

Some sites, including Hot Wired and Feed magazine, experimented with links and moved them to the margin, which creates an annotation-like effect. A benefit to this strategy is that links can be given further context by pulling them away from body copy. The Web site for The New York Times tried a different method - placing all links at the end of its stories.  << Back

Navigation

Here's an interesting offer. Imagine how valuable the daily newspaper would be if every issue were delivered with all the back issues. You would essentially be subscribing to a vast library of recent history that's updated daily. But how valuable would that be if new information were added without distinguishing it from what was available earlier? You would have no idea what you should read on any particular day.

Unfortunately, this is an easy analogy to draw for many Web sites, but it's plain to see why these sites are designed this way. When building a typical site on the Web, it helps to categorize the content in some way, whether by subject, category, or some other means. Those categories typically become directories on some server, where pages are added as they are developed. This strict hierarchy is an excellent way to keep your server organized, but it doesn't do much for the casual user who hasn't explored your site yet.

Too often, a Web site's frontdoor simply displays "the top of the directories" - a listing of content categories that offer a vast array of options from which a user must choose. While this may work fine for a content aggregator like Yahoo or Infoseek, it doesn't offer much context. In fact, it's reminiscent of trade journals that publish each issue's table of contents on the front cover. Fine for loyal readers, but not for those who browse.

Consider how magazines entice newsstand readers into their content. They display bold, vivid images and language designed to offer both a complete understanding of the focus of the publication, while drilling down to a specific content offering, effectively satisfying two types of reader. This balance is even more crucial on the Web, where there are no physical clues to scope: Magazines and books are heavy and take up space, but Web sites do not. The most successful ones Dseamlessly blend the spatial, physical, and temporal, creating a complete picture of what is available behind the front door. And don't forget the basics. Site wide navigation schemes must be consistent, intuitive, and highly comfortable.  << Back

interactivity

What truly is "interactivity"? And who wants it? Is it even a good idea? The term "interactive" is as dangerous a buzzword as "multimedia," but it does stand for something: Users want sites that react to their desires.

A site that matches users' tastes in areas like films and music. While these filtering and matching services can be exceptionally valuable, they are tedious to start and maintain. Can't they just happen automatically?

Generally, yes. But if you want to anticipate users' needs without specifically asking, you'll need to track their content consumption - and a host of privacy issues surround the use of tracking methods. From cookies to unique IDs embedded in URLs to emerging standards for digital certificates, nothing comes without the perceived threat of Big Brother knowing everything we do online.

Holding interactivity up to the harsh light of design simplicity often reveals that users seldom have the time or the desire for deep interaction with a site. Users bounce and browse from site to site, only rarely sticking with new, digital brands. And when they do, people are almost always interested in pure utility, rather than long customization procedures or membership programs. Interactivity must be made to feel as natural as possible,   << Back