Creating a web style guide: Cardinal at Work
How do you develop website content with the help of multiple content creators and ensure the results are written in a unified, consistent voice, tone and style? With a strong, in-site style guide for your editors.
Cardinal at Work: a supersite with one voice
Right now Stanford Web Services is deep in a project to consolidate University Human Resources' websites into a single-destination supersite for Stanford employees called Cardinal at Work. The site will role up over 10 websites into one and provide "a single point to access resources to support your work, grow your career and enrich your life, ultimately enhancing your overall employee experience."
The success of this project hinges on having strong, reliable, and consistent content to build a unified experience for Stanford employees. The Cardinal at Work project lead at UHR, Kate Junco put together an extensive offline style guide to help her content creators write for the site in a cohesive way.
In developing this guide, Kate had found that many communication teams at Stanford have some form of an editorial style guide that provides direction on spelling, language, grammar, and word choice for their particular school, unit, department or area. But she couldn’t find anyone that had put together a guide that addresses voice, tone, and style of writing and not particularly for the web. So, she and I have worked together to share the guide on the Stanford Web Services blog.
Migrating the style guide to the web
First, we decided to "turn it up to 11" with the guide by adding the content directly into the administrative side of her new site, making the guide more central. We also added side-by-side examples of before and after content to help people understand concepts in really concrete ways.
Online guide, big wins
That migration of the guide into the site itself allows people to see examples in context using the actual styles of the site.
It also forced us to follow our own guide, keeping content concise and well-structured. We translated the document into focused, bite-sized pages that linked to each other and other pages in the "how to" site documentation. For example, on a page about using calls to action, we can include a link to the visual style overview that outlines the different link styles, and documentation on how to implement link styles.
Let your documentation grow and change as needed
Another great aspect of an online guide is that it is centrally-located, making it easier to edit and manage revisions of than a word document or pdf would be. If you find that there's something you need to tweak or add to, it's right there in the site!
Download the guide
Our guide is behind login, since it's internal documentation, but we've copied the content out to pdf if you would like to repurpose it.
Some pages include:
- Why a style guide?
- Be friendly and conversational
- Be personal and direct
- Avoid jargon and keep language simple
- Use the active voice and action words