Content Style Guide & Best Practices

Best Practices

Visually Separate Text

It’s much easier for viewers to read text that is visually separated into chunks. Do this by creating hierarchies within the content and making subheads for each section.

Subheadings are great for a number of reasons:

  1. Allows visitors to quickly scan the page for what they are looking for
  2. Allows assistive technologies and users who navigate with the keyboard to jump to the content they want easier
  3. Better for Search Engines: words within a heading are deemed more important than words in paragraphs so if you consistently use headings with words that people are searching for, you’ll show up higher in search engine results.
  4. They bring elements of the design onto the page

Headers

Always uses Headers in descending/nested order. H1, H2, H3, H4, H5, H6.

There should only ever be one H1 on a page: the page title.

When creating content use headers starting with H2 and moving down. This can be selected in the Visual Editor using the dropdown on top left (that shows “Paragraph”).

Page Titles

The best title length is less than 60 characters, around 40 seems to work best. When creating new pages, posts or resources, double-check the permalink that is automatically created when you save the page. If it’s very long or unwieldy, change it by clicking “edit” beside the permalink.

Links

Always describe where the link is going, don’t use terms like “click here” as they aren’t accessible nor good for SEO.

Further reading on links.

Buttons

If you want to make a link look like a button: add the link as usual, using the visual editor; switch the tab to the text editor. Find the link and within the <a> add class=”button”. See image below:

This is a regular link

This is a button link

Bold / Italics

Try to avoid using bold or italics within the text. Bold can be used for emphasis, but shouldn’t be used to establish hierarchy nor should it be used on links. Links are already styled from the theme.

Often you can use a header instead of bold and testimonial instead of italics. This keeps the text hierarchy intact and makes it easier for text readers and keyboard shortcuts. It’s also best practice for SEO (Search Engine Optimization).

Bulleted Lists

Always select bulleted lists / numbered lists instead of importing lists from Word or manually putting in dashes. This again keeps the accessibility of the page intact.

Importing Styles from Word / Websites

When manually cutting and pasting text, make sure to strip out any styles from other text editors or websites. You can do this by either pasting directly into the text field (instead of the visual text editor) or by selecting paste as text from the top.

Images

Different areas of the website require different sizes of images. For all images, please upload twice the actual size of the image, this is to accommodate retina screens that show double the amount of pixels. There is a plugin Retina 2x that automatically serves up the image the device will load (regular or retina sized).

Image sizes will be listed in the documentation that comes with the website launching to the staging server.

You can upload one image and WordPress will automatically resize it to all the image sizes listed, however, it will choose the crop, which might not be where the eye would like it to be. It’s best to resize images and upload the correct size for optimal design.

Image Best Practices

When uploading images, there are a number of factors that are important for speed, accessibility and SEO (search engine optimization).

Size of image in KB

  • Always try to keep this around 100kb. Never upload images that are in the mb, that’s much too big and impacts the speed of your site
  • The plugin Hummingbird will automatically resize images as they are uploaded, but it can only do so much. Better to export for web using your image software (Photoshop, GIMP) or use an online image compressor.

Alt Text

  • Always fill out the Alt Text for every image! Best practice is to describe what is in the image for anyone who can’t see it.
  • People who can’t see it include: users with visual impairments and search engines. Screen readers will read the alt text and search engines will use the alt text to list your images on the image searches
  • You can also use titles that are descriptive and help list you for search engines
  • Fill out captions to give photographers’ credit or further explain what’s in the image (again great for SEO)
  • Here’s a great guide to writing alt text