How to write scannable web content for online readers

Paper vs. screen

If you write texts for websites, you should probably take into account that your reader reads very differently on a screen compared to on paper. Like I said, readers scan a lot more on tablet, smartphone and pc screens. If they do decide to really read something, they do so 25% slower compared to reading on paper. Reading tests also revealed that reading on a screen is more tiring and that readers tend to remember less from what they’ve read.

Use screen fonts

Screens and paper handle the legibility of letters differently. Microsoft fonts such as Verdana (instead of Arial) and Georgia (instead of Times New Roman) are designed specifically for screens by Matthew Carter. The Dutch Lucas de Groot designed the Calibri screen font for Windows Vista. For your online writing, it’s best to choose a font that has been designed for screens instead of paper.

Define what the most important information or task is

Why do people visit your website? Check your website statistics (through Google Analytics, for example) or log files and think about the following questions:

• How do people navigate to your website? Referral, organic search, social media, …?
• What are your most popular pages?
• From what pages do people leave your website? Where do they stop reading?

Find out what the most common pieces of information are that visitors are looking for on your website and make that information easiest to find. For example, people usually call a school to tell them their kid feels sick. The school’s homepage might include something like this to cater towards their audience then:

>> Will your child be absent from school? Call or send a text to [phone number] before 8:30 AM. Don’t forget to mention:

• your child's full name,
• class
• reasons of absence.

Thank you!

This is much more informative than a homepage that starts with ‘Welcome’, which doesn’t really help out with your SEO (Search Engine Optimization) either. It’s important that every single one of your web pages displays the call to action as clearly as possible, e.g. click a button. Visitors want to get started immediately, so make the most important information or task stand out.

Make your web content as scannable as possible

The internet is a quick search medium, pretty neat for whoever needs to look something up quickly. But ill-considered web content gets lost quickly, both in search engines and in the reader’s mind. More than on paper, the reader needs short pieces of text, titles and white space.

A title summarizes a whole paragraph in just a couple of words. Your titles should be informative and include the most important information. Something important is of course what the reader thinks is important or what they are looking for, not necessarily what you think is important. This provides the reader with structure and makes your text much more scannable.

Other significant information should be in

• headings,
• photos and captions,
• short paragraphs,
• buttons and links.

You can also use bullet lists like the one above. Arrows are particularly useful for highlighting something important.

Numbers in digits work better than numbers in words. To make your web content more scannable, write 100% instead of one hundred percent. Numbers are more striking than words.

7 tips from the ACA web designers and copywriters

• Limit your web page length to 3-5 screen lengths

If your web content is longer and all information is relevant, consider altering your website’s structure and adding more web pages.

• Say the most important things first

Web surfers look at the left side of their screen for 70% of the time. A visitor glances over your web page roughly in the shape of an ‘F’: they start at the top left, then look at the top right, go down from the left and next glance at the right again somewhere in the middle (see heat map to the right). It’s worthwhile to put the most important information at the top left of the page and less important information towards the bottom right of the page.

• Write your web text from short to lengthy

The first paragraph should be the shortest. The reader will only continue to read the other, longer paragraphs if this one is interesting enough.

• Mind the imagery

Pictures, hyperlinks, bullets, … Provide one absolute eye-catcher and at most 7 visual accents per web page. Take the text-to-imagery ratio into account and the fact that text to the right or under a picture gets read much more than other texts.

• Provide contrast between text and background color

For paper, it’s black on a white background. On a screen, however, this is too taxing for your eyes. Dark grey on a white background is a much better option.

• One line should include 75 symbols or less, including spaces

A sentence should never be smeared over more than 2 lines. The amount of lines per screen length should be 23 or less. A line should contain about 75 symbols or less, which comes down to about 12 words per line.

• Links should tell readers what they do

Don’t use ‘Click here’ links, but rather use ‘Click here to learn how to write reader-friendly emails’. Use buttons for actions like searching and registering, and hyperlinks to navigate to other pages.