Develop a Style Guide for Your Site
About the Author
Georgina Laidlaw
Georgina is a professional writer based near Melbourne, Australia. She works on all kinds of projects, from marketing collateral, theses and novels, to blog posts, articles and speeches.
By: Georgina Laidlaw
June 8th, 2002
If you own, run, or produce Websites, you need a style guide. Designer, developer, marketer, or small business owner: a style guide can make your life easier.
I know this sounds like a sweeping generalization, but think about it. If you have more than one page on your Website, you need to have some kind of standard that identifies how you'll format your content -- images, text or otherwise:
- will top level text headings be bold, or bold and italic?
- will images within text be right justified with word wrap, or centered within the text?
- will you refer to your business as MyFirm.com, My Firm Pty Ltd, www.myfirm.com, or something else entirely?
These are just a few of the types of issues that a style guide solves.
So let's take a look at the concept of the style guide. What is it? Why should we use it? Who should use it? And what information should it contain?
If you own or run your own site, you can take this information and apply it on your own site. And if you develop sites for clients, why not prepare a pro-forma document that your customers can adapt to their own needs? It'll make you seem more professional, and make their job easier.
What is a Style Guide?
A style guide is a document that prescribes the 'styles' or standard format for the presentation of information.
It deals systematically with the presentation of content in a particular publication, identifying any standards that the publisher wants to apply holistically to all content across that publication.
Style guides have a big role in publishing, but the concept is also prolific in design. Many large companies, for instance, have style guides that prescribe to designers and artists how the company logo may be used (for example) -- which background colours it may appear upon, what it will look like when reversed, in black and white, etc.
Why Use a Style Guide?
The key purpose of a style guide is to make your life easier. All the aspects we'll discuss here have one result -- they reduce the amount of thought you have to put into tiny details on an ongoing basis.
This means you can focus on bigger things that require precious brain power: landing the next big client, analyzing your traffic figures, planning new additions to your site...
So how exactly can a style guide reduce your workload?
It Makes Content Preparation Easier
Here at SitePoint, our StyleGuide advises that the word 'Website' be published just like that -- capital 'W', all one word. Not 'web site' or 'Web site' or even 'website'.
So, every time we edit content for publication, instead of having to question which form of the word we'll use, and then making sure we use the same form through that article, we simply use the SitePoint standard spelling. Having a 'rule' for this word means it's a no-brainer, and allows us to focus on the message of the content, rather than minutiae like capitalisation.
Oh, and in case you're wondering, 'SitePoint StyleGuide' is another standard SitePoint word that's used to refer specifically to our own guidelines document. Yes -- standards are everywhere.
It Makes Content Maintenance Easier
The internal version of the SitePoint StyleGuide also tells us how to label any images that are included in articles, how to consolidate articles, how to retire old content... you name it, it's in there. These standards make it easier to revise existing content and to manage the vast (and growing) repository of content that's associated with our site.
So if we need to update an author's photo, we know that we can find it easily among the plethora of images stored for the site using a certain prefix -- a prefix that's identified in the SitePoint StyleGuide.
The added benefit here, of course, is that it doesn't matter who's looking for the image -- everyone has access to the StyelGuide, and therefore, everyone (or any new staff who come on board) will quickly be able to learn and understand the way our content is managed, and then apply those same standards through their work.
And these same benefits apply to any site where a professional, regular approach to content management is required.
It Supports Design and Marketing Objectives
Given that a style guide prescribes standards for the display of content, it follows then, that for visually-presented information -- magazines, newspapers, or Websites -- a style guide has a significant impact on the way users perceive the site.
While the designer might develop a look and feel, and choose the colours and typography that will be used to convey a particular brand or mood, it's things like consistency, correctness, and the flow of content that make a publication not only easier to read, but also support the overall design objectives.
Content styles can have a strong influence on the:
- presentation a brand
- creation of a persona for the publication or publisher
- appeal that the publication has to a particular user audience
Compare, for example, the content layout of British tabloid The Mirror [1] with the more conservative US broadsheet The New York Times [2]. Obviously these two publications appeal to vastly different audiences, and present considerably different brands.
To take this once step further, compare the print front page of The Mirror [3] with the print front page of The New York Times [4]. These images encapsulate the branding and positioning of each paper offline -- and as we can see, each brand persona is conclusively reflected in their respective online presences. Obviously style guides have a huge role to play in communicating the branding across all formats in which these publications are presented.
It Helps Portray a Professional Approach
The uniform, regular presentation of information can have a considerable impact on your audience's perception of your professionalism. Think of this in design terms -- if you found a company Website on which no two pages used the same colours, layout, typeface, or navigation, you'd probably be more than a little dubious about the professionalism, stability, and capabilities of that company.
You'd probably also have a hard time using the site or comprehending the messages it provided...
It Makes Content More Usable
Regularity in the presentation of information also makes that information more easily used -- scanned, read, and comprehended.
For instance, at SitePoint, we use a four-tiered heading system:
Subheadings Look Like This
Section Headings Look Like This
Sub-section Headings Look Like This
And If we Need a Fourth-Level Heading, it Looks Like This
When users read the information on the site, these standards signal to them the type of information that appears after the heading.
If they see a section heading, they know that the information which follows forms part of the whole that's contained under the last subheading they read. It's not a separate idea of equal weight to that last subheading; it's part of that subheading's message.
So the use of standard formatting also avoids making the user think about what's going on -- they, too, can focus on the message rather than thinking "Man, why do they keep spelling 'Website' all these different ways? Can't they just choose one and stick with it?"
It's Transferable
The best thing about a style guide (which we gleaned when we compared the print and online versions of the two papers) is that it's transferable across all your publications. So the style guide's effect (and your hard work) is multiplied by the number of communications formats to which you apply it:
- Websites
- Newsletters
- Brochures
- Letterhead and business cards
- Advertisements
- Flyers
Don't think of your style guide's impact as being restricted to your Website -- if you develop it carefully, its effects can, and should apply to any communications you produce.
Who Needs A Style Guide?
The purposes outlined here probably give you a good idea of who needs a style guide -- anyone who prepares and publishes content.
If you produce Websites, newsletters or ezines of any kind, a style guide could really make your job -- and that of anyone who works with you -- a lot easier. Even if you're only producing a one-off 3-page Website for a small client, a quick document explaining heading styles, link protocol and spelling conventions will make the standardization of the site in its first iteration, and the incorporation of future updates, much simpler and faster.
But it's when you solicit submissions for publication that a style guide really becomes essential. It stops would-be writers from sending you error-riddled content, articles in the wrong file format, pieces that are too short... the list goes on. Your style guide can really cut down on unnecessary work in this case.
A style guide can make the jobs of the following people significantly easier:
- the client who commissioned you to produce a site
- a designer or developer you hire to amend your site
- a freelancer or contractor you employ to develop or change the site in some way
- anyone who ever needs to update the site and/or its written content -- inside or outside your business
- staff who are new to the business, or new to making changes on the Website
What's in a Style Guide?
Ok, so you think a style guide sounds like it might come in handy. But how do you create one?
The standards you set out in your style guide will depend on the kind of content you publish, and who will use the style guide. SitePoint has two:
- one for the external audience (authors who wish to submit content for publication)
- one for the internal audience (staff members who format content for publication and manage published content)
The External StyleGuide
Here's an idea of the types of information we set out in the SitePoint StyleGuide for Authors.
"Introduction to SitePoint"
What it does: Briefly outlines the site and its objectives.
Why it's included: To orientate users by stating up-front what kind of site they're submitting to.
"What We're Looking For"
What it does: Describes the conceptual requirements we expect of submissions. For example, 'tell a story that leverages your personal and professional experience.'
Why it's included: this identifies what our site users want to read.
"Preferred Article Formats"
What it does: Explains the types of articles we prefer to publish (eg. 'Case Study').
Why it's included: this identifies clearly the outcomes we want for users who read our content, and how writers can achieve those outcomes through particular types of articles.
"General Article Specifications"
What it does: lists the requirements we have of all submissions -- where to send them, what file format to use, our policy on self-promotion, credit and compensation, etc.
Why it's included: provides clear, essential information on how to submit.
"Criteria for Assessment"
What it does: Lists the criteria we use to assess articles for publication.
Why it's included: allows authors to assess their own articles prior to submission, and gives them the chance to fine-tune their pieces to our requirements themselves.
"Content Consistency"
What it does: provides standards for spelling conventions and domain capitalisation used on the site.
Why it's included: to minimize editorial workload -- if these elements are correct when the article reaches us, the editing process will be much faster.
"Copyright Permission"
What it does: outlines the copyrights of submitting authors
Why it's included: to state up front what the rights are of authors published on our site.
So how does this differ from our own Internal StyleGuide? Let's take a look.
The Internal StyleGuide
The Internal StyleGuide contains more detailed and technical information:
Network Standards
This section contains detailed information covering every convention that's standard across the Network, including when to open links in the same browser window, and when to spawn a new window. It includes:
- Spelling and Grammatical conventions
- Punctuation conventions
- Linking Protocol
- internal
- external
Article Standards
This section explains in detail the process for publishing and managing article-related content on the Network, from accepted file types for different forms of content, and the formatting of article text, to managing author details and storing images that appear within articles. It contains details on:
- Length
- Requirements for Submissions
- Author Details requirements
- Presentation and Editing
- Copyright
- Article Consolidation
- Image Naming Protocol
- Retiring Content
Content Standards
This final section of the document gets into the nitty gritty of rules that are applied to different types of content, including such specifications as the maximum word length for an article's blurb as it appears on the Network homepage at www.sitepoint.com, and standards for how often content should be added and rotated at various locations on the Network.
- Content Specifications
- General rules for text formatting
- Home page
- Articles
- Author details
- Content Turnover
Other Elements
The number of elements that may be included in a style guide are endless. Consider:
Tone and Style
You might want to define the tone and style of the copy to be included on, for example, a corporate Website, so that anyone who is employed to produce content in future knows instantly what 'personality' the copy needs to project.
Graphical Elements
You might want to incorporate screen captures or copies of graphical elements that must be included with content (for example, company trademarks or branding).
Pro-forma Content
Imagine you're a designer creating a site for a bank. In the process of creating copy, the bank is likely to consult legal specialists to come up with the correct wording for disclaimers and similar content. These disclaimers may become standard content -- and if they do, they can be included in the style guide.
Copy such as company taglines or slogans might also become standardized, in which case their content and usage can also be prescribed in your style guide.
These are just a few ideas -- there are plenty more and the list really will vary in accordance with the requirements of each individual situation.
What Will You Need?
As we discussed before, what you include in your style guide will depend on your content, and who you've written the style guide for. The outlines above might, however, give you an idea of a few of the areas you could cover in your own style guide.
The other thing to remember when you create a style guide for your own site is that the document will grow over time. As you incorporate more content into your site, tweak the design, and develop your brand, the way you present information is likely to change. Those changes will undoubtedly necessitate alterations to your style guide. If you're serious about your content or work with a few content producers or managers, you might want to schedule a revision every three to six months to make sure the document's up to date.
Include the information that's relevant to whoever will use the style guide, remember to update it, and your style guide really will make life easier.
[1] http://www.mirror.co.uk/
[2] http://www.nytimes.com/
[3] http://www.mirror.co.uk/frontpages/
[4] http://www.nytimes.com/pages/pageone/scan/index.html