Styleguide FOR mind.org.uk

Crafting the content

This guidance is for content producers. It's designed to help make all our web content as good as it can be.

Carefully crafted website content is a crucial part of the service we offer. Good web content is not made up of one long piece of text, but is broken up into different sections under subheadings with images, videos, related content and/or calls to action.

The content template will largely take care of the layout and prioritisation of content on the page. To create effective, engaging content, you need to choose good words, select appropriate images and collect relevant internal and external links and signposts to include.

Headings

Breaking down content into sections with descriptive subheadings gives the reader an at-a-glance view of what's on the page. It helps them find what they're looking for quickly, rather than having to wade through long chunks of body text.

Nesting headings

When adding subheadings, it's important to choose the right format. In Umbraco, there are six heading formats you can use. At the top of the hierarchy is heading 1 (h1), then heading 2 (h2) and so on, down to heading 6 (h6).

There is only one h1 on each of our pages – the page title. All other headings on the page are h2 or smaller.

Headings should be correctly nested, like Russian dolls. If you want to add a subsection to a page, you should use the next heading down from its parent section. For example, an h3 is used for a subsection of an h2 section.

When you start a new section or subsection, go back up to the heading format of the other sections at that level.

Copy

Content is more than words. That said, words are a vitally important part of our digital communications toolbox. Before you start writing the words for the page or pages, make sure you're familiar with our guidelines on language and writing.

All the words on our website must follow house style. If you're not sure what our editorial style or convention is for a particular word or phrase, check the grammar and style section of the style guide. If it's not covered in the style guide, follow Guardian style.

Images

Choosing images for the web is part art, part science. The best images work in harmony with the words, to reinforce the message and bring the content to life for the user. These are the things you need to think about.

Composition

The most effective web images have a single focal point and don't have too much going on. An image of a crowd at a fundraising event can work well in certain contexts, but remember that some people will be viewing images on small screens. Make sure that people's heads aren't cut out of images – if they are, it may be better to crop people out completely.

Aspect ratio

When choosing an image, make sure that the aspect ratio (height relative to width) of your image is not at odds with its intended content type. For example, if you're choosing an image for a banner, a portrait image is unlikely to be suitable, because you won't be able to get all the most important parts of the image into the crop.

Quality

Pay attention to the size of your image, making sure it's not low quality and isn't too small. Make sure that images don't look pixelated on the page (this is especially important for banner images). Extremely high resolution images aren't ideal either, as they can take a long time to load.

Quantity

Avoid adding too many images to your page. If someone is using a screen reader that's picking up the alt text (text that describes the image if it doesn't display) from an image after every paragraph, they'll have a frustrating experience. Lots of images can also make the page slow to load, especially for people without a great internet connection.

Relevancy

Some schools of thought say that you should only use images that are directly relevant to your content and that provide additional meaning or information. They argue that images used purely for aesthetic or decorative purposes are unnecessary. This is mainly for the sake of people using screen readers for whom unnecessary breaks in the copy can be disruptive.

We aim for a balance between providing a smooth experience for as many people as possible, while providing attractive, engaging and informative content.

Links

Internal and external links are an important tool for signposting users to related content and adding additional context and depth.

Be generous with links, but don't use so many that it stops your content from flowing. If you have a lot of contextual links that relate to your content as a whole, it may be appropriate to add a list of relevant links under a "see also" heading at the bottom of the page.

Embedded links

Don't spell out URLs. And never use "click here". Instead, embed links in the natural flow of the content. If the links were taken out, the content should still make sense.

Add links to a few descriptive and specific words that give the user some information about where they'll go if they click on the link. For example:

Meaningful link text is more search engine friendly. It also helps people who are using screen readers navigate the page and understand the content.

Call-to-action and button links

When adding call-to-action links and using links on buttons, it's equally important to be specific, so that people know what to expect.

And it's even more important to keep call-to-action and button links short.

Starting your call-to-action link with a verb is a good idea, because it makes it clear what people are being asked to do.

The Readability Guidelines have further guidance on how to use links effectively, and lots of – you guessed it – links to supporting evidence.

Sign-off

Getting new content checked and approved by the right people helps us make sure any risks are mitigated and that the content hits just the right notes.

Depending on the substance of your content, this might include getting input or feedback from senior colleagues, the information support team and/or subject matter experts.