Style guide

This guide should be used by designers to ensure consistency when building content for Richmond.gov.uk.

For formatting guidance please refer to page components.

Please let the Digital Content Manager know if you have any queries about styling or formatting.

Plain English

This is the most important section in this guide.

No new piece of content should be published on the website in the same way it was received from the service.

Plain English should always be used. Remember that some of our customers do not speak English as a first language, or may have a learning disability.

  • Target reading age - 11 years old
  • Target sentence length - 12 words or fewer

Use the Fleisch-Kincaid tool to check the readibility of your sentences (how to check MS Word).

Examples

Useful things to remember:

  • Keep it simple!
  • Aim to ensure your content can be understood by a 9 year old
  • Use short sentences (if you have long sentence, split it into two short sentences)
  • Minimise punctuation (rather than don't use do not)
  • Use active sentences (the subject performs the action)
  • Choose a simpler word
  • Remove unneccessary or confusing information
  • Avoid jargon

When creating or editing content use other industry leading websites as your barometer. Would that sentence be acceptable on GOV.UK? Would that presentation be acceptable on apple.com?

Reference

GOV.UK share many useful tips on writing for the web.

Time

Times should always be displayed:

  • Using the 12 hour clock
  • Without hyphens (instead use the word ‘to’)

The ‘am’ and ‘pm’ suffixes should be used as explained in the examples below.

Examples

If a time spans across the morning only, ‘am’ should only be used once:

  • Correct - 9 to 11am
  • Incorrect - 9pm to 11pm

If a time spans across the afternoon/evening only, ‘pm’ should only be used once:

  • Correct - 9 to 11pm
  • Incorrect - 9pm to 11pm 

If a time spans across both morning and afternoon/evening, 'am' and ‘pm’ should be used:

  • Correct - 9am to 11pm
  • Correct - 9pm to 11am 

If a time refers to 12 o' clock, only the following should be used:

  • Correct - 12 noon
  • Correct - 12 midnight

Date

Dates should always be displayed:

  • In the written format and not numerical
  • Without ordinal suffix (for example 13th)
  • When referencing any date-specific event

Examples

The order should be set out as shown in the example below and not include an ordinal suffix:

  • Correct - Monday 3 March 2015
  • Incorrect - Monday March 13 2015
  • Incorrect - Monday 13th March 2015

The date can also be written in abbreviated form on pages which display current news content (for example homepage and news centre) as shown below:

  • Correct - 3 March
  • Incorrect - 3rd March
  • Incorrect - March 3

Prices

Where applicable, you should use the heading 'Price' (not 'cost' or any other wording).

Prices should always be displayed:

  • in the numerical and not written format.

Example

When displaying whole pounds, the decimal point should not be used:

  • Correct - £8
  • Incorrect - £8.00

When displaying a value in pence, the decimal point should not be used:

  • Correct - 80p
  • Incorrect - 0.80p

When displaying a value in pounds and pence, only the pound sign should be used:

  • Correct - £8.25
  • Incorrect - £8.25p

Contact details

Contact details should always be displayed:

  • Where a content gap exists and it would be reasonable to expect a user to have a further query
  • On location pages
  • On event pages

Top level landing pages should include a link to a separate contact page, where applicable. Child pages in these sections should not list in-page contact details, but instead provide a link to its sibling contact page.

Where applicable, you should use the heading 'Contact' (not 'contact us', 'more' or any other wording).

Examples

When introducing contact details in a sentence as part of an instruction, you should use one of the following:

  • Correct - You can contact us by telephone on 020 8891 1411.
  • Correct - You can contact us by email at test@test.gov.uk, or by telephone on 020 8891 1411.

The same structure can be applied to variances of this sentence, as shown in the example below:

  • Correct - If you do not receive this email, or have any problems with verification, contact us by email at test@test.gov.uk.

When introducing contact details in a list the order should be set out as shown in the example below:

Correct

Email: test@test.gov.uk
Telephone: 020 8891 1411

When listing contact details do not use:

  • Bullet points
  • Line breaks
  • Fax numbers

If listing multiple telephone numbers you should include the whole number as shown below:

  • Correct - Telephone: 020 8831 6096 or 020 8831 6094
  • Incorrect - Telephone: 020 8831 6096 or 6094

Headings

Headings should always be displayed:

  • In the correct order (H1>H2>H3)
  • To separate blocks of text
  • To give further context to information

Headings should not:

  • Use bold text
  • Be written as a question
  • Change voice within a page (for example from 1st to 2nd person perspective)
  • Directly precede a bullet list (see lists)

H1s should generally be the same as the page title. No two pages should have the same H1.

You should aim to use consistent headings across multiple pages within a topic.

However this list is not exhaustive and bespoke headings can be used.

  • About *insert service name here*
  • Who can get support
  • What is available
  • What we can do
  • How it works
  • What happens next
  • Price
  • Contact
  • More (should only be used when no alternative can be found)
  • Before you start
  • What you will need

Lists

Lists should always be displayed:

  • As an alternative to long, comma-separated sentences
  • With correct style (class="lb-list-block-2")
  • With a capital letter to begin each bullet
  • With no full stop at the end (other punctuation such as commas can be used)

Examples

When using a list, it should always be introduced by a relevant sentence and full colon. Lists should not come directly after a heading.

Lists can be used so that each bullet point follows on from the introductory sentence to complete a new sentence. Sentence lists of this types should be set out as shown in the example below:

Correct

To get care and support you must be:

  • Aged 18 or over
  • Living within the Borough
  • In need of support due to a sensory impairment, physical or learning disability, frailty or illness

Incorrect

To get care and support you must be:

  • aged 18 or over.
  • living within the Borough.
  • in need of support due to a sensory impairment, physical or learning disability, frailty or illness.

If a sentence list is not appropriate, regular lists (or numbered lists) can also be used. Regular lists should be set out as shown in the example below:

Correct

There are many activities available at the Centre:

  • Choir
  • Chair exercise
  • Gardening

Punctuation should be avoided if using a regular or numbered list.

Link text

Link text should always be displayed when:

  • Linking to another relevant page
  • Linking to a document
  • When referencing an external organisation (if they have website)

When creating link text you should never include the word 'here' (for example 'you can find information about Council Tax here')

Examples

When linking to an internal page, you should aim to include the link text in the sentence, as shown in the example below:

  • Correct - You may be able to park legally using a parking permit or by paying for your parking session.

Where this is not possible you can create a new sentence which refers to the task:

or refers to the page:

An entire sentence should not be used as the link text. This should be set out as shown in the example below:

  • Correct - Visit Complaints for more about our corporate complaints procedure.

When linking to a document the link text should match the title of the document as shown in the example below.

When linking to an application form the link text should be set out as shown in the example below:

  • Incorrect - You will need to download and complete our Resident Parking Permit application form.

If we own the content include the word 'our' rather than 'the' (for example 'Download our Guide to Council Tax and Business Rates (pdf, 253 KB)')

Abbreviations

Abbreviations can be displayed when:

  • A long term or phrase is repeated several times on a page; or
  • A term or phrase is most commonly recognised in its abbreviated form.

Examples

When an abbreviation is used, the term or phrase should be displayed in full form when it is first referenced on the page, with the abbreviated form displayed in brackets. This can also be in the Heading 1. Any subsequent references can then be displayed in the abbreviated form.

  • Correct - Make an informal challenge against a Penalty Charge Notice (PCN). You can informally challenge a PCN at any time within the first 28 days.
  • Incorrect - Make an informal challenge against a PCN. You can informally challenge a PCN at any time within the first 28 days.
  • Incorrect - Make an informal challenge against a Penalty Charge Notice. You can informally challenge a PCN at any time within the first 28 days.

These terms which are most commonly recognised in their abbreviated form can be used:

  • FAQs -for frequently asked questions*
  • cm -  for centimetre (s)
  • m - for metre (s)
  • km - for kilometre (s)
  • g - for gram (s)
  • kg - for kilogram (s)
  • £ - for pound (s)
  • p - for pence
  • mph - for miles per hour

These terms should not be abbreviated:

  • Don't - instead use 'do not'
  • Can't - instead use 'cannot'
  • Shouldn't - instead use 'should not'
  • Wouldn't - instead use 'would not'
  • Cllr - 'Councillor' should be used when first referenced on the page
  • Days of the week - 'Monday' rather than 'Mon'
  • Months of the year - 'January' rather than 'Jan'
  • E.g. - 'for example' rather than 'e.g.'
  • Etc. - 'etc' (et cetera) should be avoided and replaced with a detailed explanation
  • Approx - the full word 'approximately' should be used.

Documents

PDF should be used as the default file type (exceptions may occur).

You should aim for a file size of under 2mb. Adobe Acrobat has a built in 'Reduce file size' tool, you can also manually optimize for web ('save as').

If a document cannot be reduced to under 2mb we may have to host it on www2, rather than in Umbraco. If you are unsure speak to the Digital Content Manager.

Images

Images can be displayed to:

  • Promote an event or campaign
  • Illustrate a news story
  • Display a logo
  • Directly support the written content on the page

Images should not include:

  • Text
  • A white background

Examples

Images should be displayed at the following dimensions and set to the right:

  • News Centre - 660 x 400 pixels (must include a top and bottom gradient)
  • Homepage - 720 x 516 pixels @ 71.7% scale ratio (must include a top and bottom gradient)
  • Landing page background - 1924 x 613 (approximately)

Images on regular pages should be displayed at the following dimensions:

  • Logo - 250 x 178 pixels *ideal* (width should be no greater than 250 pixels)
  • Small - 200 x 143 pixels *ideal* (width should be no greater than 200 pixels)
  • Large - 400 x 286 pixels *ideal* (width should be no greater than 400 pixels)

Remember

  • You should use .jpg for photos and .png for graphics
  • Save your image for web (use preset jpeg high or png 8 - if a graphic uses a colour gradient you can save as jpeg high)
  • All images should be 72 dpi
  • When displaying logos in the jumbotron, white backgrounds should not be used. Instead you should set the image background to match the jumbotron (#f9f9f9
  • Landscape should be used - if portrait is required the equivalent ratios as above should be used

Community News

All News Centre stories should be checked by a designer before they are published.

Each article should contain:

  • No more than 50-60 words
  • Deep links to other content if required (do not simply link to a website's homepage)

It is acceptable to include more than 50-60 words if the article does not include a link (for example a roadworks update).

Remember

We only display the 'Leader' for each story. This is not the full story, instead a summary, which should be used to capture attention.

The reader can click through to find out additional details, if they are interested.

More

Forward slash (/)

Should be avoided and replaced with 'or' or simply select one term to include. When this is not possible (for example on registration services forms), this should be set out as shown in the example below:

  • Correct - marriage/civil partnership
  • Incorrect - marriage / civil partnership

Up to About this website