Resources
Resource Details

Writing for the web: 10 ways to make your pages scannable

Easily scanned web pages will make sure your content is read, and your visitors return. Here’s 10 tips for creating scannable pages.

Few of your website’s visitors will read every word on a page, and most will decide in just a few seconds whether to read on or click away. So however great your content, if it isn’t arranged it in a way that can be quickly scanned, it won’t even be seen.

The F-shape

Web pages are typically scanned from the top left corner, across to the right, and then top to bottom along the left side of the page, in an f-shape. So get the important words into the headline and first sentence, and at the beginning of paragraphs where they’ll be seen.

Headline

Always have a headline, and keep it meaningful and direct. Remember the f-shape – use the important words towards the beginning. Your headlines might appear in many other places as a link to the page, so make sure they describe it well.

Standfirst

The first 1 or 2 sentences that many pages have below the headline, emphasised in bold or a larger font size, is known as a standfirst. But don’t just bold the first sentence – a well written standfirst will succinctly describe the whole story, and act as a teaser to tempt the reader on.

Short paragraphs

Short paragraphs are easier to scan, and a lot less off putting than a page of dense text. Paragraphs should have just one idea, and be a maximum of 3 – 4 sentences, though will often have just 1 or 2.

Subheads / cross heads

Pages can be broken up with crossheads, perhaps 2 or 3 for longer pages. Keep them short and meaningful, describing the text to come. And remember the f-shape – always left-align your crossheads.

Lists

Lists can be great for displaying easily scanned ideas. But don’t overuse them, and keep the items short – just putting a bullet at the beginning of your paragraphs doesn’t make it a useful list.

Links

Your links should be formatted in a way that makes them stand out from the rest of the text. So make sure they’re highlighting words that help visitors understand the content of the page – definitely no ‘click here’, ‘read more’ or ‘this ‘report’.

Pullquotes

A pullquote is a very short quote displayed in a large font. If the main text runs around it (and it probably should), make sure the pullquote is right-aligned, so it doesn’t interfere with the easy scanning down the left side

Images

Images can work well for breaking up text. But use with caution – some studies have shown that text is better for scanning than images. And make sure your pictures are extremely clear and graphically strong, and simply convey a single idea.

Captions

Images should always have captions, and should add new information and help the understanding of the page – a simple description of the picture doesn’t make a good caption

This resource was created by Simon Williams who runs the Writing for the Web and Build Your Own Website workshops for NUJ Training Wales. Simon’s website

Written By...

Simon Williams

Simon Williams

Simon Williams runs the Writing for the Web and Build your own Website courses. Simon teaches digital and campaign communications at Cardiff University’s School of Journalism, and is a freelance journalist specialising in environment and outdoor activities. With nearly 20 years experience of online editing, design and development, and 8 years as communications manager for Friends of the Earth Cymru, Simon now provides communications strategy consultancy and training. Find out more at www.kift.com

Twitter

NUJ Training Wales