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.

BBC News story layout
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

The headline is clearly indicated by a simple change in font and font size
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

The story includes video
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

The links are relevant to the story content

More contextual links, this time to other news providers
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.
Pull quotes

An example of a pull quote
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.
Critcism
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.
Summary
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.
Pingback: Leon Paternoster » Posts » Welcome! Smashing Magazine readers
This is a very useful post, and the first I’ve read on your blog.
The BBC home page seems to have been redesigned around a “content management system” – perhaps joomla.
Have you worked with joomla, or another cms, or had any thoughts on the general usability and readability of similar systems?
Hi Michael – I know the BBC uses Expression Engine for some parts of its site (just the blogs, I think). I would imagine it uses its own, or a customised, CMS for the main work.
I work with an old, old customised CMS at work, which isn’t very flexible. Apart from that, I’ve used textpattern and WordPress (which powers this site). I don’t know if you’d class them as full CMSs, although wp is heading that way.
Any modern CMS will allow the flexibility to structure content in the ways I mention above; both wp and textpattern allows excerpts, for example, which could be used for standfirsts.
All modern CMSs will use CSS to present content—the readability of the that content will therefore depend on the quality of your CSS.
Leon
Pingback: Hva er det som gjør de nye websidene til BBC så bra? | Hittegodskontoret
Pingback: Recent Links Tagged With "paternoster" - JabberTags
Pingback: Gigantic — Welcome! Smashing Magazine readers
Very good analysis of BBC’s revamping of their site.
Article writing is one of the most important things in Internet Marketing and if done right, can keep your visitor captivated on the page. All too often the article is drab and can’t keep anyones attention too long. Also there is much duplication on the internet these days.
One way I have found to stop the duplication in its track is with using Article Writer Pro. Editor’s note: this product happens to be sold by the author of this comment. Fantastic program and works wonders.
Hello Kelvin,
I’m not going to spam you as you have at least replied in person and you do make a somewhat related, if very vague point.
I think it’s only fair to disclose that the product you mention is sold by your good self, and any product that states
is on dodgy ground. Still, I trust my readers are able to make an informed judgement.
I reckon your site could do with a little work…
Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.
Sign: dgcph Hello!!! pugcq and 3976rsdawdmqfu and 8517 : I will try to recommend this post to my friends and family, cuz its really helpful.
I totally disagree about the paragraph structure. The use of 1 sentence per “paragraph” only serves to make articles disjointed. Instead of grouping similar ideas together, we get a random series of statements spouted one after another with no coherent whole.
To be honest, I can no longer finish most articles because of this. Read like a 12 year old school kid with severe ADD.
Thanks for your comment, Fred.
I don’t think it’s so much to do with attention span (or age, for that matter), it’s more that reading from a screen is so difficult.
Besides, there’s some skill in constructing a cogent article using short paragraphs (newspapers — tabloid and broadsheet — use a similar technique). And from a style point of view, it can impart a sense of urgency to a news story.