Web design is in bad shape. In the applications boom, news-related websites end up as collateral damage. For graphic designers, the graphics tools and the computer languages used to design apps for tablets and smartphones have unleashed a great deal of creativity. The transformation took longer than expected, but great designs begin to appear in iPad applications (in previous Monday Notes, we discussed Business Week+ and the new Guardian app). The best applications get rid of the print layout; they start from a blank slate in which a basic set of rules (typefaces, general structure of a page, colour codes) are adapted to the digital format. Happily, we just stand at the very beginning of a major evolution in news-related graphic design for apps. And this new world proves to be a killer for the traditional web which, in turn, seems to age fast.
The graphic evolution of the web must deal with two negative forces: its language framework doesn’t evolve fast enough, and it faces the burden of messy advertising.
Less than a year ago, the potential in the latest iteration of HyperText Markup Language AKA HTML5 thrilled everyone: it was seen as the decisive, if not definitive, upgrade of the web, both functionally and visually. Fact is, it hasn’t taken off – yet. Reasons are many: backward compatibility (not everyone uses the latest web browser), poor documentation making development uncertain, stability and performance issues. There are are interesting initiatives but nothing compelling so far. None of the large digital media have made the jump.
For advertising, the equation is straightforward. The exponential rise of inventories coupled to fragile economic conditions have pushed ad agencies to ask more (space) for less money. And, for creativity, progress has been flat.
The result is this:
This is the first screen of the French website 20 Minutes’ home page. It is a good site, doing quite well audience-wise, but which yields too much to advertising. In its case, the page carries an “arch” that frames the content; and, for good measure, a huge banner is inserted below the main header. If you mask the ad, it looks like this:
The weird thing is this: On the one hand, web designers seem to work on increasingly large monitors; on the other, the displays used by readers tend to shrink as more people browse the web on notebooks, tablets or smartphones.
The result is a appalling when you try to isolate content directly related to the news. In the series of screenshots below, I selected the first scrolls of pages as they render on my laptop’s 15″ display. Then, I overlaid a red mask on everything but the news content: ads, all sorts of promotions, large white spaces, headers and sections lists are all hidden away.
Please note that, because of file-size constraints, the newsletter version of the Monday Note displays a small selection of screenshots. Go to MondayNote.com to see the full set.
Not surprisingly, digital products of organisations that carry strong editorial values are the most parsimonious when it comes to hosting ads.
The New York Times :
The Financial Times:
The Wall Street Journal (subscribers version):
Interestingly enough, the Wall Street Journal, which is mostly subscription-based, doesn’t inflict loads of ads on their occasional readers (the home page stays more or less the same in both cases).
Which is not the case for Le Monde; here is the subscriber version:
… and the non-subscriber one. (Understandably, the occasional reader gets more ads than the paying subscriber).
But, when ads become the main source of income, excess looms. Remember, the big red blocks mask the ads.
The online version of the Swedish paper Aftonbladet:
The French Figaro, whose layout is more or less standard in the industry:
Again: this is not to prejudge the quality of these websites. Whatever their level of advertising saturation, they are fine sites that chose to maximise the revenue of their home page. Their rule of thumb makes business sense: for the digital version of a national newspaper, the home page should get as much revenue as a full colour printed page.
Things do get worse on article pages. Readers land there from the home page but also from search engines, social networks or third-party links. At some point, too many ads, and/or designers’ inability to limit themselves to what is really needed to navigate the site converge in creating a bad reading experience.
Here is a simple graphic showing where a story actually starts on a page (based on its headline), the red rectangle being the browser’s window:
(Go to Mondaynote.com to see the complete set of visuals)
Unsurprisingly, the paid-for digital versions of newspapers tend to display as much as possible; as advertising weighs more in the P&L, so do ad pixels. (The French business daily Les Echos, largely paid-for, is a notable exception). As for the Swedish Aftonbladet, its stories begin below the fold as the pictures come ahead of the text:
More than everything else, layout is a matter of choice. This is especially true for digital media where the same content has to be tailored – sometimes on the fly – to serve different readerships (paid-for subscribers or free-riders, national or international versions etc). Having said that, the examples above show publishers that have gone too far in yielding to advertising pressure. Thanks to the rise of mobile internet, the pendulum is likely to swing back: smaller screens will result in fewer ads carrying more value. Today’s ugliness won’t last forever.