Note: Jamie Ridler over at Jamie Ridler Studios is running a "Hands-up How-to" project for the holiday season. 

You can read more about the project here, but the gist is that you write a "how-to" post to share your knowledge of something you wish YOU'D known when you were starting out. 

So this is my contribution: how to make your webpage easier for people to read onscreen.

Why good writing on paper can cause major problems onscreen

People read text on a screen very differently to printed words.  Where they tend to read a printed page in full, they’ll just skim through a webpage.

That’s partly because they’re busy and a little impatient, and they know the web is a BIG place. They don’t want to waste time searching a webpage in detail for information that might not even be in there. But it’s also because reading text on a screen is intrinsically harder on their eyes than text on a page is. 

So most readers will give your page an average of just 10-20 seconds to prove that it contains the information they want. If they don't find it in that time, they’ll click away and try somewhere else. 

How your onscreen readers scan your page

Some interesting research shows that onscreen readers generally follow certain patterns when they open your webpage for the first time.

Rather than reading from start to finish, they’ll scan along the top of your page and then down the left-hand side, pausing on your link text, highlighted information and subheadings. Often they won’t make it anywhere near the end of what you’ve written.  Don’t believe me? Check out these fascinating eye-tracking heat map studies.

That means your webpage has to be easy to scan if you want to get the messages in it across to readers. The good news is that there are a few simple ways to do this.


Use an easy-to-scan page structure

The first thing you can do is structure your page so that your readers can quickly and easily figure out what it's about. Techniques for doing this include using:

• An “inverted pyramid structure”: if people get more likely to stop reading with every paragraph you add, you need to put essential information in first. The interesting (but ultimately non-critical) background info can come later.
• A summary introduction paragraph: alternatively, summarise the key point of the entire webpage in your first sentence or two. If your reader sees up front that the page has what they’re looking for, they’re more likely to bear with you.
• Clear, meaningful headings: easy-to-scan webpages need two types of headings: overall page headings and subheadings.  Those headings need to give readers a clear, accurate snapshot of what the page or section that follows them is about. And while it’s fine to be clever and creative with your heading text, it’s WAY more important to be clear.

Use easy-to-scan page formatting

Next, you need formatting that helps your reader to pick out important information at a glance.  Techniques you can use include:

• Left aligning your text: you want people's gazes to travel over as much of your writing as possible. So if they scan down the left-hand side of the page, you want to left-align everything. If you centre your headings (or worse, your text!) readers will often completely miss them.  Using left-aligned bullet-points for lists of information can also make your text more scannable.
• Using shorter paragraphs with white space between them: unbroken walls of text are nearly impossible to scan.  Short paragraphs separated out by white space help your reader to break information up into manageable chunks. Aim to keep each paragraph to less than 4 sentences.
• Consistent formatting for different text types: use one size/colour/font combination consistently for subheadings, another for main text, another for emphasis, and another for link text. Your text formatting gives your reader a subconscious cue about how they should process that text. Don’t confuse them by giving mixed cues!
• Highlighting important info in bold: help your reader figure out which information is essential by making it stand out.  Use bold text, and possibly a slightly different colour to emphasise. Don’t use upper case (all caps), which is hard to read; or underline, which most people associate with links. 
  

Use easy-to-scan language

Style is an intensely personal thing, but some language styles make your page easier to skim-read than others.  You want to use language that your readers understand intuitively – don't force them to figure out what you mean.  This means using:

• Shorter, simpler sentences: it’s hard work processing long, complex sentences in print – let alone on a screen. Keep most of your sentence under 20 words, with the odd one up to 25.  Try to either split anything longer or knock unnecessary words out of it.
• Reader-focused language: you’re writing for your readers, so use the same language they do. That means limiting or avoiding industry jargon and technical terms unless you know your readers use them too.  If you have to include words your readers might not recognise, make sure you explain them.
• Active voice: the difference between active and passive voice is the difference between “I wrote the post” and “the post was written by me”. Not only is active voice shorter, it’s easier for our brains to process. It’s often more vivid and image-laden as well. 
  

Easy-to-scan webpages: putting it all together

Of course, there’s more to making a webpage easy to scan than the 10 tips I’ve listed.  But the more of these techniques you use, the easier your readers will find it to skim-read what you've written. And that means they're more likely to realise you had the exact information they were looking for right there on your page!

When it comes to other decisions about how to structure, format or write your webpage, just ask yourself one question. “Will this make my page  easier or harder for my readers to scan?”  

If you’d like to read more about writing for the web, I heartily recommend some of the experts I’ve learned from:

• Rachel McAlpine’s Quality Web Content
• Gerry McGovern’s Web Content Style Guide
• Jakob Nielsen’s Writing for the Web research

Your turn!

What are your top tips for making webpages readable?  Do you have any personal pet hates that make pages harder to read for you?

Please to be sharing your thoughts in the comments!