I have been putting together a document for work that provides some basic advice for people who work with content management systems. It covers things like accessibility and writing for the web.
Introduction
Although content management systems enable anybody to publish content to the web, they do not guarantee the quality of what is published. Many content managed websites are hard to use, inaccessible and poorly structured not because of any failure in the design or technology but simply because the quality of content is poor.
This document aims to introduce the reader to good practice for generating web content. In particular it focuses on advice about writing for the web and ensuring that what is produced is accessible to the widest audience possible.
Writing for the web
Writing great web content is a particular skill. Although it shares some characteristics with writing for other medium, there are many unique elements too.
Two traits make writing for the web, particularly challenging. Firstly is the perception that most people have that computers are being cold and impersonal. Many see technology as the enemy and so a good copywriter has to work hard to ensure their copy has a friendly and approachable tone.
Second is the fact that users rarely read pages in their entirety, but rather scan read. The emphasis is on looking for the next link that will take them one step closer to their goal.
Below we investigate these two challenges in more depth and suggest some possible solutions.
Writing style
Well-written copy should be both engaging and accessible. In other words it should overcome people’s inherent suspicion of technology and ensure that, as wide an audience as possible understand what is written.
Engaging with the user
Computers are immensely unfriendly. This is mainly due to their total inability to interpret or communicate the more subtle forms of human communication such as body language and tone of voice.
The result is that most people find interacting with a computer a cold and frustrating experience. However, there are techniques you can use to avoid the problem. These include:
Using a personal tone
By ensuring that your copy is friendly, informal and approachable, you help to counteract the inherent lack of personality associated with computers and the web. Even on a relatively formal site add more informality than you normally would in order to offset the users default perception.
Writing how you speak
If you are experienced in writing more formal offline documentation, writing in a more informal manner can be difficult. Although there is no one catchall solution to this, writing as you speak will certainly aid comprehension and generate a more informal feel.
Avoid being patronizing
The danger of writing in a more informal tone is that you overcompensate and your writing style becomes ‘chummy’ and patronizing. The writing as you speak rule comes in useful here. Picture your audience and ask yourself whether you would speak to them like that in a face-to-face meeting.
Making your copy clear
The W3C accessibility guidelines clearly state:
Use the clearest and simplest language appropriate for a site’s content.
In other words ensure that your reader can understand what you have written.
Many people make huge assumptions about what their audience understands and careful consideration needs to be put into this subject. Particular assumptions are made in regards to:
Jargon
A common pitfall is the use of abbreviations and acronyms within web copy. The assumption is that your target audience will already be aware of the jargon used. However, this is an entirely false assumption.
You cannot always assume that your audience will be aware of every acronym around. For example there are so many acronyms within web design that it would be impossible for one individual to know them all.
Secondly, the reader maybe relative new to your target audience and so still learning much of the ‘lingo’.
When writing copy ensure that whenever possible jargon is avoided and where that is not possible that it is accompanied by an explanation. We discuss acronyms and abbreviations further in the accessibility section.
Reading level
There are reasons why tabloid newspapers like the Sun sell so well. One of those reasons is because they require such a low reading level. As many as 40% of the population have a low literacy level and yet little consideration is given to their accessibility needs.
Even when writing for a well-educated audience you cannot make assumptions about their reading level. Many people suffer from attention deficit disorder, dyslexia or other conditions that could affect their ability to process what you have written.
Below is some advice on how you might go about improving comprehension of your copy:
- Simplify punctuation – People suffering from a low literacy levels struggle with long sentences that include a lot of complex punctuation. Keep your sentences short and your punctuation simple.
- Be consistent – There is often a desire when writing copy to vary your language to prevent a document appearing repetitive. Although this has its place it does make copy harder to comprehend. Where possible, use terms in a consistent manner across the whole site.
- Use numbers not words – By simply referring to 1223 instead of ‘one thousand two hundred and twenty three’ you increase comprehension dramatically as well as shorten sentences and aid scanability.
- Specify clear actions – If you wish a user to complete an action (for example to click on a button) clearly specify this. Do not assume the user will instinctively understand what is required of them.
- Use imagery – The saying ‘an image speaks a thousand words’ is very true for low literacy users. If an image will help to convey the meaning of a page be sure to use it to support existing copy.
Although the techniques above are of particular benefit to low literacy users, they do actually offer benefits to all users. Ease to comprehend copy aids the speed at which information can be digested and helps users scan copy as we are going to look at next.
Making web pages easy to scan
It can be a depressing realization that users will probably not read your carefully crafted text. However, the sooner you accept this reality the sooner you can start to adapt copy to aid users in their hunt for information.
There are a number of techniques that can be used to help a user quickly scan through a page and identify the information they require:
Front loading
Front loading applies in two different contexts. Firstly, front-load the page by including a summary of the entire page right at the beginning of the document. This helps the user ascertain quickly whether the page is relevant to them or not. Secondly, front-load each individual paragraph so that the main point is first. Ideally a paragraph should only make a single point (see 2.2.2) but if it is longer then the user can get the gist by reading the first sentence.
Keep it short
Usability expert, Steve Krug recommends in his book “Don’t Make Me Think!: A Common Sense Approach to Web Usability” that a copywriter should take his copy, edit it down to half its original length and then half it again. This sounds like an impossible task but it is often easier than it appears. By removing repetition, marketing speak, and ‘happy talk’ (content with no real substance like ‘welcome to this site’) you will quickly find your content substantially reduced.
Keep paragraphs short
As well as keeping the page as a whole sort, you should ensure individual paragraphs are short too. Each paragraph should make a single point as this aids both user scanning and comprehension.
Keep sentences short
At a micro level you should also endeavor to keep each individual sentence as short as possible. Again this aids scanability and comprehension but also helps to remove any unnecessary ‘waffle’.
Break your copy up
As well as breaking up copy into short sentences and paragraphs you can also aid scanability by using other techniques as well. Look at each paragraph and ask yourself the following:
- Can I associate a heading or sub heading with this block of text?
- Could this paragraph be reduced to an easy to scan bullet point list?
- Is there a key message in this paragraph that users need to instantly see?
If the answer to the last question is yes, then you might wish to use a breakout box (also known as a pull out). This is a technique originally introduced in magazines to ‘hook the user’. They would take a key line from an article and highlight it in someway (usually in a separate box) to draw the reader into reading the rest of the article. The same technique can be used on a web page to draw a users attention to a key point that they maybe searching for.
Many good content management systems (including Headscape’s own CMS) provide this functionality.
Accessibility
We have already touched on the importance of accessibility when talking about writing clear copy, however accessibility extends beyond simply the copy you write.
As a content management system user, you are required to go beyond just writing the copy. You are also required to enter the copy into the system so that it can be displayed on the site. This requires you to ‘markup’ your copy correctly.
The importance of markup
So what exactly is markup? Markup is the method by which you tell the browser what the content you are entering is, so that the browser knows how to display it to the user. This markup is usually written as HTML.
So, if for example you want to tell the browser that something is a heading you would mark it up like this:
<h1>This is a heading</h1>
or a paragraph would be marked up like this:
<p>This is a paragraph of text</p>
Of course, one of the main attractions of most content management systems is that you don’t have to know how to write HTML. Instead the content management system will add the code for you.
Historically content management systems didn’t even try to understand what any individual piece of content was. Instead they let you as the content management user, style the content to look however you wanted. So instead of telling the system that this is a heading you simply made it look big and bold so users of the site would know.
Although this sounds like a good approach in principle, it actually opens up a whole load of problems that are too extensive to cover here.
More modern content management systems, such as the ones deployed by Headscape, ask the user to explain what each piece of content is so that the system can add the proper HTML code.
The way the content management user does this is normally through a drop down menu of styles much like you find in Microsoft word. You simply select a block of text and choose the style which best describes that text.
Marking up content in this way brings a whole host of advantages including (but not limited to):
- The ability to redesign how an individual style looks universally across the entire site without editing each page.
- The ability to change the appearance of styles based on what device is accessing the content (for example a mobile device style).
- The ability for screen readers and other assistive technologies to understand the site.
In short, a well marked up piece of content will be available to a much larger audience and is easier to change and adapt.
Text alternatives
Well marked up content is not the only way to improve the accessibility of your site. Another is to provide text alternatives for elements that some users will not be able to access.
The most common example of this is with the inclusion of images into your pages.
There are a number of reasons why a user may not be able to see the images on a page. These could range from viewing the page via a mobile device to the user suffering from some form of visual impairment. However, whatever the reason the solution is the same; add alternative text that describes the image.
Alternative text is only visible to users who cannot see the image and so does not impact the design in anyway. The method of adding alternative text will vary between content management systems but in most cases (including on the Headscape system) you will be asked to add some text when you try and insert an image. A good system will go as far as requiring alternative text before approving an image for insertion.
A common mistake that is made with alternative text is to use it as a caption for the image rather than a description of the image. The difference is subtle but important. An image of Marcus Lillington our sales director might read ‘Marcus Lillington is more than happy to speak to you about your requirements’. This would be a caption rather than alternative text. Alternative text should describe the image and nothing more. So in the case of our example it should read simply; ‘Photograph of Marcus Lillington – sales director’.
Finally it is worth saying that the principle of alternative text does not apply just to images. It should apply to any screen element that can only be understood visually. That includes Flash, video, audio or other plugin.
Meaningful links
Another common accessibility mistake is with link text. When a content management user creates a link between pages it is not uncommon to see links with phrases like ‘click here’ or ‘read more’. This presents a problem for two reasons:
Firstly, users who access the web using screen readers often have all links on a page read back as a list in order to save listening to every piece of text when all they want to do is find the next link. A link like ‘click here’ means nothing when read out of context.
Secondly, many users will scan a page looking specifically at the links. They don’t read the text before or after the link so again they see it out of context. The result is that, like screen reader users, terms like ‘read more’ mean nothing.
This problem is easily avoided by ensuring that all links make sense out of context. So instead of linking the words ‘click here’ in the sentence ‘click here for more news’ you simply link to the phase ‘more news’ or ‘news archive’.
Acronyms and abbreviations
Earlier we talked about how where possible jargon, acronyms and abbreviations should be avoided. However there are occasions where that is not possible.
In such situations your choices are very much dictated by the functionality provided by the CMS you are using. Unfortunately, many content management systems are not particularly helpful in this regard and you maybe limited to typing out a description in brackets each time.
However, more modern content management systems such as that provided by Headscape, allow you to select an abbreviation style. You can then enter the full description and this becomes available to the user without destroying the flow of your text.
This is achieved in a variety of ways but the most common is using a dotted underline. If a piece of text has been marked up as an acronym or abbreviation it will appear to the end user as text with a dotted underline. When the user moves her cursor over the text the cursor changes to a help symbol and displays the full description as a tooltip.
This provides a full description to users encountering a piece of jargon for the first time, without getting in the way of those who already know what it means.
Using tables correctly
Web design has changed a lot over the last few years and so have content management systems. One of the most significant changes has been a move away from table-based layout.
Table-based layout is a technique that uses tables to position content on a page. However this is an abuse of the table feature in HTML and can cause significant accessibility problems especially for users running on older PCs or using mobile devices.
We therefore strongly recommend that using tables for layout is avoided at all costs. Instead clearly markup the content using the descriptive styles provided. The system will do the formatting and positioning.
That said there is still a place for tables. Tables were originally intended for tabular data (data made up of columns and rows, like that found in a spreadsheet). If you have information like this you wish to include on a page, then this is when you should use a table.
Working with imagery
Although we have already spoken about imagery in the context of alternative text it is worth noting that there are other accessibility issues relating to imagery you should be aware of:
Animation
Animation can be a problem area if not handled correctly, so generally speaking it is better to avoid the use of animated imagery unless it helps explain the content in someway.
The main reason that animation can be problematic is because certain forms of cognitive disability can be made worse by flashing animation. It can prove distracting and make it harder to process the content being read.
If animation is to be used we recommend:
- That the user is given the ability to disable the animation
- That the animation is not too rapid so that it proves less distracting
Colour
Finally, it is worth noting that a considerable proportion of your users will suffer from some form of colour blindness. For example almost 1 in 10 men are colour blind. In addition it is possible that other users will be accessing your site through black and white monitors on mobile devices. It is therefore important to ensure that any imagery you use is not reliant on colour to communicate information and that there is sufficient contrast between foreground and background colours.
These two issues are addressed in the W3C guidelines on accessibility:
2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
Further information
Hopefully this document has been useful in outlining some of the basics of writing content for a website. However, we have obviously only been able to scratch the surface.
If you would like further information, please do not hesitate to contact Paul Boag (the author of this document) using [email protected].
