I recently attended a course which discussed the best way to write for the web. We were given examples of real websites that quite clearly lacked these techniques – and the difference in readability was quite evident.
So I present to you; a few tips for writing for the web! (Broken into the 5 sections the course reviewed)
- Users don’t spend much time reading or exploring.
- Gaze is usually on the left side of the screen, top and start of dot points. They skim read and scan.
- The first 10-20 seconds on the site has the greatest probability of users leaving – they evaluate very quickly.
- Use analytics data – what’s working or not?
- Be clear, direct and concise. Design content to suit user behaviour.
- External (search engines, social media etc) and internal (navigation, menus, index etc) find-ability should be considered.
- Keywords – think about user’s language, not specialist language. Include these keywords in the title, main heading and file name (page URL) to help Search Engine Optimisation (SEO). Use keywords in links (i.e DO NOT use ‘click here’ as a link, use for example ‘apply now’ or keyword of what link is)
- Titles – these are not visible on actual page, usually the label in the top tab of browser. Usually enter under text of ‘page name’ or ‘short page name’ field. Some web publishing systems may automate the title. Make sure titles are clear as to what the page is about.
- Meta descriptions – summary of what’s on the page (not visible). Usually located in html code on ‘meta data’ screen. Shows up in Google search or on social media under page title/image thumbnail. Keep short (less than 155 characters), include keywords (should be unique for each page or Google ignores due to duplication).
- File/folder names – part of the URL. Use dashes not underscores. Use lower case. Shows hierarchy of site e.g. domainname/folder/file.com
- Lists – use similar style (eg start each item with a verb) but avoid repetition, use headings. Only list what’s important, avoid pages of lists (clearly I haven’t followed this advice for this post! haha).
- Structure – main message, action, detail, extra detail. Make meaningful chunks. Think about what target audience wants to know and do.
- Headings – use to guide the reader and break up info, use different levels, and avoid all caps. Main topic in the main heading, then don’t repeat this in any sub-headings.
- Paragraphs – one idea per paragraph, allow for scanning – use topic sentences. Keep to 2 or 3 sentences.
- Tables – give tables a main heading, and then headings within the rows of the table. Good for comparisons, stick to only 3 columns wide.
- Links – list links don’t clutter them throughout text, don’t repeat links, and use meaningful labels.
- Top loading is important for all (i.e. most important info at top left/start)!
- Keep everything short and concise!
- Consider – register (formal vs informal – aim for the middle), words (familiar, concrete and short, avoid abbreviations and jargon), sentences (short but varied length), verbs (see below), personal pronouns (you, we, our etc), concise writing
- Verbs – passive voice and nominalisations: find verb first (doing word) and see if it’s passive or a noun, if so maybe change it. Passive voice is ok if the agent is not important.
- Hemingway editor and writers diet programs/sites can be helpful to evaluate writing, whether it is hard to read/over using passive voice etc (could be useful tools for students writing too!)
- Headings: use actual ‘heading’ style (don’t just bold regular text) so screen readers can scan these. Same for in tables – have header row/column.
- Make sure you’re using appropriate alternative text
- If image is complicated – need full text (long) alternative on same or separate page (e.g. for a graph or chart)
- Short alt text just for simple images
- Can leave alt text blank for decorative images
- Don’t repeat caption of images as alt text
- Consider use of colour conveying meaning – not acceptable (print in B/w to see if it makes sense without the colour)
- Use real text, not images of text! (screen readers will not get the text just a graphic and alt text)
- AUSLAN – has different grammar and syntax to English, English is a second language if born deaf and involves cognitive effort to read i.e. they do not use ‘the’ or ‘is’…
- Low vision is different to blindness – they don’t use screen readers but magnification software – be wary of low contrast coloured text
And there you have it – a full day workshop compressed for you. I hope its given you a few things to think about when you next write something online! I think I’ve broken quite a few of these rules 😛