Structuring your content

Most people who use the Buckinghamshire Council website will begin from a search engine like Google. Use the same vocabulary as your users so they can find your content, beginning from the title of the page. If people cannot understand the title, they will not know the page is for them.

Make sure the title is unique, as duplicate titles can confuse users. Be specific, so users can easily see if they’ve found what they’re looking for.

Titles should be 65 characters or less, including spaces. This is because:

• Google cuts off titles that are longer
• 65 characters and longer titles are harder to understand

Your title should be easy to understand whatever context it appears in, whether by itself, in search results or in a navigation menu alongside other titles. For example, “Regulations” does not say much, but “Regulations for environmental waste” does.

The title should be user-focused, clear and descriptive. You can find out what users call things by using search tools to look up keywords. What you call things may not be what your users call things.

Use the active verb (for example, ‘submit’) if you use the page to do the thing. For example, you can pay a library fine online, so the title of the page is "Pay a library fine".

Use the present participle (for example, ‘submitting’) if the page tells you how to do the thing, but you do it somewhere else. For example, you have to visit a library to use a library computer, so the title of the page is "Using library computers and wifi".

Use headings and sub-headings to break up your content and give it structure.

Users with impaired vision often use a screen reader, which reads out web pages. Some screen readers navigate web pages using headings. Writing effective headings can make it easier for users of screen readers to find their way through your content and get the information they need.

Make sure your headings use words relevant to what the user is trying to do and make them active where possible.

In headings, do not use:

• questions (questions are not front-loaded and take longer to scan)
• technical terms, unless you’ve already explained them
• ‘introduction’ as your first section - users just want the most important information

Bullet points allow you to break up content and make text easier to read.

On the Buckinghamshire Council site, our style is for each bullet point to complete a sentence and finish the lead-in line. This is why bullet points should begin with a lower case letter. For example:

You can use bullet points to:

• make text easier to read
• break up content

Bullet points should not be used to present a list of individual points. But sometimes it is necessary to add a short phrase to clarify whether all or some of the bullet points apply. For example:

You can only register a pension scheme that is (one of the following):

When using bullet points on our website, do not:

• use more than one sentence per bullet point - use commas or dashes to expand on an item
• put ‘or’ or ‘and’ after the bullets
• make the whole bullet a link if it’s a long phrase
• put a semicolon at the end of a bullet
• include a full stop after the last bullet point

The number and type of examples in a list may lead the user to believe the list is exhaustive. This can be dealt with by:

• checking if there are other conditions (or if the list is actually complete)
• listing the conditions which apply to the most users and removing the rest
• considering broader terms in the list which capture more scenarios (and could make the list exhaustive)
• linking to specialist content to cover the remaining conditions

Tables are a way of displaying associated information in a way that is easy for users to compare and scan.

Only use tables as a way of presenting data. Do not use tables as a way of formatting text. Most screen readers used by visually impaired people struggle to read tables, which makes the information difficult to understand.

If you want to differentiate a particular part of your text or break up content on the page, you should:

• insert line breaks to make shorter paragraphs
• add headers to create sections
• use the highlight option, which draws a grey box around important text

When using a table, remember that a user should not need any specialist knowledge of how to interpret it in order to understand it.

Do not try to communicate all of the data you have, only what the user needs to know. Tables should be straightforward and uncluttered. If your table is complicated, present the information in a different way.

Only use images if there’s a real user need.

Before deciding to use an image, you should think carefully about what you are trying to communicate and how best to do it.

You should avoid images if:

• they contain text (write it in the body of the page instead)
• you can convey the information in a clear and succinct way with text
• they are for decoration only
• they are of a brand or logo

The primary aim should always be for our users to find the information they need as quickly and easily as possible, and the use of unnecessary images may make this harder for them.

Do not use images from Google which will usually be copyrighted.

Ensure you have the correct permission or licence to use images you find anywhere online.

The use of stock images will usually require a licence fee and companies may send a notice of copyright infringement if they find you're using their images without consent.

You can get royalty-free images from websites like Unsplash and Pexels.

If you feel your document contains too much text, a better idea would be to consider whether you can make the text more concise, for example:

• breaking it into shorter paragraphs or sections
• incorporating other visual elements like bullet points or headings

If you do add an image, make sure you add alt-text so that it's accessible for users with visual impairments.

Standard images should be 660x412 pixels.

Our homepage features a banner used to promote upcoming events or initiatives. The component has a background image and a box with a title, text and a link.

The automatic image cropping that occurs on the promo box varies depending on the length of the text used for the:

• title
• summary
• hyperlink

We recommend using an image size 1024x360 pixels for use with content length up to:

• title, 36 characters (which is usually 2 lines)
• summary, 115 characters (which is usually 4 lines)
• hyperlink, 56 characters (which is usually 2 lines)

If using different lengths of content, the cropping may cut off different parts of the image.

We can't use images which contain text because it is not accessible, although logos can be used.

The image will be mostly obscured on mobile devices which is the most common device visitors use.

You should use a diagram or map if you need show something that's harder to explain with text. For example:

• when showing structural changes (on a road or river)
• helping users to find a location

You should only use images or diagrams if they:

• provide context for the information
• help users understand information in a different way

If you decide to use an image or diagram, you need to keep it simple. They need to be clear and easy to understand.

You should:

• follow normal reading direction - users want to read from left to right
• avoid overlapping connector lines
• use simple shapes - and as few different types as possible
• make the starting point for process and flow charts clear

Standard images should be 660x412.

If you do use images, diagrams or maps they need to be accessible so that everyone can use them.

You should follow our guidance on Creating accessible webpages and documents.