What is a content style guide?

It is a set of rules to define how the content of your website should look.

Too many times, after a site is launched by a developer and handed over to its owner (and sometimes its many contributors) the look of the website becomes untame. It becomes a world wild web. The good hard work a designer puts to make your website look professional and credible is lost.

• Your company’s identity -> lost.
• User experience -> declines.

Because of this, I am now including a content style guide with each website I build. It is simple and generic enough that it should be applied to every website.

Here are the simple guidelines to make your content sing with beauty:

• Headings
• Fonts
• Are you Cutting and Pasting from Microsoft Word?
• Lists
  • Bulleted
  • Numbered
• Tables
• Block Quotes
• Highlight Boxes
• Buttons
• Links
  • External Links

Headings (Heading 2)

Heading 1 <h1> is reserved for the Page Title, which is generated automatically when you fill in the Page Title on WordPress. Search engines expect only one <h1> per page to identify the most important heading. To avoid confusing search engines, select Heading 2 <h2> to style your first level headings.

Heading 3

Break your content with subheadings and short paragraphs. It helps Internet readers scan topics.

Heading 4

Break your content with subheadings and short paragraphs. It helps Internet readers scan topics.

Heading 5

Break your content with subheadings and short paragraphs. It helps Internet readers scan topics.

Heading 6

Break your content with subheadings and short paragraphs. It helps Internet readers scan topics.

Fonts

If you need to highlight text, use bold or italics. Refrain from using underlines.

• Conventionally, underlines are reserved for links on the Internet. A lot of websites no longer use the underline, but it is still understood to be used for links.
• Bold words or statements that are important in a paragraph.
• Italicize paragraphs that need emphasis.
• Headings and paragraph font-families have been predetermined. As long as you don’t use inline styles or copy and paste from a rich text editor, the fonts will be consistent throughout. See Are You Cutting & Pasting from Microsoft Word for more information.

Are You Cutting & Pasting from Microsoft Word?

Bad news: when you cut and paste from a Microsoft Word document, those bullets may not be coded properly, and so it won’t adopt the styles (padding) that I’ve set up. Or sometimes it adds inline styles which, again, overrides the styles applied to your website.

Good news: you can create lists using the Visual Editor with WordPress so you don’t have to code it. It’s best for you to work directly on WordPress. Alternatively, you can “Paste as Text” and then add bullets via WordPress.

Lists

Bulleted

• Item 1
• Item 2
• Item 3

Numbered

1. Item 1 – the numbered list is styled with more padding between items. This is good for instructions, etc.
2. Item 2 – the numbered list is styled with more padding between items. This is good for instructions, etc.
3. Item 3 – the numbered list is styled with more padding between items. This is good for instructions, etc.

Tables

For tables, event listings, and locations, use this table. It doesn’t need a class. You can go to the “Text” editor, the tab beside “Visual” and copy from <table> to </table> and paste in the “Text” editor of the page you are working on.

Basic table

If you need more rows, copy and paste from <tr> to </tr> and paste it after a </tr>. The “tr” means table row, and “td” means table (data) cell. More info here.

What it looks like from the Text Editor / in HTML:

<table>
<thead>
<tr>
<th colspan="2">Event Name</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top">Speaker:</td>
<td>Speakers' names</td>
</tr>
<tr>
<td valign="top" >When:</td>
<td>Thursday, 23 May 2013
5:30 PM - 9:00 PM</td>
</tr>
<tr>
<td valign="top">Where:</td>
<td>A Lovely Cafe
1234 Rainy drive, Vancouver</td>
</tr>
<tr>
<td valign="top">Details:</td>
<td>Description of event
Costs and Fees
Food &amp; Drinks</td>
</tr>
</tbody>
</table>


Block Quotes

This is a block quote:

Consistency shows professionalism and credibility.”

<blockquote>Consistency shows professionalism and credibility."</blockquote>

They’re great for testimonials, and quotes. To use this, use the icon with the double open quotes – ” in the Visual editor. Or type <blockquote>content here</blockquote> in the Text editor.

Highlight Boxes

This style class does not apply to all websites by default; I’ve added this to the stylesheet.css so that it applies across the website.

To create a box to highlight information, use the style class=”highlight” on a <div>, per below.

<div class="highlight">
Insert Content Here.
</div>

Buttons

To create a button, use the style class=”button” on an anchor tag <a>, per below.
Button Here
<a class="button" href="#">Button Here</a>

Links

A note about links. Do not link to Click Here. It is semantically not very helpful for search engines. Use something more descriptive like Go to the Google Website.

External Links

External links are references to pages that are outside your website. You want your users stay on your page when they click on an external link. When you use the Visual editor to add a link (Shortcut: Highlight a word and then type Ctrl+K or Cmd+K), check the box “Open in New Window”.

This best practice should also be applied to documents and PDFs that you upload.

That’s all for now.