Content Style Guide

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. On the homepage it’s the logo in the top corner, on every other page in the site it’s 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.

If changing permalinks after a post has been published, remember to create a redirection under settings/redirection or the post can go to a 404 page.

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: https://moz.com/learn/seo/url

Best practice is to have all links open within the same window (including any links going offsite). This is so that all users still have access to the back button (esp visitors using tabbing instead of a mouse). If you do choose to make a link open in a new window make sure you add rel=”noopener” or rel=”noreferrer” to your target=”_blank” in the HTML code. More info about cross-origin destination anchors.

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=”cta-button”.  See image below.

This is a regular link

This is a button

Testimonials

Highlight the text you’d like to be a testimonial and select the ” button in the visual editor. This works the same in all visual editors throughout the site, including the “testimonial” block within the Flexible Page Elements

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).

All Caps

Never write anything in all capital letters. One style uses all caps but it’s rendering the letters in that style, they are not actually capitals. All caps don’t work well with screenreaders which sometimes read them as acronyms or as emphasized text (shouting) so please avoid them for accessibility.

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.

If you need to use a different kind of ordered list beyond numbers, some extra html code must be added to the text editor screen. Please follow the instructions here: https://rogerwilliamsmedia.com/styling-ordered-lists-with-letters-in-wordpress/

Footnotes

Footnotes are via the free plugin “Easy Footnotes“. To add a footnote, use this code:

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.

You can check if extra styles have been imported by toggling the text editor and looking for any code wrapping around your text (there shouldn’t be unless there are links or images)

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 called Perfect Images + Retina that automatically serves up the image the device will load (regular or retina sized).

Image sizes are listed in the documentation.
You can upload one image and WordPress will automatically resize it to all the image sizes listed, however, it will chose 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 150kb. 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.
• Use periods to end sentences in the alt text field, this will help screen readers read it better.
• 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).

Attachment Display Settings

• Here you can choose alignment (Left, Centre, Right, None)
• Link to: if you’d like the image to open into a picture window select “media file”
• Size: small, medium, large will be available