I refer specifically to a news story about US swimmer Michael Phelps. Not all of the techniques apply to all forms of web writing, but many do, and most can be adapted in some way to make articles more readable.
[caption id=”” align=”aligncenter” width=”512” caption=”BBC News story layout”][/caption]
What the BBC does so well:
The article takes up most of the screen
The BBC news website underwent a recent redesign. Unlike the BBC home page’s redesign, this was an unqualified success. The page uses a 6 column grid, 5 of which are dedicated to the article itself - which means the reader’s attention is fixed firmly on the story.
Emphasis and colour aren’t overdone
[caption id=”” align=”aligncenter” width=”512” caption=”The headline is clearly indicated by a simple change in font and font size”][/caption]
Headings are indicated by a larger font size and a slightly different font face (24 pixel Arial as opposed to the 13 pixel Verdana used for body copy). These simple typographical alterations serve to indicate the purpose of the heading without distracting from a large quanitity of content: the designers chose not to use colour or bolding. Similarly, links are a conventional blue, making their purpose immeadiately clear. Using blue allows the BBC to avoid underlines: lots of underlined links can distract the reader from the content.
Reading is comfortable
The article’s copy occupies 3 of the page’s 6 columns, which results in a measure of 10-15 words. The leading is set to 140% of the paragraph font size, which is 14 pixels. These settings ensure the reader’s eye isn’t stretched across the page or up and down lines in order to locate their position within the text.
The heading tells you what the story is about in 5 words
No humour, punning or alliteration - just 5 words that tell you who, where and what.
The article is interactive
[caption id=”” align=”aligncenter” width=”512” caption=”The story includes video”][/caption]
The first element readers encounter after the headline isn’t a paragraph; it’s a video, with an enticing play button placed slap bang in the middle of it. This is not a passive text - readers are encouraged to do things rather than absorb large swathes of text. Similarly, readers are offered a wide range of links to click and explore, and another video further down the text.
Links are contextual
[caption id=”” align=”aligncenter” width=”512” caption=”The links are relevant to the story content”][/caption]
[caption id=”” align=”aligncenter” width=”512” caption=”More contextual links, this time to other news providers”][/caption]
A BBC logo placed top left provides the only universal link on the page - everything else is related to the current story, encouraging the reader to follow a narrative through the site. Even the left–hand sidebar alters according to the page’s content, acting as a sort of vertical breadcrumb. The right–hand sidebar offers a wide range of links related directly to the story; firstly, a list of BBC headlines (again, all informative and less than 5 words long), secondly a list of external sites and lastly links to related stories from other news providers.
The use of contextual links further aids the interactivity of the site by offering readers choices related to what they are currently reading, rather than a universal, unrelated links list. This makes perfect sense; for example, readers are unlikely to follow a link to the BBC Proms season from this page.
The article uses a standfirst
A standfirst is the first, summative sentence of a story. Convention dictates that it is bolded, which attracts the reader’s eye. It serves as a polite summary of the story, which allows him or her to decide whether to continue reading the text. It is usually found in tabloid newspapers, and the BBC story follows several other conventions of tabloid writing.
Short paragraphs, complex sentences
Most of the paragraphs in the story consist of just 1 sentence, never more than 2. Again, this serves to break the text up and thereby make reading easier. More discursive articles will require more than 1 sentence per paragraph, but keeping paragraphs short is an excellent convention, even if it means using some complex sentence structures.
[caption id=”” align=”aligncenter” width=”512” caption=”An example of a pull quote”][/caption]
A pull quote is a quote that is literally pulled from the main body of the text. It is often, but doesn’t have to be, from a person involved in the story. Its purpose is manifold: it provides both ‘human interest’ and typographical variation — in the BBC story it has a different background colour from the main body copy and employs a simple graphic. The BBC enhances the pull quote in this article by making it a link to a message board, once again making the story as interactive as possible, and adding a feeling of inclusion.
Criticisms are minor, but I would perhaps use a conventional, horizontal breadcrumb to help users locate themselves within the BBC’s website as a whole. I’d also emphasise keywords in order to further aid readers through large blocks of text. Finally, I’d up the font size to 16 pixels in order to make the type even more readable.
The BBC doesn’t use ornamentation to display its content; instead, a thougtful layout, logical typography and attention to sensible writing conventions allow the excellent content to entertain and inform.
If you liked this post, you might want to read about 6 newspaper writing techniques for the web.