All About Web Style Guides

I was reading the well-reasoned article, Content Strategy for the Web Professional today and saw commentor David Mosher’s question about what writing a style guide entails and how to write one. I found myself writing an outrageously long comment and decided it was less annoying if I just posted this response on my blog and linked to it.

The short answer is, different people have different definitions for style guides. Here’s what I’ve seen:

Broad and Narrow Definitions

To some people, a style guide can mean a comprehensive listing of standards for your Web project, encompassing everything from structure to design to graphics to W3C standards to word choice (a la the Web Style Guide: Basic Design Principles for Creating Web Sites, by Patrick J. Lynch and Sarah Horton).

To others, the style guide means a document that is more content-specific and unique to your project, focusing on editorial style. For those of us with a word background, we would probably think to printed counterparts like the Chicago Manual of Style, the AP Stylebook and Strunk & White’s The Elements of Style, to name a few. The style guide in this mold deals with spelling, punctuation, word choice and even SEO issues.

Writing a Style Guide

I’ll elaborate on the second definition, which I use because, in practice, I find it is easier to distinguish between a general design/development/content checklist and a project-specific, editorial-focused style guide.

A style guide is an internal resource that can also be shared with the client and any content collaborators. Its purpose is to foster consistency and effective communication, making editing easier on you and ultimately making your content easier for readers to understand.

What do you put in?

Your style guide entries should write certain things in stone, for example, the company name and trademarks. It can also include frequently used words that you always have to look up because of tricky hyphenation, or some other reason. No style guide is exhaustive, which is why you should specify a back-up source, such as the AP Stylebook and a specific dictionary.

The difference between print style guides and Web style guides is that the latter have to take into account the interactive nature of the medium, usability research and Web writing conventions. Links and lists are two specific areas where print and the Web differ greatly.

Often overlooked, one of the most important part of the style guide is guidelines (and examples!) of the project’s voice and messages. I love the idea of including a project-specific word bank (hat-tip Brain Traffic…see “5 Tips” link below).

Who writes it?

Writing a style guide should involve whoever is making decisions about content for a given project, including content strategists, copywriters, editors, proofreaders and the client.


Here are some real-life entries from a university style guide I update:

  • course work Two words. (Merriam-Webster)
  • curriculum vitae Plural is curricula vitae. (Merriam-Webster)
  • GPA Uppercase without periods, and use only initials in all references. Include the hundredths place.
  • URLs URLs should not stand alone, but be linked from copy by words that relate to the link subject. Do not link from “click here.”

This style guide also contains a long section dedicated to lexical style, with discussion and examples of the university voice and messaging.

A related document I work off of is a site redesign checklist. It specifies 128 actions dealing with content, design and development that must be completed before, during and after launch, under the following categories:

  • Introductory Process
  • Pre-usability Testing
  • Initial Content Review
  • Technical Audit and Development Site
  • Design
  • Structure and Navigation
  • Content Migration
  • Photography, Images and Multimedia
  • Site Review, Testing and Finalizing

Revising and Using a Style Guide

In my opinion, a style guide should be open to revision as the project evolves. The style guide revision process doesn’t have to be overly formal, but it’s essential to:

  1. Keep track of your style questions.
  2. Discuss them with your content colleagues.
  3. Come to a consensus (whether the result is black-and-white rule or just a guideline).
  4. Keep your style guide up-to-date.

Elizabeth Saloka wrote the helpful 5 Tips for Working with a Style Guide. She warns against deviating from your style guide mid-project, and I agree: consider where you in the publication process and whether you can implement the change now or whether you should hold off until the next content roll-out.


Provocatively, Jeffrey MacIntyre recently proposed a radical “reboot” of the style guide, framing it as a “living, breathing process document.” In his presentation on the elements of editorial strategy (see slide 24), he proposed the style guide take on a more “show bible” aspect (referring to the world of TV production), and that it be a training document, with publishing walkthroughs for each content module.

I tend to think that this documentation is vital for any Web site with regular publication of new content, but that perhaps it’s outside the province of the style guide. However, if it isn’t included in style guides, is there a good chance the publication process part gets overlooked?

To all others who have written or worked with style guides, do you think the style guide is the place for publication processes? How much do you see the style guide as set in stone vs. living and breathing? And what other questions or issues have come up in working with a Web style guide?


3 responses to “All About Web Style Guides

  1. Pingback: The content conductor | Shut the door on your way out Cicero…

  2. Pingback: Breaking more than just news | Richard Ingram | Shut the door on your way out Cicero…

  3. Pingback: Upcoming talk on style guides « new media mentality

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s