The Art & Science of Web Design, by Jeffrey Veen

Reviewed by: Andy King, Managing Editor,

Jeffrey Veen is on a mission to make the Web a better place. His latest book, "The Art & Science of Web Design," came from a need he saw for a higher-level view of Web design: "I looked around at what Web design books were available, and saw a hole in the market." Veen was Executive Interface Director for Wired Digital, and the man behind Webmonkey, HotWired, and HotBot's designs.

For many of you, reading this book will be an "aha" experience. According to Veen, Web design is no longer logos and layouts, it now takes a multidisiplinary approach, with elements of information architecture, programming, and of course design. Veen says: "The line between design and programming is getting more and more blurry." The rare few who stretch beyond their comfort zones and learn these other disciplines can become design masters. Jeffrey Veen is such a person.

It's a different kind of Web design book. Veen doesn't dwell on technical details, he guides you towards more elegant solutions. He provides ways you can find the best solutions (interfaces etc.) through the use of heuristic usability and pattern matching, rather than the tedious testing promoted by the likes of Jakob Nielsen. It's a new design philosophy really, a more fluid approach with "intelligent content that can figure out how to display itself correctly" created from dynamic publishing systems (databases and scripted templates).

And Veen makes it look easy. Veen's final chapter on "Object- Oriented Publishing" ties it all together with a great example of a database-backed scripted template (using ASP) front-end to a church's sermon respository. He whipped the site up on his hard drive using low-cost tools, and shows how easy it can be to create a consistent look site-wide, lower maintenance costs, and easily add new "views" of your data. The benefit of separating presentation from content is that your site can more easily adapt to changing standards, and formats. Want a WAP feed? No problem, query the database with a different template, or even an XSL style sheet.

The days of large static sites are numbered. Going to "dynamic publishing" using a database gives your company a strategic advantage over your competition, as you can publish content faster, and change designs and formats much more efficiently. Your site comes alive. For an outstanding book like this one I provide a summary for your edification.

Book Summary: What follows is a summary of the book, by chapter:

1. FOUNDATIONS - Good design comes from a deep understanding of the technologies behind the scenes.

The Web is based on ideas from the electronic publishing industry and SGML. Just as typesetters specified presentation in the margins, CSS specifies presentation of HTML's structure. CSS *abstracts* presentation from content and allows different presentations for different devices and formats from the same data. The Web is an interplay between structured content, visual presentation, and behavior (what he calls words, pictures, and code). This theme carries throughout the book. A good Web page is a blend of presentation, structure, and interaction.

2. INTERFACE CONSISTENCY - Learning from convention will make your site better.

You can exploit existing de facto Web conventions on your site to maintain an edge. Impatient users aren't interested in learning new ways of navigating your site. Your site is one of the millions out there, and certain interface conventions have emerged (link colors, page layouts, navigation systems, and visual hierarchy) that you need to follow. You are creating a set of internal conventions across your site, based on external conventions from the rest of the Web. Use Pattern language to help sift through the different interface possibilities. If you manage your users' expectations through consistency, those users respond. You build trust through consistency.

Think Mac. Learn how one program works, you know them all. Same for the de facto Web conventions. Think of the basic rules of consistency as context. See an octagon while driving, you know when to stop. See a blue underlined link, you know where to click. He does say you can change link colors, as long as their meaning is clear.

Veen talks about the three panel layout, and the "LSD" design of portals (logo, search, and directory). Like Krug, Veen says each page on your site should answer three questions:

1. Where am I?
2. What's here?
3. Where can I go?

3. STRUCTURE - Information Architecture defined - from the Web's biggest sites to the simplest user experience, to an XML-enabled future.

Information architecture (IA) is structuring content to reveal patterns in data, making the complex clear. Architects need to present these strucures, patterns, and relationships (through hierarchy, and emphasis) then create maps or blueprints to help people reach their goals through Web interfaces. IA's are matchmakers, matching the site's view with the users.

- The Matrix

Veen gives an example of this by analyzing three ad-based portals, Yahoo, Snap, and Go. Portals want to avoid the "single-dip" user experience by integrating content and services to create as many opportunities for cross-selling as possible. Veen calls this "The Matrix," where vertical content areas bisect horizontal services. The more destinations you have, the more opportunities there are to make money.

- Extending the Web

XML simplifies sharing of data, and separates content from presentation. Once a group has agreed upon a set of common tags, just trade schemas and get back to work.

4. BEHAVIOR - Designing with interactivity and self-aware content.

There's no such thing as a controlled user environment. You need to give up control on the Web, let go of absolutes, and embrace the relative. Move from a pixel-based mindset to a rule-based one. Good designers embrace the limitations of the Web, and code around them. Creating self-aware content (through scripting) that adapts to its environment is a sign of the best designers. "Designers create rules for their pages, build in constraints and behaviors, so that their creations mold to the environment in which they're displayed."

Veen gives some examples to illustrate his point. Create "liquid pages" that automatically size to the user's screen. Get relative with CSS and em-based typography. He shows how to script auto- sizing headlines that match the width of the column below, like a newspaper does. "Good designers are harnessing the technology available to them and using it to encode the process they use to do good design."

5. BROWSERS - With so many broken browsers, you'll need a design strategy for all of them.

Veen shows that "old browsers never die" and shows some techniques you can use to create multi-browser designs that degrade gracefully.

6. SPEED - The performance of your Web site is the most critical factor of its success.

Study after study has shown that the number one complaint users have about the Web is speed, or the lack of it. Web pages just display too slow. And don't tell me more bandwidth is just around the corner, they've been saying that for 5 years, and they'll probably say it for another 5. "You'll lose more traffic to the principle of speed than any other." Veen shows some techniques you can use to squeeze every last byte out of your pages with CSS, and give the appearance of speed with positioning.

Veen says that slow modems are actually a benefit to the Web, as "constraint propagates creativity." He says designers do better work when they are constrained by the Web's limitations.

7. ADVERTISING - Being commercial is a reality. Is your site as effective as it could be?

"There's a harsh tension between usability and revenue." Veen looks at strategies (targeting, personalization) to raise clickthroughs and create ads users actually want to view.

8. OBJECT-ORIENTED PUBLISHING - Harness the power of dynamic, database-driven Web sites.

This is where it all comes together. The distinction between design and programming has become blurred, it's as intertwined as the Web itself. "Building effective and manageable Web sites today requires dynamic, page-generating tools." In order to compete, and move at Web speed, you've got to go to a database. Veen's point is that *anyone* can create a database-backed, templatized Web site, and gives an eye-opening example to convince you.

Careful planning up front can pay big dividends later on. He shows how server-side includes, and templates embedded with "middleware" like PHP and ASP can easily query SQL databases for truly dynamic sites. This "dynamic publishing" requires little maintenance, and gives designers a flexible way to display different views of their data. Highly recommended.

See also our interview with Jeffrey at:

The Art & Science of Web Design
By Jeffrey Veen
New Riders, $45
ISBN: 0-7897-2370-0