Writing for the web

[Tips on writing for the web - taken from a range of different websites, links below]

Main tips: Good online content is easy to read and understand.

It uses:

• short sentences
• sub-headed sections
• simple vocabulary

This helps people find what they need quickly and absorb it effortlessly.

Using plain language allows users to find what they need, understand what they have found, and then use it to meet their needs. It should also be actionable, findable, and shareable

Know your audience

• Your writing will be most effective if you understand who you’re writing for. Many do not have English (or French) as their first language.
• Plain language: Research shows that higher literacy people prefer plain English because it allows them to understand the information as quickly as possible.
• Technical terms: Where you need to use technical terms, you can. They’re not jargon. You just need to explain what they mean the first time you use them.

Brevity: Use short words instead of long words

When you use a longer word (8 or 9 letters), users are more likely to skip shorter words (3, 4 or 5 letters) that follow it. So if you use longer, more complicated words, readers will skip more. Keep it simple. (and sentences). This is why we tell people to write on GOV.UK for a 9 year old reading age. By using common words we can help all users understand sentences of around 25 words.

Instead, users only read about 20 to 28% of a web page. Where users just want to complete their task as quickly as possible, they skim even more out of impatience. put the most important information first. So we talk a lot about ‘front-loading’ sub-headings, titles and bullet points.

Footnotes and legal language

Do not use footnotes on documents. They’re designed for reference in print, not web pages. Always consider the user need first. If the information in the footnotes is important, include it in the body text. If it’s not, leave it out. Use links.

Headings

Make your titles clear and descriptive. Your title should be 65 characters or less (including spaces).

Copy

Do not repeat the summary in the first paragraph.

1. Use the ‘inverted pyramid’ approach with the most important information at the top tapering down to lesser detail.
2. Break up text with descriptive subheadings. The text should still make sense with the subheadings removed.
3. Paragraphs should have no more than 5 sentences each.
4. Includes keywords to boost natural search rankings.

Use short sentences and paragraphs

The ideal standard is no more than 20 words per sentence, five sentences per paragraph. Use dashes instead of semi-colons or, better yet, break the sentence into two. It is ok to start a sentence with “and,” “but,” or “or” if it makes things clear and brief.

Use bullets and numbered lists

Don’t limit yourself to using this for long lists—one sentence and two bullets is easier to read than three sentences.

• Use images, diagrams, or multimedia to visually represent ideas in the content. Videos and images should reinforce the text on your page.
• Use white space.  Using white space allows you to reduce noise by visually separate information.

To keep content understandable, concise and relevant, it should be:

• specific
• informative
• clear and concise
• brisk but not terse
• incisive (friendliness can lead to a lack of precision and unnecessary words) – but remain human (not a faceless machine)
• serious but not pompous
• emotionless – adjectives can be subjective and make the text sound more emotive and like spin

Capital letters are reputed to be 13 to 18% harder for users to read. So we try to avoid them. Block capitals indicate shouting in common online usage. We are government. We should not be shouting.

Tone

Information that comes from USAGov has a friendly and inviting tone, and conveys authority and trust. We're building a relationship with the people we serve as their official and authoritative source of government information.

On our websites, we avoid using slang, incomplete sentences, irony, or idioms to “be cool” or sound “modern.”

Numbers

• See page 16 of the OCHA Editorial Style Guide
• Write it as 7.5 million. A lot of European colleagues tend to use the comma, e.g. 7,5 million. But UN style is to always use the “.”
• But always use the comma for the thousands. So in the sit rep below, the “168,674” is fine.
• http://dd.dgacm.org/editorialmanual/ed-guidelines/style/numbers-dates-time.htm#Punc

Sources on writing for the web

• https://www.gov.uk/guidance/content-design/writing-for-gov-uk
• https://www.usability.gov/how-to-and-tools/methods/writing-for-the-web.html
• https://www.usa.gov/style-guide/writing-for-web
• https://plainlanguage.gov/resources/checklists/web-checklist/

Spelling and punctuation

Spelling and punctuation should follow the OCHA Style Guide. [Link]

To help ensure OCHA spelling, you may want to change your browser’s default spell-check to UK English. This should prevent the spell-checker flagging certain words as incorrect, even when they have been spelled in line with the OCHA Style Guide (e.g., neighbour, centre, travelling, programme, etc.).

Images

Providing alternative text (alt text) and captions for images:

• Alt text is a description of the image contents intended as a replacement for seeing the graphic.
• Alt text exposes the subjective contents of the image to non-sighted visitors, SEO bots, and other services.
• When you upload images to Contentful, the Title field should be used for alt text, and Description for image captions.
• Title field
  • In order to use the correct mindset, imagine you are speaking to a person over the phone and describing what you see.
  • Never include the words “picture of”, “image of”, etc.
  • If the graphic contains a very prominent title or statement, reproduce the words instead of providing a general description.
  • For maps, describe the map’s main purpose.
  • Examples:
    • ✅People queuing for food rations
    • ✅A group of children awaiting immunisations
    • ✅Map of internally displaced persons along the southern border
    • ⛔️Image of people queuing for food rations - (do not include "image of")
• Description field
  • Image credit should ALWAYS go in Description. Feel free to add an extended caption in addition to image credit.
• If you have SitReps in multiple languages, upload the same image multiple times and enter the Title/Description in each desired language.

Designing or Preparing images for use in Digital Situation Reports

The Digital Situation Reports website will take high-quality imagery that you upload and automatically format it for various devices or network connections. Follow these guidelines to ensure the media will display well on mobile devices, laptop or desktop computers, and downloads such as PDFs or social-media downloads.

• Upload the highest-quality graphics at the highest resolution available.
  • Minimum dimensions: 400x400
  • Maximum dimensions: 3600x2700
  • Any image within those bounds is a valid shape.
  • Contentful enforces a 20MB upload limit. Feel free to upload graphics as large as the limit.
• Whenever possible, avoid applying any margin whatsoever to an uploaded image. If a border is desired to demarcate the image, ensure that it is on the physical edge of the image. Images using margins and a built-in border will render in a fashion that appears to be a mistake when the Digital Situation Report is viewed online. Here is an example: