HotWired Style

Principles for Building Smart Web Sites

By Jeffrey Veen, Wired Books, Inc. (hotwired.com/style/)

What follows is a summary of this fine design book. For the details, buy the book.

Embrace the Medium

Form follows function in web design. There is a constant pull between art and utility, extravagance and practicality, and entertainment and reference. Be clear where your site fits within the *library (function) to gallery (form) continuum*. The goal is to balance pure information with an aesthetic that not only complements the message but becomes part of the voice. Take control of the trade-offs letting the Web's limitations sharpen your focus rather than ensure your downfall.

Know Your Code

Build pages manually for more control and compatibility. Keep the browser in the loop by making text be text and images be images (no graphic text, except in logos). Graphic text is not accessible to search engines and readers, and does not scale well.

Think like a hacker

HTML 3.2 did not provide layout capabilities so designers hacked tables to lay out their pages. Structuralists thought this was a corruption of the language, as it mixes content with layout (presentation). This practice is widespread now (even WebReference.com is not immune :) but help is on the way. Style sheets let designers break through the rigid display rules of each browser. Now, instead of anticipating the quirks in how each browser translates documents, you can *send along your own translator with a document.*

Style Sheets allow you to simply mark up text and images with basic structural HTML tags and then send a file with instructions (rules) on how to present the tags. It is this separation of form (presentation) and function (HTML structure) that gives style sheets their power and flexibility. You can change entire sites automatically by changing one style sheet. You can offer your content in different styles based on the client type. WebTV, print, hand-held, all can be addressed. Because these rules are scriptable, designers can now explore *temporal design*: making pages that evolve over time or react to input.

CSS2 allows exact positioning, so designers can layout pages without tables.

Degrade Gracefully

Take a layered approach to adding features to your pages and degrade gracefully using JavaScript and nested HTML. Test your pages widely. Conceptualize and build your pages as text documents that support layers of graphics and multimedia enhancements: text first, images next, layout and position these two layers. Over that add animation, then sound, then other multimedia. On top of that carve the message into frames for navigation, or create a compound document architecture. Using the proper code and consistent methods, these layers can be independent of one another, so that every browser shows the features it can display and not choke on the rest.

Always use ALT tags behind graphics to communicate meaning, even blank for nonfunctional graphics (single-pixel GIFs).

Be redundant again and again. Nest HTML for degradability:

<EMBED SRC="media/video.mov">
   <IMG SRC="media/shot.gif" ALT="A balloon exploding">
<EMBED>

Imagemaps - Text browsers and spiders cannot see server side imagemaps, but if you do use them use client and server side imagemaps for speed, WebTV, etc.

Summary - Carefully separate structured content from its presentation and behavior, couple that with fallback techniques to create web pages that intelligently map to the client's capabilities.

Be Simple

Strive for clear and simple design. Use real-world knowledge of symbols and systems: ex. right arrows on right, instead of next (turn page from right to left, and vice versa). Provide context on every page (give an idea of where they are in the heirarchy). Use visual consistency to fuse pages into a single publication that combines to form a frame of reference. Some sites (CNET) use a site-wide TOC to provide context and consistency (across their pages). But user convenience comes at the cost of variety and screen space. Metaphor - Let metaphor be poetic, not literal (eliminate drop shadows and bevels). Metaphor takes the real world's system of subtle symbols and builds consistency into your site, and can orient users quickly. But don't be a slave to metaphor, use it wisely to shape and clarify your pages.

Summary: Simplicity is key on the Web. Take control of content and boil its presentation down to essential elements in a subtle visual context.

Be Fast

Let speed shape every decision you make in web design.

Optimize your images:

• Crop
• Minimize colors
• Maximize horizontal redundancy
• Avoid gradient blends
• Minimize the number of different images on a page to reduce transmission time of entire page (each image requires a round trip to the server).

Pyramid design: make top pages small and the ones below them gradually bigger, until final destination is the user's largest download. Users commit by clicking. Home page should pop onto the screen. Compress your visual message with small graphics, short descriptive text, sparing use of multimedia. Don't try to tell everyone everything at once. Give users alternative ways of accessing your content (browse, search, direct/newest) and get out of the way.

Be Bold

With limited bandwidth smash your images flat, make symbols and pointers and icons blocky, simple and useful in a matter of seconds. Be confident and daring in your visual language. Grab your readers.

Be Clear

Use user-centered design, based on strong context and theme. Don't force your readers to decipher your navigational scheme. You have about ten seconds to make an impact. Look at each page through the audience's eyes. Offer well placed clues and orient them.

An "eyefull" - studies show that short paragraphs with icons above scroll bar get the most clicks, especially on icons. This shows users don't read, they skim.

Give readers what they need to orient themselves and make decisions, no more or less. Show them what you've got and how to get there. Then get out of the way. Don't let user testing become a design-by-committee process that leads to generic pages that offend no-one and inspire no-one. Use testing as a guide, an error-checking mechanism.

Think "above the fold" or above the scrollbar. Since most users use 13-15" monitors that show only the first 350 pixels the top of your page should be treated in the same way newspapers treat their front page "above the fold": put your most important content there. Define a size for your pages (500-580 pixels wide is safe) and stick to it.

Subvert Heirarchy

Don't make people guess what's new - promote it, display it, lead with it. Make your front page the content, and a window into the site itself. No nesting - your file structure and site structure should be completely independent of each other. Time-based vs. subject-based - lead with your newest features. Paint a picture for that day, a window moving through the daily content. The purpose is to build a relationship with your audience that doesn't fade over time. By placing actual content at the top and making your frontdoor change through time to match the pace of your content will give your visitors a sense they're missing out if they don't come back often.

Summary - lead with what's new, use time- rather than subject-based organization.

Mastering Hypertext

Link mindfully. Links interrupt the visual patterns that make text work. Linking in the margins (in context), and not at the end, avoids interrupting yet exploits the dynamic aspects of the Web (Feedmag.com). Describe your links to save the user time. Within a story your goal is communication, not navigation. Use links to enhance your message.

Summary - link mindfully, link in context.

Beware Multimedia

Carefully balance appropriate multimedia to greet users with a seamless experience. Compare each technolgy's bandwidth requirements to its level of degradability. Fast universal technology win over slow and proprietary. Pay attention to your first frame or use scripting to sniff plugins and degrade.

Conclusion: Use layered code to gracefully degrade web pages, and evaluate appropriate technolgies for those pages. Test in as many browsers and platforms as possible.

No shovelware - new media deserves new content (word.com). To be successful blend content with creative problem solving to find the best way to communicate using today's technology.

Follow your Audience

Optional options - offer degradable customization (hotbot.com) audience and content targeting to increase clickthrough and user satisfaction.