Proof by Mask

Web design is in bad shape. In the applications boom, news-related web sites 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 already 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, color 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 the HyperText Markup Language a.k.a. HTML5 thrilled everyone: it was seen as the decisive, if not definitive, upgrade of the web, both functionally and visually. Fact is, it didn’t take-off — yet. Reasons are many: backward compatibility (not everyone uses the latest web browser), poor documentation making development uncertain, stability and performances 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 the creativity, the encephalogram remains desperately flat.

The result is this:

This is the first screen of the French website 20 minutes’ home page. A good site indeed, 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 contents: ads, all sorts of promotions, large white spaces, headers and sections lists are all hidden away.

Not surprisingly, digital version of organizations who carry strong editorial values are the most parsimonious when it comes to hosting ads.

The New York Times :

The Financial Times:

The BBC:

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 and that 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 doesn’t prejudge the quality of those media. Whatever their level of advertising saturation, these are fine websites that chose to maximize 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 color 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:

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 BBC

The Financial Times:

The Wall Street Journal:

Le Monde (subscribers version):

The Guardian

(The French business daily Les Echos, largely paid-for, is a notable exception with plenty of stuff on the top of the stories):

Scandinavian papers surrender a lot to heavy ads: stories in the Swedish Aftonbladet begin below the fold as the pictures come ahead of the text:

… As in its way, the Norwegian VG do the same:

Interestingly enough, the audience-obsessed Huffington Post, is rather careful to load its pages with mostly news-related contents:

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 went 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.

frederic.filloux@mondaynote.com

Be Sociable, Share!

No related posts.

15 Comments

  1. The Truth
    Posted October 31, 2011 at 2:14 am | Permalink

    Two comments. One, that survey unit on the right of the Huffpo page in the image at the bottom of your story is an ad unit. It even says advertisement above the survey.
    Two, i would point out that the Huffpo page doesn’t even have a single word of the body of the story above the fold. They’ve filled the page with large font and a bunch of marketing modules like share buttons and referrals to photo galleries. Market modules hardly qualify as content.

  2. James Katt
    Posted October 31, 2011 at 4:06 pm | Permalink

    Quote: “Today’s ugliness won’t last forever.”

    Of course, ugliness will last forever. Ugliness will last so long as the primary revenue is ads.

    On small screens, it becomes very important that the first thing the user sees are the ads. If not, then the site runs the risk of having no income. That becomes an intolerable state.

    Income = ads means ads have to be seen first – which means ugliness rules.

  3. Posted October 31, 2011 at 9:18 pm | Permalink

    This is excellent stuff: “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.”

    I use ad blocking utilities in Chrome, which to some extent shield me from harsh realities. On the one hard we’re admonished that if we expect to receive content for free than blaring ads are the price we must pay. On the other hand, the current state of affairs can’t be serving advertisers much better than it is readers.

    But, as you suggest, these things do tends to sort themselves out over time.

  4. Posted October 31, 2011 at 11:30 pm | Permalink

    Agreed. I’ve also strengthened this in article: http://frenchweb.fr/le-magazine-au-coeur-melee-numerique-15236/. Basically, it just means that display advertising as we know it is broken.

  5. Posted November 1, 2011 at 3:14 am | Permalink

    I’d still rather see the advertising placed on the page as the alternative would be to include the advertising inline within the articles them selves, or even worst the articles become the adverts. At this point we’ve abandoned news and welcomed the mid morning “news” programs.

    If only it would work with a “click on 3 ads and they disappear” basis.

  6. Posted November 3, 2011 at 2:42 am | Permalink

    I wonder how the “pretty” layouts of products such as Flipboard would accommodate ads. Flipboard doesn’t pay for its content but it needs to figure out how to monetize it.

  7. Steve Frothingham
    Posted November 4, 2011 at 10:31 pm | Permalink

    Tom wrote: Flipboard doesn’t pay for its content but it needs to figure out how to monetize it.

    Not to call you out, Tom, but just to make a point – Flipboard would like to figure out how to monetize their product, but that doesn’t mean someone else can’t come up with a similar app that isn’t monetized, yet catches on and has a large effect on the publishing industry. Popular apps and sites that are largely unmonetized (Craigslist, Twitter, Wikipedia, most blogs) can cripple large money-making endeavors (like newspaper classifieds) in a heartbeat. – SF

  8. Posted November 8, 2011 at 3:39 am | Permalink

    Recent articles. I think this is the most beautiful in the world the article, there must be many people like it your works will get everyone recognized you is the best I will always support you

  9. Posted November 8, 2011 at 3:45 am | Permalink

    Yeah~~~~~~~~~~`This has nothing to do with layers. You can either individually select or window select objects to be isolated or hidden. Good!!!!!!!!!!!!

  10. Posted November 16, 2011 at 8:52 am | Permalink

    VideoChatroom(VCR)
    ‎Free Video Chat Rooms on Facebook 12 Monitor live for Room Free Video Conference Free Video Chat Free Chat Room If your browser is Chrome or have flash player already!.
    You can run CamChat without install. Search Video Chat Rooms ,App on Facebook http://www.facebook.com/apps/application.php?id=135925073137630

  11. Posted November 16, 2011 at 8:53 am | Permalink

    ‎Free Video Chat Rooms on Facebook 12 Monitor live for Room Free Video Conference Free Video Chat Free Chat Room If your browser is Chrome or have flash player already!.
    You can run CamChat without install. Search Video Chat Rooms ,App on Facebook http://www.facebook.com/apps/application.php?id=135925073137630

  12. Posted November 30, 2011 at 9:16 am | Permalink

    Couple of errors on missed ads in your screenshot (they should be covered by red boxes):

    1: Wall Street Journal article page. There is an advert for Xerox featuring the Michelin Man in the right column.

    2: The Huffington Post article page (someone else already noted this one in the comments). There is a “survey” which is actually an advertisement (and is labeled as such) in the right column.

  13. Posted July 27, 2012 at 10:48 am | Permalink

    Sometimes, the monetization is the hardest thing on the project!

  14. Posted April 9, 2013 at 4:31 pm | Permalink

    It’s amazing in support of me to have a web site, which is good for my experience. thanks admin

  15. Posted May 29, 2013 at 4:32 am | Permalink

    0 megapixels, created-in flash, motion picture captured. The EOS 50D’s body design allows the camera to fit perfectly in hands while taking even the most difficult shots. This lets you manage exactly how wide the camera shutter opens and the remaining settings are governed automatically to provide you with an excellent picture.

7 Trackbacks

  1. By pligg.com on October 31, 2011 at 11:06 am

    Proof by Mask | Monday Note…

    En comparaison des applis natives, sur lesquelles les designers peuvent faire preuve de pas mal de créativité pour l’agencement du contenu, le web design reste une victime collatéral, retenu en arrière par 2 forces : un language qui n’évolue pas asse…

  2. By Proof by Mask | Monday Note | fozbaca’s WordPress on October 31, 2011 at 10:56 pm

    [...] http://www.mondaynote.com/2011/10/30/proof-by-mask Share this:DiggRedditLike this:LikeBe the first to like this post. This entry was posted in Uncategorized by fozbaca. Bookmark the permalink. [...]

  3. [...] his post Proof by Mask, Filloux notes: “Web design is in bad shape. In the mobile applications boom, news-related [...]

  4. [...] his post Proof by Mask, Filloux notes: “Web design is in bad shape. In the mobile applications boom, news-related [...]

  5. By Hypergogue – Wadsworth and our Readable Future on December 1, 2011 at 2:53 am

    [...] Filloux (who contributes to the excellent Monday Note) writes in Proof by Mask:* The weird thing is this: On the one hand, web designers seem to work on increasingly large [...]

  6. [...] Filloux (who contributes to the excellent Monday Note) writes in Proof by Mask:* The weird thing is this: On the one hand, web designers seem to work on increasingly large [...]

  7. By The Wadsworth Constant is a sign of user power on April 3, 2013 at 8:21 am

    [...] Filloux (who is half of the excellent Monday Note) writes in Proof by Mask: The weird thing is this: On the one hand, web designers seem to work on increasingly large [...]