Establish Style Guide

Wouldn’t it be great to have one place you could refer to regarding all the design and content decisions you make for your blog? Well, that’s where a style guide comes in.

Both print and web designers have long used style guides. A company might have an editorial style guide that lays out their content’s voice and tone. They might also have a branding style guide or brand book that provides detailed information about their brand’s core message along with branding do’s and don’ts. I once saw a large company’s guide that was nearly 100 pages long!

As a blogger, you don’t have to go that crazy. You can combine everything into a simple style guide for your blog. This chapter explores why you should create a style guide and what to potentially include in yours. I also show you how easy it is to create a simple style guide. Finally, I walk you through special considerations for blogs with multiple contributors.

Exploring the Benefits of a Style Guide

You might think that spending time on creating a style guide seems like a complicated process that only bigger blogs need. Or that such a guide just adds to your to-do list. The truth is any blogger can benefit from a style guide — and it’s really easy to create one.

As your blog grows, you’ll find yourself looking for ways to be more productive. Having a style guide saves you time so you aren’t pouring through your blog or your design files trying to remember what exact shade of blue you use in your header or whether you capitalize a certain word. You can peek at your style guide for the answer — and then quickly get to work.

If you build your guide bit by bit as you work through your blog design, you’ll hardly feel like you did any extra work at all. I’m not kidding!

Building a foundation of reference material

As you start redesigning your blog — or even build a design from scratch — you make decisions that guide how you want your blog to look and your content formatted. However, as time goes on, you might find you don’t remember to always use the guides you created in the first place.

Luckily, you don’t have to remember everything because (wait for it) a style guide remembers for you. By building a style guide as a foundation, you have just one file to reference versus searching for something in a design file, your blog, or somewhere else altogether.

Plus, if you decide to extend your blog’s design into other places — say, custom graphics for your Facebook page or for a business card — you’ll pat yourself on the back for having all your blog’s styles in one place.

Your style guide is an excellent resource if you ever collaborate with someone on a project for your blog. For example, if you work with a designer to help you create a custom Twitter background, you can share your style guide with the designer, so he or she knows exactly what colors your blog design uses. If anyone writes a guest post for your blog, you can share a modified version of your guide (or paste it into an e-mail) to outline how you capitalize your post titles, what size the post images should be, and other post guidelines.

Create consistency throughout your blog

As I mention in previous post "Core Design Principles", consistency is one of the core design principles of good design and branding. Consistency gives your blog a polished, professional look.

Blog readers often subconsciously notice inconsistencies in blog design and content, such as the difference in two shades of blue or the fact that you wrote USA and U.S.A. in the same blog post. 

Although these inconsistencies most likely won’t deter a reader from returning to your blog, the inconsistencies do add up and take their toll in the following ways:

• From a writing perspective, inconsistencies within blog posts are like little speed bumps, slowing down your reader and hindering concentration. 
• From a blog design perspective, inconsistencies can give your blog a sloppy feel, even if your reader can’t quite place exactly why ?
• Good marketing and public relations representatives you may want to partner with do notice consistency. Your blog writing and design are, in a way, your personal brand. If you pay attention to the details in your blog, you have a better chance of attracting partners who value a similar attention to detail and standards for quality.

A style guide gives you an easy way to maintain consistency because your design and content decisions all live in one document. When you have a guide to reference, you make it easier on yourself (and others) to keep your blog brand strong.

Identifying Elements to Include

Because you probably don’t have a marketing team, design team, PR team, and other sorts of teams at your disposal (well, I don’t anyway), you can build your style guide to combine many sorts of things into one guide. The ideas I give you in this section include not only design-related pieces, but also things to include for content, linking, and post length.

This is your style guide, not mine or anyone else’s. You can decide exactly what you find worth including and how much detail you want to provide. If you don’t think you’ll reference something, don’t include it. This section merely seeks to give you lots of ideas.

Define your blog’s purpose, voice, and tone

Your blog’s purpose provides the backbone for your blog design. Your blog’s voice and tone bring that purpose to life.

You may know your blog’s purpose by heart and be comfortable with your own voice and tone, but writing all this down serves as a gentle reminder of what you typically expect your blog to be. When you’re deciding on blog changes or opportunities, referencing your blog’s overall purpose, voice, and tone can bring clarity to making decisions that truly fit your blog.

If you end up creating personas, as I recommend in Know your Blog , you could include a short version of them in your style guide as well to remind you of the audiences you’re trying to attract.

Format blog post titles

Your blog post titles not only need to grab attention due to their content, but they should also be consistent from post to post. Multiple blog post titles are often seen together on one page, such as when you have short teasers on your home page that lead to full posts. Plus, you have new readers who are soaking up post after post and regular readers who surely read every one of your posts. So, if there’s one place to apply consistency, consider blog post titles one of the most important.

Here are a few things you may want to include in your style guide regarding post titles:

• Capitalization: Do you write your post titles in title case, sentence case, lowercase, or uppercase (see image)? If you use Title Case, typical style does not capitalize articles (such as a, an, and the) or prepositions (like on, from, or by). You could keep a list in your style guide to remind you which words you don’t capitalize.
• Word or character count: Do you want to stick to a certain number of words or characters so that your titles look uniform or so they take up only a certain number of lines?
• Labels to special posts: When you have a guest blogger, do a product review, or run a weekly series, do you include a specific label in the title?
  Here’s an example: starting every review with Review:.
• Special formatting: Do you want to apply any other styles to your blog post titles? If you write a lot of news-related blog posts, perhaps you adapt that more journalistic style. For example, journalistic writing often eliminates articles in the beginning headlines (a, an and the) and uses a comma in place of and. As another example, maybe you want all blog post titles to end in punctuation like a period, question, or exclamation point.

Knowing how to structure a blog post

Applying certain guidelines to how you structure a blog post can help readers feel more comfortable with your writing and even reinforce your blog voice. When it comes to laying out your blog posts, here are some things to consider:

• Post length: You may want your posts to stick to a certain length either because of how your posts look visually or because you’ve determined that your readers prefer a shorter (or longer) post.
• Paragraph length: Long paragraphs hinder readability. You may limit paragraphs to a certain number of lines. Or you may style your posts so that each paragraph is just a few words or a short sentence.
• Image placement: If you wrap text around your images, your style guide can specify that and whether the image floats to the left or right side of the text. Or your style guide might specify that images are centered in the column above or below the text in a blog post. You can also clarify whether image placement changes depending on the type of post you write.
• Headings: Headings visually guide readers through your blog posts. HTML gives you up to six levels, with 1 being the most important heading. Within HTML, tags written as <h1>, <h2>, and so on indicate a heading’s level. Blog post titles are <h1> headings; then, within your blog posts, you can use any level heading.
  For your headings, you might choose to make them all one font, or maybe switch to another font when you get down to a certain level, like the image do. Also, you may choose to write your blog post titles in Title Case but other headings lowercase.
  
  If a certain heading size looks too small, stick with certain levels for your blog posts — and denote that in your style guide.

Remember your color palette

Because colors are one of your blog’s most stand-out assets, you want to keep the shades you selected consistent. You’ll find a reference of your blog’s color palette to be an especially handy tool, and your style guide is the perfect place for this color reference.

When listing your colors in your style guide, I suggest you show the colors and list the technical specifications for each color you use.

• Showing the colors: Most word processors enable you to add a square shape and fill it with color. To get the exact colors, look for a Custom Colors option or something similar among the formatting options for a shape. I used the Colors dialog box in Microsoft Word to add the color squares you see in the image.
• Listing the technical specs: Web, colors are specified using RGB values or hexadecimal codes. Include both the RGB and the hexadecimal value for each color.  

Ensuring correct usage of fonts

Like colors, the fonts you use on your blog can make your blog design more memorable. You probably use more than one font on your blog, so for this part of your guide, display the fonts that you use for specific areas of your site.

Here are some places within your blog design where you might want to list what font or fonts you use and possibly their size:

• Blog header (blog name and tagline)
• Main blog post content
• Sidebar or footer content
• Special blog buttons

If you’ve played around with your fonts and know at what font size

they look too gigantic, you may want to also note that in your guide. The same goes for the minimum size to

use before your font becomes hard to read.

Applying consistent imagery

Images on your blog are very important. Some things

you might want to include in this section of your style guide are:

• Recommended width of images for your blog post: I like to include widths for both horizontal and vertical images.
• Sizes for design files: In addition to images for your blog posts, you may end up creating designs for
  • Your blog’s Facebook page
  • Your Twitter profile
  • Your Google Plus page
  • An e-mail newsletter
  • Your sidebar
  • Social media icons for your blog
  Because you probably aren’t updating most of these design files frequently, you save time by not having to search through old files for the right size. If you use a design program like Photoshop that saves a file that you can edit again, then you might not need to list file sizes. However, if you use a program like PicMonkey, then listing file sizes in your style guide comes in handy because you can’t edit a file again once you leave the application.
• Pinterest-friendly image formatting:
  
   As Pinterest (a social media site for bookmarking and sharing links via images) increases in popularity, many bloggers are creating images with text to grab someone’s attention on Pinterest. For my Pinterest images, I often like to extend beyond my blog’s colors and fonts and use colors or fonts that complement my branding. Write down things like the following:
  • Colors
  • Fonts
  • Branding (Do you use your logo? URL? Watermark?)
  Keeping within some parameters will keep you from spending too much time re-inventing the wheel every time you want to create a new Pinterest graphic. (Trust me — been there, done that.)
• Images not to use: Are there certain styles of images you don’t want to use? For example, when using stock photography with models, you might decide that candid shots work better than models who are posed.
• Preferred image sources: If you find yourself using stock images or illustrations over and over from certain artists, include a list of favorite artists and links to their profiles on the places where you source their images.

List frequently used words

Every blogger has words or phrases that they use often, but perhaps you don’t use them often enough to remember exactly how you write them. 

You want to use words and phrases consistently from blog post to blog post. Although you might be tempted to not worry about how you’ve written that word in the past (or even in the same blog post), consistency makes your blog more professional — and, depending on the word, eliminates any potential confusion.

Of course, you don’t need to worry about words that don’t have potential for confusion, such as the town you live in. Include only those words that can be written numerous ways or that you have a hard time remembering how to write. Words with accents, hyphens, or specific capitalization are often
words that you need help remembering.

You might wonder how most people determine how to write a specific word. You can often find the answer by doing a search for the word plus the phrase AP Style or Chicago Manual of Style. These are two style books used by most publishers — and in some cases, the answer will be different between the two sources. For many words, there’s no right or wrong way. Just pick a way and then stick with it.

Attribution of photos or quotes

When you use free photos within your blog post, the photographer often requires that you give him or her credit for the photo. To do so, you need to attribute that photo within the photo caption. To stay consistent, decide how you want to format the attribution and then add it to your style guide.

This also applies to attributing quotes on your blog. You can show how you attribute a quote or photo to someone, like this:

                                                    –Name (website name, if applicable)

Depending on the photo you’re using, you may need to attribute a photo in a certain way. (For example, some photographers want you to use a copyright symbol; others request the wording Courtesy of . . . A free photo service may want you to include the service name as well as the photographer’s name.) Be sure to check the licensing agreement.

Keep handy your latest biography

If you’re like me, you’ve probably been asked to provide someone with an author biography, and you go sifting through previous guest posts or old e-mails trying to find a bio you used at some point in the past. I quickly realized that wasn’t too productive (no, really!) and decided to add my bios to my style sheet as well. True, a bio isn’t really design related, but maintaining consistency is never a bad thing.

So, in your style sheet, you can keep your main bio, a shortened version, and a first-person version. You can also include word counts for each version because you might be asked to provide only a 100-word or 50-word biography.

Creating Your Style Guide

After you gather what goes into your style guide, now it’s time to put your guide together. You could create something fancy, but I recommend building your style guide in a word processing document — like Microsoft Word — or within Google Docs. (And with Google Docs, you can access your style guide

from anywhere with an Internet connection.)

Start your guide with your blog name and the date you last updated the guide. From there, include your blog’s voice and tone. After those core items, my best piece of advice is this: Keep your most referenced material at the top. You don’t want to dig for the styles you continually need to reference. For me, that’s my color breakdowns and frequently used words.

Just like your blog design, you want your style guide to have visual components to it. That way, you can easily scan your guide for the information you’re looking for.

Here are a few ways to visually break up your style guide for easy scanning:

• Headings for each section
• Screenshots for certain parts of your blog to illustrate a style in action
• Color key of colors used in your blog
• Font names you use shown in the actual fonts
• Simple tables

Finally, build this document as you make decisions regarding your blog design instead of doing it all at once. If there are aspects of your current design that you plan to keep, put those in the document now.

You don’t have to make your style guide overly complex. Even simply listing your color breakdowns or writing down the fonts you use works. The key is that you can reference the information easily when you need it.

Developing Guidelines for Blogs with Multiple Contributors

If you have more than one regular contributor on your blog, having a style guide becomes infinitely more important. You want your content to matchyour blog design, but keeping that consistency becomes harder when you’renot the only person writing. When you have a style guide to share as a startingpoint for guest bloggers, you can bring new contributors up to speed faster.

In addition to the things I mention earlier in the chapter, here are some extra guidelines to consider including for a blog with multiple writers: Some of these guidelines might not relate directly to blog design, navigation, or formatting, but they all contribute to consistency — and, in some cases, the reputation of your blog’s brand.

• Title guidelines: Outline the length of a blog post title or any special ways that contributors should write them. You may even provide suggestions and examples for writing a strong blog post title.
• Limits to linking back to the contributor’s own blog: Guest bloggers benefit from writing as a contributor partly because they can add links to their own blogs within their guest posts. So that your contributors don’t get carried away, though, you may want to impose limits to how many times in a blog post they can link back to their own blog (or at least mention to use good judgment).
• Writing rules: These rules aren’t for you — you don’t need to be reminded — but they are for your guest bloggers because not everyone writes the same way. When working with multiple contributors, your styles should be mentioned so no one has to spend time editing all blog posts to be the same. For example, people who learned to type on a typewriter will often use two spaces after a period instead of one, so you might need to remind writers to use only one space. Or, you might mention whether to use a comma after “and” in a serial list (“red, white, and blue” versus “red, white and blue”).
• Formatting tips for author bios: If your contributors need to stick to a certain word count for layout purposes, remind them to include links to some of their social media platforms and any other tips you want to provide on how to structure their author bios.
• Original content rules: Tell your contributors whether you allow them to republish content already published on another blog or website.
• Caution words: Outline certain words or phrases that you don’t want to be used on your blog. For example, you may not want bloggers to use profanity, or there may be expressions (or even entire topics) you don’t  want used on your blog.
• Do Not Mentions: Do Not Mentions are links that you don’t want contributors to include in their blog posts. You may not want them to reference a business that you don’t trust or a website that sells a product you wouldn’t recommend.
• Recommended Resources: On the flipside of the Do Not Mentions, you can list trusted resources to link to or places to gather research. Having these resources handy might also encourage contributors to link to these sites.