Wednesday 30 March 2005

In Search Of: The Perfect Style Guide

DOCUMENTATION IS CRITICAL TO A WELL-RUN TEAM. For web designers, documentation often manifests in the form of a style guide. But how do you write a good one? Where do you find decent examples?

Recently, a reader wrote in and shared this bit:

I have decided that I really need to take some time and write a style guide for the Intranet site I maintain. The problem being that we are finishing a redesign and data scrub and
I want to make sure that those who follow will know how to achieve the same results on new pages.

I have searched the web over, and have not found a good template for a style guide though. Most are either too vague or apply to the entire marketing strategy which my team is not involved in. Do you have any suggestions?

According to this reader, the NYC Public Library style guide was a little too broad (I like it but I, too, have found it limited) and that FSU had a pretty decent style guide but a little too marketing oriented for the reader’s tastes.

I agree that there’s a lack of strong style guide examples out there. So, got any tips on existing guides you like? How about effective style guide methods? Or perhaps even more important: Once you’ve got a style guide, how do you ensure people stick to it?

Let’s strategize on ways to best manage documentation practices.

Filed under:   general
Posted by:   Molly | 00:54 | Comments (37)

Comments (37)

  1. has both a Documentation Style Guide and a Markup Reference which are both quite useful in my opinion.

  2. Pingback: Aaron Toponce

  3. Yes, we use the Mozilla Guide at Campbell-Ewald as well. It’s pretty tight.

  4. Whoops, I should learn how to make a url. Can you believe they pay me to make web sites? Here’s the proper link.

  5. check out maxdesign – A webstandards checklist – its an excellent guide !

  6. Sitepoint has a nice CSS Quick Reference Guide…it came free if you purchased the book in the first month or so.

    I’ve pinned it on the wall so all the developers at work can gander over on it. It’s proved much usefulness. There hasn’t been a problem we couldn’t solve to make our CSS cross-browseral.

  7. Molly,

    Thanks for giving some time and blog space to my question. I am currently reviewing several of the documents mentioned in the posts. I think that I may be able to put something together from these resources and will be glad to share when I do.

    To all who responded thank you for your input. Sometimes getting started is the hardest part.

    Best Regards
    Mike H.

  8. Every once in a while, something like this comes up and I realize it’s been totally absent from my work. Thank you for the wake-up call, Molly.

  9. Wow! I like Jonathan’s favourite – that one is amazing.

  10. Here is good quote.

    If your organization is a large one, with more than one section involved in Web site development and maintenance, if the organization offers different types of site (for example, portals, advocacy sites or online training sites), or if you are involved in developing Web projects collaboratively with other organizations, your Web style guide should make provision for diversity within a general organizational framework. In all cases, decide which components of your overall Web guidelines must be adhered to—and these may span both marketing and usability concerns—and which require greater flexibility.

  11. hi i was involved in the creation of the beforementioned styleguide for the german army .work started about two years ago. i did the design and wrote most of it down.

    the difficulty here was that the guide must hold rules for a large number of sites, that existed or not and try to be aware of unknown changes in communication and information architecture which are starting to evolve now.

    plus it had to cope with the big shift to modern css-layout as well as accessibility, as the army is forced to be accessible by german law.

    the guide is a website that follows its own rules and thus demonstrates how the design can be realized the proper way for the coder. by that it was possible to avoid writing more about coding than about design. still there is a lot information about why code has to be certain ways, but the code examples themselves are in the source of the guide itself.

    the sites that the guide would be applied to were of many kinds and needs partly unknown. so the design-rules are breaking it down to stick-together standard modules like data-tables, forms and form-elements, lists and styles for html-elements as hx, p abbr, cite, address and so on. of course main modules like navigation, header, footer and marginal are described in their appearance, too.

    this seemed to be enough for coders, concepters and webdesigner to develop a site. but for a client it obviously seemed not. so it was inevitable to make a reality check of the designed modules by creating some basic use cases and the page layouts for them. most of them could be done directly in html and css. with these examples it was then possible to apply the guide to sites. over time more examples were done and sites were created that now show what is possibly still left to be defined more rigid.

    the risk is that the existing sites tend to illustrate the guidelines and future sites will be oriented on their implementation more than on the written rules. so it would be good advice to have someone check sites before they go live. and of course constant expansion and slight revision of the guide must go on.

    an rss of changes is probably a good thing, alongside a blog for requests and discussion, as long as it does not gets to be a ‘democratic’ process.

  12. Pingback: Communications » Blog Archive » From the old Hot Links file

  13. Hi, I tumbled into this blog while I was trying to search for good template for website style guide. I agree that there aren’t many good examples of style guides however I would like to share some good ones that I have found.

    Here is Deutsche Bank Website Style guide. It contains PDF file of the style guide.


    One of the best style guide that I have searched so far. Creative.

    Hope this could help others in my shoes!

  14. Pingback: el factor humano » Archivo » Guías de Estilo en Castellano

  15. Love your beatiful

    broccoli isn’t so bad as long as you know how to cook it.

  16. Pingback: Bedava Mp3 indir » Blog Arşivi » Backlink

  17. thanks for your sharing

Upcoming Travels