This is why you should create a style guide for your client’s WordPress website

This is why you should create a style guide for your client’s WordPress website

Let me ask you a question.

What do you give to your customer when you finish their brand new WordPress site? The login information, sure, email accounts data, maybe a document with some instructions, a ‘thank you’ note and the last invoice.

That’s it? Nothing more?

Don’t you give a site style guide? Why not?

Sorry, I asked permission to one question and, by now, I got you 5.

I came from the media world. The ‘traditional’ one. You know, newspapers, broadcast radio station, and TV. You know what they all have? (sorry, another question)

A style guide.

 

What is a style guide

Let’s see what it is, according to Wikipedia, a style guide:

“Is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization, or field. (…) A style guide establishes and enforces style to improve communication. To do that, it ensures consistency within a document and across multiple documents and enforces best practice in usage and in language composition, visual composition, orthography, and typography”.

Now let’s see what BBC Music says about its style guide:

“This style guide describes the elements and usage of the BBC Music brand and details the way in which it should be used both on-air and off-air. This guide should be adhered to so that there is a consistent brand appearance across all elements and platforms. Materials should not be misused or greatly altered, as doing so devalues the brand.”

The New York Times (NYT) has a style guide with more than 350 pages. They even sell it.

I worked for local radio stations and newspaper (printed on paper, like the old days). They got one of those. I even helped write a new one.

Did you notice that some words used in the style guide definition are the same developers and designers use to counter some ‘strange’ requests from customers?

“Consistency enforces best practice in visual composition, orthography, and typography”

or

“consistent brand appearance across all elements and platforms”.

Sound familiar?

If ‘yes,’ Congratulations, you’ve found the yellow brick road to build your system to make a style guide.

Site CSS code

You’re already creating a style guide in each project

In every WordPress project you made, you’re creating a style guide. You’ve done perfect space for:

  • page headlines
  • page body
  • spacing
  • line and paragraph breaks
  • capitalization
  • block quotes
  • excerpts
  • images
  • links
  • social sharing

The boxes you choose. The colors. The usage of company’s logo.

Your idea is to make a website clean and easy to read. All your choices are made according to the site goal, if you are a great developer or designer.

What is the website for:

  • Inform?
  • Entertain?
  • Educate?
  • Promote?
  • Institucional?

Each of these carries a shift in tone, writing and design style. And you started to nail it in the first briefing with the client. Even before you sent your proposal, that may or may not included support and maintenance clause.

In fact, you’re creating a style guide while you made the website. You’re establishing rules to make it shine.

So why not get them together in a document and hand over to the client?

It’s a matter of training.

You only have to gather round all the information and jot it on a document (it doesn’t have to be fancy) and make a pdf file.

In some cases, you might create a password protected web version. It will make the update process easier. More on that soon.

Why should you do it?

Because you want the best for your project and the best for your clients. You show that you care about them.

Turning this into something natural will raise your brand identity. In doing that, you’re helping your client’s increasing theirs. Remember that this is a way to fill one of the customers’ needs. You’re just anticipating an answer to a question. Otherwise, it is likely that you will be contacted to respond to some issues related to the site soon.

Make a website style guide easy to read
How to create a great style guide for your client’s site

Make it like the site: clean and easy to read. Do it comprehensive, yet usable.
Forget the NYT 350 plus pages book.

  • Brand it with the client’s logo and information (it’s their site, not yours);
  • Make between 20 and 50 pages long;
  • Insert a summary;
  • Use a table of contents right at the beginning;
  • Choose a format that allows people to print or read it on a computer ou phone;
  • In the computer ou phone, make it searchable;
  • Use examples;
  • Don’t use technical jargon;
  • Show the colors and their hex codes;
  • Identify the fonts and tell their size;
  • Say how to use the images (left, center, right) and size dimensions;
  • Demonstrate how the site will print numbered and bulleted lists;
  • Be clear about the text link color;
  • Explain why the contact form has that number of fields;

In the end, share your contacts and what people should do if find any inconsistency.

Keep updating

A style guide is a living document. Just like a website.
Don’t forget to update:

  • If you forget something;
  • If someone has a question that’s not answered in the guide and should be;
  • If you change a font ou a color;
  • If you change anything.

Do you need inspiration?

We get it. You don’t know how to start and need some help. The best you can do is follow some of the best practices of industry leaders. Use the Bootstrap documentation for example. Not to copy but to see how they did it.

The Atlassian Design is another source of inspiration. Almost as much as the Google Material Design website.

 

It’s your’s client style guide. Be personal

It’s important to incorporate the personality of the customer, be it a person or a company. Don’t make a “one style fits all” for the style guide. Make it as much personal as it can be.

Sure, use the same framework, and some other elements from one guide to another. Don’t start from zero each and every case. But build it with some personality.

A lawyers website will be very different from a music band website. The style guide must follow the changes. In the design, colors, and language.

Now build your style guide framework. Have fun.