molly.com
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: web design and development
Posted by: Molly | 12:54 am |
March 30th, 2005 at 2:08 am
mozilla.org has both a Documentation Style Guide and a Markup Reference which are both quite useful in my opinion.
March 30th, 2005 at 7:05 am
The Zen of CSS Design: Visual Enlightenment for the Web
March 30th, 2005 at 7:13 am
Yes, we use the Mozilla Guide at Campbell-Ewald as well. It’s pretty tight.
March 30th, 2005 at 9:31 am
Here is Jonathan Snook Says:
March 30th, 2005 at 9:33 am
Whoops, I should learn how to make a url. Can you believe they pay me to make web sites? Here’s the proper link.
March 30th, 2005 at 9:46 am
check out maxdesign - A webstandards checklist - its an excellent guide !
March 30th, 2005 at 10:00 am
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.
March 30th, 2005 at 10:54 am
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.
March 30th, 2005 at 11:38 am
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.
March 30th, 2005 at 1:22 pm
Wow! I like Jonathan’s favourite - that one is amazing.
April 1st, 2005 at 1:31 am
I been working in a large company for a few years and we had a great styleguide. I also know of the problems with styleguides, first of all the maintnance, if it is too complex it can get really big and hard to find what you are looking for. Especially if you are a external developer looking at it for the first time.
I also belive that you need look at the organication and the users of the guidelines. Who is going to use it? What are the purpose of it. How big are the company/organication? Is the developer sitting just beside you or is it 300 people sitting in a IT department around the world. These kind of things are really important.
I also thing that the need for priotity is important when developing a styleguide. What is a “must”, “should” and “could”. Some things should always be same, for example font, colours and overall layout but mayby interaction design and page layout could be a “could”.
About getting people to use the styleguide is a major problem mostly. Setting up a QA part in the design process it might work. Problem is that is takes some time, and if it comes in the end of the process they might not have the time or money to fix the problems you find in the QA. So informing the user are a good thing, debating if something is not good etc in the styleguides. I have an idea to set up an internal blog where we host the styleguide, if the guide is updated the users will get an ping with the RSS feature, search will be working from scratch and the users will be able to coments on a specific article / post.
Other styleguides that I have found
Yale style guide
http://www.webstyleguide.com/index.html
German goverment site (deutch)
http://styleguide.bundesregierung.de/index_de.html
IBM
http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572
WDR (german)
http://www.wdrdesign.de/_media/pdf/WDRinternet.pdf
Bundeswehr (german)
http://styleguide.bundeswehr.de/
BCBSNC
http://www.bcbsnc.com/inside/style-guide/
Hampshire county council
http://www.hants.gov.uk/TC/cg/styleguide.html
A bunch of university guidelines
http://www.kitehill.net/WebStyleLinks.htm
April 1st, 2005 at 2:22 am
Here are two big corporate styleguides.
SUN
http://www.sun.com/smrc/web/index.html
BBC
http://www.bbc.co.uk/guidelines/webdev.shtml
April 1st, 2005 at 2:25 am
Here is good quote.
http://www.sdcn.org/webworks/guidelines/flexibility.htm
July 13th, 2005 at 3:20 am
hi i was involved in the creation of the beforementioned styleguide for the german army http://styleguide.bundeswehr.de .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.
October 27th, 2005 at 3:35 pm
[…] ding Brand Identity (from the GovExec folks). Bluecoat is currently blocking me from this article on The Perfect Style Guide. (If I recall, it is spe […]
June 20th, 2006 at 9:27 am
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.
http://www.estyleguide.db.com/protected/dbesg_neu/page_business_websites.php
Recommended: http://www.estyleguide.db.com/protected/dbesg_neu/pdf/Corporate_E-Style_Guide_Version_1.1.pdf
One of the best style guide that I have searched so far. Creative.
http://communications.fas.nyu.edu/docs/CP/557/styleguide.pdf
Hope this could help others in my shoes!
October 17th, 2006 at 3:03 pm
[…] En otros idiomas hay muchos ejemplos interesantes, algunos aparecen listados en el sitio de Molly Holzschlag, otros los he ido recolectando: […]
May 8th, 2007 at 5:55 pm
ja krevetko! Vsem sasat’!
May 21st, 2007 at 11:07 pm
http://www.sh-scpv.com/ pump
http://www.sh-scpv.com/ china pump
May 22nd, 2007 at 1:58 am
http://www.sh-scpv.com/Diaphragm-Pumps.html Diaphragm Pumps
http://www.sh-scpv.com/Screw-Pumps.html Screw Pumps
June 22nd, 2007 at 5:09 pm
Hello! Good Site! Thanks you! nwruczjtmoycxm
August 16th, 2007 at 1:30 am
You guys rock! It’s just amazing http://www.2africanart.com - We’ve seen amazing results with African art already.
September 28th, 2007 at 11:10 am
One of the best style guide that I have searched so far. Creative.
November 27th, 2007 at 4:35 pm
Love your beatiful
http://www.evideoizle.com
broccoli isn’t so bad as long as you know how to cook it.
December 17th, 2007 at 6:19 pm
Love your beatiful
http://www.nazlireklam.com
iddaa maç sonuçları
January 29th, 2008 at 1:22 pm
thanx
January 31st, 2008 at 9:57 pm
Those who choose to take the “slights and disappointments” path, meanwhile, are very generously compensated for their trouble
February 3rd, 2008 at 6:14 am
thanks
February 3rd, 2008 at 7:08 pm
[…] a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a […]
March 30th, 2008 at 10:18 am
thanks
April 7th, 2008 at 2:19 am
it is easy to find it, i think u just search on google or yahoo
April 8th, 2008 at 6:20 am
but, i think it is another thing which you have
April 8th, 2008 at 3:49 pm
i like it
April 8th, 2008 at 9:16 pm
interesting, thanks
April 9th, 2008 at 6:33 am
do you know everything about css?
April 9th, 2008 at 2:23 pm
how can i find everything about css?
April 10th, 2008 at 5:10 am
what do you want to learn about css? we can help easily
April 11th, 2008 at 8:28 am
i want learn too, i want start at the beginning of css
April 11th, 2008 at 3:12 pm
it is good t see u
April 21st, 2008 at 6:35 pm
thats the matter i want to learn
April 21st, 2008 at 10:43 pm
ok,thanks
April 24th, 2008 at 6:02 am
hi, umit. how is going on
May 11th, 2008 at 8:09 am
Thanks !
May 17th, 2008 at 4:10 am
it is easy to find it on google