This is a quick guide for website editors to help them know which format to use for what. The main aim is to write for the site in a way that works with the design, making it easy for people and web machines to understand what is going on quickly and effectively.

The three key points are:

1. Writing style: keep it short and to the point, and use headings and lists effectively – readers will not spend long on your pages and will appreciate well edited text. If in doubt, edit your copy to 50% of the original.
2. Text styling: keep it simple and basic – the website design will do the rest for you. Do not make the text different colours or sizes. Use bold sparingly – as I did to draw attention to these two key points. If you are pasting text into the website from a word processing package like Microsoft Word make sure that you add it using the ‘paste as plain text’ option – and then add styling in the website system.
3. Images: keep them cheerful and bright and not too big!

Writing style

Be nice to your readers by writing well for the web. Please. There is so much advice on this topic, it’s best you read one of these great and quick guides:

• Usability Gov
• BBC guide
• Univ Sheffield

Text styling

Add text to the site without any formatting

Always use the ‘Paste as Plain Text’ option when copying text into the site. You will find this in the editing toolbar – It is the clipboard icon on the lower row of options.

This is very important to keep the site clean visually and behind-the-scenes.

Lists

Use the list options in the editor to make your points clearly and quickly.

• Bulleted list
• Bulleted list
• Bulleted list

1. Numbered list
2. Numbered list
3. Numbered list

Headings

Please don’t make text bold and big for section headings. It is inconsistent and confuses readers and the machines that run the web. Please use the headings options in the editor to make section headings – they are consistent, work with the website design, and help the web machines know how the page is structured.

This is Heading 1

For page titles only – these will be automatically added by WordPress. You won’t need to use them.

This is Heading 2

For in page sections – like chapters.

This is Heading 3

For in chapter sections.

Fonts

The website theme can use any font from the google font collection.

The body text is set (June 2017) to use ‘Open Sans‘, an alternative to Arial or Helvetica. Alternatives in the google font collection that stay near Arial or Helvetica include:

• Source Sans Pro
• PT Sans
• Droid Sans
• Lato (the standard for the Panoramic theme we are using in June 2017)

The headings are set to use ‘Signika‘.

These fonts are also used in the share offer documents.

Images

Pictures are a great way to liven up pages and we use them in the website banner.

Banner images

• Size: 1500 x 445 pixels
• Work as featured images on blog posts with ‘slider’ selected in the category

Page images

• Choose cheerful bright pictures of people in front of solar arrays if possible.
• Image File Size: try to keep image file sizes to a minimum. Camera photos are regularly 2 or 3MB – this is huge and will take time to download, frustrating your readers. You can re-size and optimise pictures to make them smaller. Contact the site administrator if this is a problem – they will help out.
• Image Visual Size: use the ‘medium’ setting in the image editing options

Design guidelines

• The theme designers provide useful documentation on their site – well worth a read

Primary colour

• Green: #50B949
• Used for the navigation strip and footer

Secondary colour

• Blue: #2362AD
• Used for the text headings

Link color

• Green #118356