Hotwired Style

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.