Design | HTML | Dynamic HTML | Stylesheets | Graphics & Fonts | Multimedia | Browsers | Java | JavaScript | Perl | Backend | E-business |
webmonkey/design/

Big Minds on Web Design
by Jeffrey Veen

The Web is growing up. That the March Seybold Conference - possibly the biggest traditional publishing event of the season - devoted two entire days to this one aspect of content distribution speaks volumes. From an interesting experiment to an exciting frontier, the Web has continued to move from revolution to evolution, growing into a mainstream platform for publishing.

Since Wired co-sponsored the Web-publishing half of the recent Seybold show, we thought it would be valuable to share some of the lessons and discussion that took place at the event. A remarkable array of industry experts and hands-on Web developers talked about and debated the issues we hack through every week here on Webmonkey. For an in-depth look at the Web design sessions, read on.

From Page to Stage - Designing with dHTML
Let's first look at the Web topic du jour: dynamic HTML.

Peter Merholz, an interaction designer for Studio Archetype, announced at the conference that he likes dynamic HTML - sort of. "I consider dHTML a paradigm shift from page to stage," he said. "Now, suddenly, dynamic HTML makes the Web as interactive as my old Apple IIc."

His skepticism may just be warranted, if the mood at that Seybold session was any indication. Combining designers who have real-world experience (and frustrations) with representatives from the major browser companies proved that this latest emerging Web technology can spark heated debate.

Merholz introduced the conceptual framework on which he bases his claim of the paradigm shift that is dynamic HTML. From static text and pictures of early browsers; to the frames, JavaScript, and plug-ins of the 3.0 browsers; to the dynamic capabilities of the 4.0 browsers; Web pages have been rapidly evolving from a print-based structure to a multimedia one.

Now, as pages become fully dynamic through advanced scripting, a flexible rendering model, and a slew of new presentational enhancements, designers must start thinking of their work less as graphic art and more as software development. "This is interface design, not page design," Merholz said.

Jonas Hoglund agreed as he showed the work that Icon Media Lab did on the latest version of the IDG.net aggregator site. "This is an application, not entertainment," he explained. "We built tabbed windows and preferences dialog boxes."

The navigation system for Netscape's homepage likewise leaves behind the static pages of old, according to designer Alan Spar of Spar-tek. While demonstrating the multifunctional interface, he showed how effective use of collapsing and expanding menus lets designers move past some of the limitations of traditional HTML page design. "It allows users to navigate directly to popular pages on the Netscape site while saving a lot of valuable screen real estate," he explained.

Still, things aren't exactly perfect. Wired's own outspoken design engineer Taylor complained that while dHTML effects can be entertaining and visually sophisticated, they are incredibly hard to build within a regular editorial process. "Netscape's Netcaster channel gave us the ability to do lightweight HTML-based animations that could fill the whole screen. That was great. But it was far too much work to maintain the content and produce it regularly."

Thankfully, Taylor added, tools are getting better and designers' expectations for what is possible are becoming more realistic. "Webmonkey's dHTML toolbar is an example of how the technology is shifting to the useful from the merely presentational," he said.

Two of the biggest proponents of dynamic HTML, Benjamin Feinman of Netscape Communications and Sarah Williams of Microsoft, followed with an armload of promises to designers and developers alike. Both company representatives assured us that the next versions of their browsers would focus on "getting it right," rather than adding myriad new features, as has historically been the case with browser releases.

Williams went on to point out that Microsoft understands the difficulties in creating such rich interactive presentations. "We're bringing programming to a place where programming has never been before," she said, acknowledging Taylor's frustrations at trying to build next-generation content. "That's why we're trying to make dHTML as easy as possible so nonprogrammers can bring interactivity and dynamic presentations to their pages."

Netscape's Feinman added that dHTML gives Web content providers more ways to make their content not just interactive and exciting, but extremely relevant. "The ability to provide content that is personalized and applicable to the individual user is a great way to build loyalty with an Internet audience," he said.

The discussion turned to debate as questions from the audience focused on incompatibilities between browsers, and disbelief in the hype surrounding the technology. "Why not just use Java or Shockwave," asked one unidentified developer. ("Because Java sucks" was Taylor's reply.)

Industry analyst Dan Shafer took to the floor with the point of view that the current implementations of Web technology work well, and they work now. Why, he wondered, should we bother waiting for an increasingly inefficient World Wide Web Consortium to pass down a standard?

Feinman, who represents Netscape's interests regarding standards on a number of W3C working groups, responded by saying the Consortium is actually much quicker than most standards organizations, publishing recommendations of current practice in a reasonable amount of time.

Typography on the Web
We'll know that the Web has become a mature, mainstream medium when the publishing industry's true craftspeople begin to do their work there. This is already beginning to happen: One of the century's best type designers, Matthew Carter, is creating beautiful typefaces specifically for online use.

Carter, while addressing the Seybold/Wired Web Publishing typography session, pointed out how typography on the screen has moved from "preview mode to final output." As with other forms of computer-based design, fonts on the screen were always considered proxies of what would ultimately be high-resolution printouts. Now, however, as we design for the screen and for the Web, the type we see before us is the completed work.

To illustrate his point, Carter demonstrated his design methodology for two immensely popular screen-based fonts he recently designed: Verdana and Georgia. Both faces were created "backward" - designed as bitmaps at a number of different sizes until they captured the desired look on the screen, then reverse-engineered into outlines to offer the flexibility of scalable type.

Comparing these faces on screen to MS Sans and Times New Roman, the benefits of designing for the screen became obvious. Careful attention to spacing and letterforms greatly increased legibility, as proven by studies conducted after the faces were complete.

Moving into a more technical discussion, Simon Earnshaw of Microsoft's Typography Group talked about being charged, in 1995, with "figuring out type on the Web." As the initial amazement with the Web soon wore off, it became obvious that there were a number of serious problems with Web browsers and HTML-managed typography.

Before the introduction of the <font> tag, there was literally no control of type. As <font> became more popular, there was a significant problem. "We still had no way of knowing what [font] faces users had installed on their systems." Cascading stylesheets offered even more typographic control, rivaling that of traditional desktop publishing packages, but without solving the installed font problem.

The solution? Send fonts along with the page for temporary installation, just like we send images and sounds on Web pages now. Microsoft's solution uses a utility named WEFT to examine HTML pages and create OpenType faces to send with the page. Bitstream, on the other hand, uses a process of "recording" typefaces into their TrueDoc technology, then renders the recordings on the user's screen, according to Bitstream's Brad Chase.

Chase echoed much of Earnshaw's enthusiasm for advanced typography on the Web, citing a number of reasons why richly formatted text is better than encoding words in graphics, as is currently the practice. "Your text remains text," he explained, "which means it still gets indexed, is searchable, can be copied and pasted, and maintains its accessibility to nonvisual browsers."

Chris Lilly, who develops font and CSS standards for the World Wide Web Consortium, gave examples of the power of these technologies. "Using CSS with embedded fonts is actually much faster than any graphics-heavy page," he explained. "We see much more speed from simple changes like this than by making HTTP more efficient or other speed improvements."

Unfortunately, the many Web designers and developers weren't as optimistic as the evangelists of Web technology who participated in the discussion. With competing implementations and confusion surrounding intellectual property rights of fonts, most audience members agreed that they would wait to see how the competition for a standard format plays out before embracing this new technology.

User-Centered Design
What makes good design, especially on the Web, is subjective to say the least. It was impressive, therefore, to see a group of industry experts unanimously agree that good designs online all share one quality:

Common sense.

If you do nothing else, build your Web sites so that they make sense to everyone. Mark Hurst, the founder of Creative Good - the Web's first "ease-of-use agency" - has little else to bother with at this point. The Web is so hard to use, he argues, that most of middle America - "my grandmother in Kentucky with a new sub-$1,000 computer" - has virtually no interest in trying to decipher your Web site.

"Look at what they need to know," Hurst said. "First they learn their hardware, then their operating system, then they figure out how to dial up an ISP, and then learn the browser interface. Now, finally, they get to your brilliant design. Keep it simple."

This simplicity was shown over and over again by Hurst through the interfaces of the major search engines: "Logo, search box, text links," he pointed out. "Over and over again, the successful sites - your competitors - have embraced this simplicity. If you want to make money on the Web, you'll need customers. And this is how you'll get them and keep them."

Chris Edwards, design director for the Art Technology Group, has approached usability in a different way. For a large intranet information application, Edwards borrowed an approach from method acting - he immersed himself in the environment in which his product would be used. "Understanding how your users work, how they accomplish the simple and complex tasks that make up their day, must guide the design process from the very beginning. I call this 'front-end usability,'" Edwards explained.

While Edwards' techniques work early on in the design process, Keith Instone's heuristic approach is designed specifically for testing existing products. As a usability consultant and curator of the Usable Web, Instone has developed what he calls a "stress test" for Web sites. His methodology is simple: "Pick a few random pages on your site. Bring them up in your browser and ask a few questions. Where am I? What else is here? Where can I go next?" By carefully examining the answers you get to these questions, you can find a number of hidden usability problems with a minimal amount of effort.

Construct Design's Gabriella Marks knows all too well how easy it is for users to become disoriented and lost within an interface. Construct has been a pioneer in developing 3D spaces using VRML and has recently developed stunning examples of Web design using dynamic HTML. Both VRML and dHTML push the limits of what users expect from their computers and Web-surfing experiences. Marks showed how complex 3D experiences can be made manageable by putting layers of constraints on what is possible for the user. A virtual chat space, for example, can frustrate users. "There are always so many windows for them to manage - one for typing in text, one that serves as a map of where you are, and another with a viewpoint." To simplify the experience, Construct developed an automatic point of view - while participating in the chat, a camera would zip around a table of characters, focusing on who was currently speaking, effectively following the conversation while giving the discussion a sense of space. "Usability clues can come from all around you," Marks explained. "We took our inspiration from cinematography."

Interfaces for the Future
If the vision of cyberspace imagined years ago by science fiction author William Gibson is to come true (that is, of a three-dimensional online universe in which a person could become immersed), we've got a lot of work to do. Sure, we've developed the interconnected mass of data we call the Web, but few people are flying over the seas of information, swooping down to access bits of content, then taking off for another destination.

At least not yet.

The assembled panel at the Interfaces for the Future session had a similar vision for the future of information visualization, although not as specific as Gibson's. As interface designer and session moderator John Shiple of Squishy Design explained, "We're developing total experience management - polydynamic interfaces with multiple resolutions of information. The technology is becoming transparent, with convergence from many sources, designed specifically for the individual user."

Big words, sure, but they matched the big ideas on the table. Bryan Dorsey of Cow Design, for example, could throw around terms like "nonlinear virtual search engine" as easily as he could crash his Macintosh. His interface, a quickly scrolling visual timeline, was both very interesting and highly reusable - something Dorsey stressed was crucial to the success of any design work. "This is a great way to take the stuff you encounter in everyday life and put it into context," he explained, while going into detail on his concept of "oneness" - where one interface can serve multiple sets of information. Just as a program like Photoshop can be used as a shell for many projects, so too can an interface like Cow's scrolling timeline be used for many clients. Dorsey showed the same interface working effectively for clients like Disney, Mercedes-Benz, and Nike.

Still, it was all flat pixels on a flat screen. And this, according to Perspecta's Lisa Strausfeld is something we should strive to move beyond. Perspecta's technology, which has evolved from data visualization research conducted at the MIT Media Lab, lets users navigate large spaces of information by zooming into areas of interest. The truly interesting work is happening underneath these interfaces, however. Multiple sets of information can be linked together with rich metadata, according to Strausfield, and that work is happening on the Web right now through such efforts as the XML initiative. The point, of course, is that detailed information can be displayed in many different ways - including deep, three-dimensional representations. "I'd like to see us break out of the box of the planer, 'windows' interfaces," she said. "We need to embrace the depth of spaces."

Three-dimensional navigation is one strategy, but Gong Szeto of io360 design believes a fast 2D interface can be equally interesting and even easier to use. For example, io360's panning interface, which enables users to focus on relevant information in an interface by quickly sliding parts of the screen to the area of focus, effectively keeps the right data under the mouse at all times. The company's Panhattan project exploits this paradigm with a Java applet that lets users move quickly through a map of lower Manhattan and offers lots of information in a tight space. Its Parasite email reader shares the panning philosophy, moving users through their daily queue of messages by zipping headers, text, and commands on and off the screen when necessary.

"Suddenly, we're able to break out of the hegemony of the Macintosh desktop and start to build whatever we want," Szeto proclaimed. "I'm all for that."

Jeffrey Veen is the interface director for Wired Digital, and the author of HotWired Style: Principles for Designing Smart Web Sites. Switching from burritos to quesadillas was a life-altering moment for him.