A key part of any brand is consistency. We regularly work with brands to help ensure their voice, image, and communication mediums are reliable. The key to consistency is standards – easy to find, understand, and follow. If you don’t keep it simple, you’re bound for failure. That’s why an early part of any web development project should be establish the style guide for your project.
Style guides are not sheets of paper, or creative briefs. If that’s where your head is at, you’re stopping too soon. You, the marketing manager, and the creative working with you, might be able to use those pieces, but they are static and lack context. A real guide provides the user with information in a format they can find, understand, and use in under 5 seconds.
Authors are not the marketing directors, creative directors, or even web developers. They are very likely an overburdened employee asked to ‘update some pages’ because ‘it’s easy.’ If developers have done our job, it is easy, and the task is likely to be delegated. Let’s not stop at making editing easy. Let’s make it easy to know how to edit.
Your site’s authors are not much more committed to brand standards than a normal site visitor. It’s an additional task required on top of their existing task. Mozilla’s work on loading speeds exposes a noticeable percentile drop in attention spans for each second required to perform a task. Studies have shown that 32% of consumers will start abandoning slow sites between 1 and 5 seconds. That’s why I suggested the 5 second rule for interacting with the style guide. Here are some ways to make that possible:
Style guide requirements:
- The style guide should be linked to from the editor, popping up in a new tab.
- The guide must include:
- An index, anchor linked to speed them to what they need
- Basic typography (h1-h*), paragraph, blockquote
- Basic ‘buttons’ made out of links (if applicable)
- Callouts (if applicable)
- Basic 1-4 column handling
- Common custom functionality tags such as WordPress short codes, Drupal filters, or Magento widgets with examples.
- Guidance how elements should be mixed. IE:
- At least one paragraph should appear between each heading.
- Include a horizontal rule after every topic change, before the new heading.
- The guide should not include any of the following:
- Form elements
- Messaging elements
- JavaScript elements
- Anything else the user isn’t likely to use.
If you do a search for Style Guides, you’re going to come across some very technically detailed information. One of the top examples is Yelp’s. Go ahead, read it. See if you can find out how to create a two column layout in the next 5 seconds. I’ll wait…
Welcome back. Slightly overwhelmed? Annoyed? You should be. The volume of information that is non-actionable is ridiculous.
What you saw was not a guide, at least in terms of what an author can use. I personally love that thing, but only because I know everything I might be expected to produce as a web developer is on the page. That’s an asset library, for lack of a better term. You might also call it knowledge dump if you’re still bitter about trying to find the two-column layout. I encourage you to have one of those for development team, but it’s a separate topic.
An author’s style guide is incomplete if it includes everything it could. We must instead aspire to Antoine de Saint Exupéry’s vision of perfection:
It seems that perfection is attained, not when there is nothing more to add, but when there is nothing more to take away.
Do your authors a favor. Keep it accessible, simple, and quick.
[more]
