Writing content for responsive design

Write in plain English

Research suggests it's much harder to understand complex content on a small screen. If you're not already writing in plain English, it's time to start.

Plain English is a clear, direct and concise style that is well structured. The goal is to write so your reader only needs to read the text once to understand and be able to act on it.

Some people think plain English is 'dumbing down'. While it does recommend using short, everyday words, you can sometimes use longer, more technical terms. For instance, you could use 'hypertension' when writing for health professionals. But you'd use 'high blood pressure' for everyone else. Always choose words your audience understands.

Plain English is more than simple words

Plain English isn't just about word choice. It includes:

• short sentences
• active voice, saving the passive for when you need it
• verbs, not nominalisations
• simple present tense, if possible
• personal pronouns ('you', 'we')
• concise writing.

You should also:

• structure content to meet your users' needs
• keep paragraphs and sections short
• label sections with useful headings
• avoid using more than 2-3 levels of subheadings
• simplify complex content using lists or tables.

Pay close attention to design

Writing for responsive design means being more careful about content design. Responsive designs have 'break points' at various screen widths. These determine when content is repositioned, resized or restyled.

Check your content on a mobile phone to see how it works in an environment with the most constraints. Pay attention to sidebars repositioning, images resizing, and the length of headings and paragraphs.

You'll find your content works better if you:

• Bring important information to the top—of pages, page sections and paragraphs. The smaller the screen, the longer the page, section or paragraph. So you must make key information more visible.
• Limit paragraphs to 50-60 words. Long paragraphs can fill a whole screen on a mobile phone.
• Don't embed more than one link in a paragraph. Text looks cluttered otherwise. And it can be hard to tap the right link if there are two or more close together.
• Use a heading roughly every 2-4 paragraphs. Scrolling while skim-reading is common, and it can be easy to miss something if it's not labelled.
• Avoid tables. Use lists unless your table has only 2-3 columns and minimal text. Where you must use a table, write concisely. If you use a lot of tables, talk to your web developer about designing responsive tables.
• Avoid floated images. In portrait orientation, lines might end up being 2-3 words long as text flows around an image.
• Take care using images with embedded text. The text might be hard to read when resized for a small screen.

Publish web pages, not documents

On mobile phones, documents often display a full page at a time. Even single-column content can force readers to pinch and zoom to make the text size readable. Multi-column layouts are a nightmare.

Data limits are another reason to ditch documents. Don't force people to download a whole document when all they need is a page or two.

Documents also present accessibility problems—even when they're tagged PDFs. While they can work well on desktops, mobile technology lags behind. The Australian Government says "make sure the PDF content is available in another format such as HTML".

References and further reading

• Responsive web design and user experience
• Mobile content is twice as difficult
• Plain language checklist
• Accessibility and inclusivity (GOV.AU Content Guide)