Online newspaper layout – 10 years and 10 steps back

This image has been doing the rounds on Twitter recently:

[caption id=”attachment_715” align=”aligncenter” width=”590” caption=”Online newspapers: now and then (from https://imgur.com/gQouk.jpg). More ads and more stuff in 2009.”][/caption]

I think it’s hard to deny the point the picture’s making: there’s too much worthless _stuff _in modern online newspaper design. Of course, it’s not all bad: the text in the old article would probably be set in 8 pixel verdana with 1.2em leading and a measure of 35 words. The ads would flash ‘YOUR COMPUTER HAS BEEN INFECTED WITH A VIRUS!!!!!. CLICK HERE TO WIN!!!!’.

Now we have sensible typography, slightly more tasteful ads (on the whole) and really very clever grids.

How did we get here?

I think we can ascribe this visual confusion to four causes:

1. newspaper publishers don’t trust readers to visit their site and find information, so they put (and I’m not exaggerating in the case of The Guardian) 75+ stories on the front page

2. publishers need to generate revenue through advertising and, while there’s nothing wrong with ads per se, online advertising is still relatively immature and driven by click rates. Ads therefore tend to flash, intrude and use OVER-EXCITED language to try and attract attention among all the newspaper stuff.

3. publishers are in awe of user-generated comment and social media. Unfortunately, the current thinking seems to be that concepts like _community _are commodities: the more you have, the better

4. this mass of stuff has coincided with the develpment of complex CSS techniques that mirror print conventions, such as grid-based design. As publishers want to publish lots of stuff they’ll happily use 16 colums

[caption id=”attachment_721” align=”aligncenter” width=”590” caption=”New York Times: the basic typography is great, but the text has to snake around the ‘social’ options and the adverts”][/caption]

Putting content first

So how could we improve online newspaper design?

Organise site content properly

The print verisons of newspapers provide a clear, simple pointer as to how online content could be organised. The Guardian’s website has a header navbar with 25 links. The print version is divided into six clear sections: news, sport, business, commentary, listings and G2. By dividing the website into a manageable number of sections and exercising a bit more editorial judgment on the front page, readers could be guided through content, and the layout simplified.

Rethink comments and commentators and let readers digg/tweet/facebook content themselves

Some comments are insightful. Lots are not. And it’s nearly impossible for readers to sift through several hundred of them. Newspapers need to rethink how comments are accepted,  limit comments to email correspondence or scrap them altogether. Rejigging the comments system is perhaps the most palatable option. Publishers could direct comments to a separate message board area where commentators could post new threads and respond to existing ones.

Alternatively, online publishers should once again turn to the print world for guidance and moderate comments so that only the representative and/or particularly useful remain. In time, commentators will only comment if they’re particularly inspired or knowledgeable enough to do so, and the general quality of the commentary will perhaps increase.

[caption id=”attachment_722” align=”aligncenter” width=”590” caption=”The Times. Again, the basic typography is good, but too many columns and too much ‘stuff’ means the ads have to fight for attention”][/caption]

Give ads proper placement and allow them to mature

If we can reduce the amount of content on our pages it’s just a short hop and a step to simplifying the layout. Just because we can implement a 12 column grid doesn’t mean we have to use all of it: Although it might be boring, a two-column, content/asides layout is really easy to read, and has the added bonus of being familiar to most readers.

And if ads aren’t  fighting content for attention then it should be possible to employ more subtle advertising techniques. Animated Flash movies make us think we’re looking at annoying adverts. Once again, online publishers can take their lead from the print world, where the click-through isn’t king, and the idea of communicating a brand is sometimes just as important as generating direct sales.

Not all online newspapers are as cluttered as others. The NY Times, for example, employs an understated typography and uses (mainly) just two columns when displaying individual stories. It uses too many contextual options and social media links (in my opinion), but it is far more readable than The Times and The Guardian.