Some General Comments on Style Guides

Anything that goes into making your web site distinctive should be analyzed, understood and documented, because one of the keys to maintaining a successful site is the ability to reproduce that which makes it successful in the first place. If your audience loves your site because of its "sassy" attitude, find out what goes into making it sassy. If your audience trusts your site because it speaks with authority, look at what creates its aura of authority.

Every successful site has some fundamental product, message, service or function that appeals to its audience; successful sites package their information in a style that reflects their own special voice, sense of community, relationship to their audience, design imperatives -- in short, a site's style is its personality.

Successful web sites have identities created through the style and voice of their content, and these identities will benefit from a consistency of presentation. The best way to achieve this consistency is with a style guide. And of course, formal style guides provide benchmarks for the site's quality team to test against.

The hidden danger in designing style guides is the potential for conflating content with interface. For many sites, content is the product or message of the site, so content should be presented in such a way as to maximize the impact. But sites also have an infrastructure with navigation schemes and purely functional elements -- don't monkey with navigation unless you know your audience can handle the deviations from familiar standards.

Creating a "Voice"

A great site finds a voice that speaks to its specific audience in exactly the right tone; a great site creates a style guide to help its writers and content providers maintain this consistency of presentation.

A style guide doesn't have to be complicated; the authors simply decide on certain goals for content, and agree to some consistent rules for grammar and word choice. For example, if your voice is best served by using the word "website" instead of the words "web site", make it official. If the content team decides that end punctuation rightfully belongs outside closing quotes, so be it. If your content is purposefully irreverent, specify the limits, if any, to the degree of irreverence allowed. The point is to decide on a shared approach to style, and to implement this approach in a consistent manner.

A good example of a style guide for a particular voice is the book Wired Style: Principles of English Usage in the Digital Age. While this book describes well the making of Wired Magazine's distinctive voice and attitude, it is much less useful as a primer for web style precisely because it documents Wired's style: A web site's style guide must come from the teams and corporate culture that created it, so adopting an external style will hurt the site's purpose for being. I appreciate Wired's iconoclastic approach to voice, but I think they do a disservice by not explicitly differentiating between content and site infrastructure:

...we encourage you to do the following: Welcome inconsistency, especially in the interest of voice and cadence. Treat the institutions and players in your world with a dose of irreverence. Play with grammar and syntax. Appreciate unruliness.
(page 96)

In your style guide, keep content voice distinct from any voice you have for navigation and other infrastructure elements; your content is too valuable to create barriers blocking your audience from accessing it.

Page Layout and Design

Just as voice plays a role in defining a site's identity, so too does the "look and feel" of the pages and divisions of your site. Most pages combine content with functional, branding and navigation elements. The most common page layout on the web is probably the "navigation on the left, content on the right" theme made famous by C|NET.

Usability analysis teaches that "typical" users are easily confounded by certain common design pitfalls; to be fair, some of these pitfalls are due to the limits of HTML as a layout language, or to the unclear boundaries between the page being viewed and the browser application that displays it. Every designer must make some key decisions on the layout of pages, the inclusion and placement of navigation and branding elements, the appearance of text on the pages, and the order in which pages should be viewed; the designer's challenge is to make decisions that result in an appropriate experience for the target audience.

Designers must develop a style guide for the look and feel that they want: if a set of font faces is used for a specific category of element, document it. If the navigation scheme requires a specific color combination, document exactly which colors belong in which circumstances. A formal style guide that specifies how the pages are to look provides a benchmark for quality control to test against; even more importantly, though, a formal style guide provides a baseline that quality assurance can work with to suggest improvements.

Some Online Examples

Here are some examples of style guides that discuss design considerations and the reasons behind making certain decisions; please note that these are exit links, pointing at external web sites.

Web Style Manual from Yale University School of Medicine's Center for Advanced Instructional Media (C/AIM)

According to the authors Patrick Lynch and Sarah Horton, this very strong site was created "to approach Web page and site design as a challenge that combines traditional editorial approaches to documents with graphic design, user interface design, information design, and the technical authoring skills required to optimize the HTML code, graphics, and text within Web pages."

(http://wwwwseast2.usec.sun.com/styleguide/)Sun Microsystem's Guide to Web Style

From the authors: "This is a cookbook for helping people create better web pages. The guidelines presented here represent the opinions and preferences of a small group of people within Sun who have created some web pages, and have looked at many more. We've drawn from our own observations, opinions and judgements about what makes web pages better or worse, as well as extrapolating from the existing body of usability and user interface design literature." (The above URL is no longer valid, and I haven't found a replacement.)

Webmonkey's "The Foundations of Web Design"

Author Jeffrey Veen: "...we've learned a tremendous amount about how to do what we do. It seemed only natural to collect and rigorously evaluate our principles for Web design."