Formatting Content for Web Readers

All Web readers have one thing in common: they don't want to read all the text on your Web page — and they won’t. To help your readers get to the content that they do want to read, follow one overarching rule: avoid paragraph after paragraph of prose. You don't need to do anything fancy or complex to break free from the so-called "wall of text."  Simple, obvious things like headings and lists are often enough.

Formatting Basics

Break up large amounts of information into smaller, clearly marked subtopics. 

This is sometimes called "chunking." Sometimes it makes sense to put each chunk on its own page; other times it will make sense to keep the chunks all on one page, with each chunk clearly marked (most commonly with headings). 

Use headings to separate and label topics.

Headings are simple, obvious visual cues that help readers find what they need. 

• Use words that are specific to the topic and that your readers are likely to look for. If possible, start each heading with key words. 
• Keep headings brief — ideally one line. A heading just identifies the topic; it's not the topic itself.
• Make sure your headings follow proper hierarchy and HTML markup.

Keep paragraphs brief.

Limit paragraphs to a few sentences each as much as you can. 

Use lists and tables instead of sentences and paragraphs when appropriate.

Typical opportunities for turning prose into lists or tables:

• If you're telling readers to follow a series of steps, use a numbered list for the steps.
• If you're providing a series of items, put them in a bulleted list.
• If you're comparing two or more things across more than one criteria, arrange the information in a table.

These are just typical situations — not the only ones. Anytime you find yourself writing sentences full of phrases like, "If this, then do XX, but if that, do YY," or "on one hand...; on the other hand", you're better off using headings, lists and so on to present the information.

Not convinced?  The paragraph below explains the different ways that skilled and unskilled readers read Web pages:

Skilled readers read at a 10th–12th-grade level. They scan pages in an “F” pattern (See Jakob Nielsen's article, “F-Shaped Pattern for Reading Web Content.”).  When they scan, they look for headings, keywords and links, and pay the most attention to the first two words of a link. In contrast, unskilled readers read at a sixth–eighth-grade level. They do not scan pages, but instead read slowly, word by word, and interpret text literally. They stop reading once they find a plausible answer, even if it isn't the best or correct answer, and will give up if there are too many words.

The same information is on the "Understanding Web Readers" page, laid out side-by-side in a table. Which version helps you understand the differences faster?

Important Format Details

Use fonts that are designed to be legible online. 

Remember that even a high-resolution screen cannot display text or graphics as crisply as a print document. The college's preferred online font is Verdana. 

Use boldface to emphasize something in a sentence. 

Never emphasize something by underlining it. On the Web, underlining is a long-standing convention for indicating a link, and readers will be confused if you use it for something that isn't a link.

Avoid using italics. 

Even in print, italic text is hard to read; on a computer screen, italics are even harder to read. Not convinced?  Here's that sentence again, all in italics:
Even in print, italic text is hard to read; on a computer screen, italics are even harder to read.

Avoid using all uppercase letters (also called "all caps").

All uppercase text is a problem for two reasons:

• Years before the launch of the World Wide Web, all uppercase text was already the Internet convention for shouting. 
• All uppercase text is harder to read. Most people read by recognizing word shapes, rather than by looking at the actual letters and what they spell. When text is all uppercase, all the words have the same basic block shape and it's harder to tell one from another. Not convinced? Here's the sentence about shouting again, in upper case:
  
  YEARS BEFORE THE LAUNCH OF THE WORLD WIDE WEB, ALL UPPERCASE TEXT WAS ALREADY THE INTERNET CONVENTION FOR SHOUTING.