simple style guide chapter

Consistently Format Your Content with a Simple Style Guide

Once your content has been written, edited and compiled for entry, the next step is to think about how it appears on the page. If you’ve been wondering how to make a web page look better, consistently format your text, photos and other design elements with a simple style guide.

How to Create a Simple Style Guide

Many organizations have basic style guidelines for their brand that outline specific fonts, colors and logo usage among other things. Your website style should be closely aligned, but there are some additional elements, like guidelines for photos and text styling, that you’ll want to create rules around so that your pages all have a similar look and feel.

As you enter content, make notes about your formatting choices and refer to them as you build out each page. This will make it easy to notice and track discrepancies across the site and remind you of how you handled formatting similar content.

What to track in your website style guide:

  1. Proper use of headers (H2, H3, H4 and never H1, which is often the page title)
  2. Styling of bulleted or numbered lists
  3. Use of colored, bold and italic text as well as capitalization
  4. Standard photo sizes for different locations
  5. Notes on photo selection and editing
  6. Formatting captions, citations or credits
  7. Use of icons and repeating graphics
  8. Use of borders and horizontal rules
  9. Use and placement of buttons as links and calls-to-action
  10. Linking best practices, including carets and new windows

 

FREE WORKSHEET: Keeping Track of Your Website Style

Formatting a web page isn’t rocket science, but it does require that you pay attention to details. Use this worksheet to keep notes about your style choices as you enter content. Refer back to it for each page to make sure your visitors have a consistent and frustration-free experience.

  • This field is for validation purposes and should be left unchanged.

 


This page is Chapter 6 in our Beginner’s Guide to Nonprofit Website Content.