Develop a Style Guide for Your Site

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 with the more conservative US broadsheet The New York Times. 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 with the print front page of The New York Times. 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
  • Email
  • 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:

  1. one for the external audience (authors who wish to submit content for publication)
  2. 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.

Replay

Category: other Time: 2002-06-08 Views: 2
Tags:

Related post

  • Create a Style Guide for Your Brand 2013-07-31

    Even the smallest, simplest web presence needs consistency. Consistency of design, sure. But also of language. Consistency is reassuring. It shows control and care. And in an unpredictable place like the Wild Wild Web, it can be even more valuable th

  • Where can I find style guides for web apps online? 2011-12-06

    I am developing a style guide for a web application. I would like to find some good example style guides online to refer to. I am not having much luck with Google. What are some good resources to help get me started? --------------Solutions----------

  • Is there a JavaFX "Style Guide" for applications? 2015-04-06

    I was hoping to find a style guide, for JavaFX applications. Something like you can find for: Android iOS Microsoft and even Motif Does such a thing exist? --------------Solutions------------- This guide may be what you are looking for although it is

  • Harness the Power of CVS for Your Site 2002-07-31

    Now Where did I Put that File? In your travels on the Internet, you may have come across the acronym CVS, which is used with a kind of fanaticism by software developers who work on Open Source projects. If you've been too shy to ask, CVS stands for C

  • Where can I find style guide for metro UI for web applications? 2011-05-18

    I am interested in the Metro UI that microsoft has used for windows phone 7 for web. I see that their site microsoft.com has been done with metro UI recently. I am looking for a style guide and resources that I can use to build a web app based on the

  • Connection is based on `array`,is this a design style guide for design a relay server? 2016-01-29

    In connection/arrayconnection.js, It seems all the function is tend to work with array. For example: offsetToCursor is the only way to generate Cursor. Does this mean its a design pattern i must follow, or imply that i should generate Cursor by mysel

  • Create Free Customized Maps For Your Sites With Polymaps 2010-08-26

    Polymaps is a free service offering web designers and developers a JavaScript library for making dynamic, interactive maps in web browsers. Polymaps can be used in conjunction with cartography from Bing, OpenStreetMap, CloudMade and more. The site wa

  • Deploying styles only for root site collection or for each site collection 2012-08-19

    I know how to deploy the masterpages and styles like css, javascripts, images etc, my question is rather what is the best practice? As I deploy the all the requisites on a site collection in the style libraries etc by the site collection scoped featu

  • how to implement a style guide for a team of 2-4 2013-06-08

    I am reading Lean UX right now, and there is an idea inside I have never read before. It is about style guide. I would like to implement that but with as small a foot print as possible for the beginning. I am a software developer. I usually work with

  • Style guide for C++ 2014-01-06

    Right now I am using Google C++ Style Guide in my C++ code and I was pretty happy with it. Recently I was told that this guide is very bad: it is used internally by Google (I knew that), is outdated, and promotes some very bad practices. So I want to

  • How to best format your HTML to help Google display your websites navigation with the search result for your site in Google Search? 2010-07-09

    My website used to have sitelinks and now it doesn't. It's very possible that it's due to changing the website to a sidebar design instead of having an "interstitial" type landing page which limited the number of choices, but I'm not sure. Here

  • How to determine if Google's Crawl Rate for your site is eating up too much Bandwidth? 2012-05-08

    I was reading about changing Google's crawl rate and how there is a balance in which if the crawl rate is too fast, it will slow your site down; but if the crawl rate is too slow, then page descriptions in search results might not get updated fast en

  • How do you add a Opera thumbnail for your site? 2012-05-12

    I noticed that in the "Speed Dial" feature of Opera, some sites will display their logo as preview image, while other sites just a screenshot of how the site looks when you add it to speed dial. I don't know for sure but I think Chrome has the s

  • How to setup ssl (https) for your site on Ubuntu Linux--Two way SSL 2014-08-14

    I have a website, the main requirement is to make that website secure by using https When the client access from a different machine it has to work only if the certificate had uploaded in the browser settings. If not it should deny the access to that

  • Automatic style guide for LaTeX? 2016-01-19

    Is there some kind of automatic test to check for best practice according to some sort of style guide in LaTeX, or will there be any in near future? For python we have pep8, pyflakes, pyflint, and whatnot, which helps a great deal. I know there are a

  • What Is the Best Ad Server for Your Site? 2014-06-25

    A growing number of publishers are turning to ad servers to display and manage advertisements on their websites. There are many reasons for this, but one major advantage ad servers provide is simplicity. With an ad server in place, a publisher can sw

  • How do you setup a Test View for your site in Universal Analytics? 2014-07-14

    Someone on the Google Analytics Academy Community suggested that I setup a "Test View" for my site. Where is that in Universal Analytics? --------------Solutions------------- What are you trying to achieve? I don't think there is a feature with

  • Using an EV SSL certificate for your site with non-EV SSL content 2014-08-14

    If I purchase an EV SSL certificate for a site that is using static content from a non-EV SSL site does that effect the EV SSL certificate presentation on the main www site? For example: www.example.com (uses an EV SSL certificate) static.example.com

  • Five Tips For Designing Eye-catching Tables For Your Site 2010-06-09

    Tables are our friends. They allow us to show large amounts of information in a small space, but when designing tables for print or the web there are a number of guidelines you should keep in mind. The main aim when creating a table of data is to mak

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 1.951 (s). 13 q(s)