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.
Cybrarian uses HTML, not images, to combine navigation with speed.
Graphics, for example, can be designed to exploit both the characteristics of HTTP servers and the benefits of compressions schemes. Many small images combined into one, like the toolbar on the Webmonkey frontdoor, 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.
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.
Say more with less - the power of simplicity in The Fray.
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 toymakers.
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. Look, for example, at the frontdoor of Webmonkey. 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 on Webmonkey's frontdoor.
Other sites employ similar strategies, while still maintaining their position on the form-versus-function continuum. Look at the Red Meat Web site, a collection of comic strips from artist Max Cannon. The use of clever section names with interesting and stylistic icons says much more than a simple listing of the obvious areas. "Fresh Meat" replaces the standard What's New link; "Meat Buy-products" would earn my click faster than "eCommerce" ever would....
Mastering clarity (and humor) on Max Cannon's Red Meat site.
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.
This article appeared originally in HotWired.
