Frédéric Filloux

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.

I have a hard time agreeing, only because I’m skeptical of his optimistic forecast of the situation. The problem is that the logic behind his reasoning assumes that only advertisements are impacted by the reduced real estate of mobile devices. That real estate also becomes limited for the content itself, making the challenge for designers even more difficult. Filloux claims that with a smaller real estate, the viewer shall be exposed to a smaller number of advertisements. What may be more useful to know is how much of the screen real estate remains occupied by ads? And perhaps more importantly, how much of the real estate does the content now occupy? To find out, I decided to conduct his original experiment on my iPhone, to see firsthand exactly how web designers work around a smaller container.

Here are a few screenshots I took in mobile Safari, each showing exactly how the pages renders on screen without scrolling. Blue highlights indicate advertisements. I also added pink highlights to indicate UI elements, which figure more prominently on mobile screens. Arguably, mobile content must also negotiate space with those elements as much as with advertisements.

First, for comparison, here is The Atlantic’s mobile homepage, without highlights.

And now with the highlights

Here are a few more from the mobile home pages of The New Yorker, Wired and the Huffington Post.

What’s made clear from the examples above is how tough the decisions designers must make are. First, only two of the 4 examples actually show ads on their home page: The Atlantic and The New Yorker. Both are banner ads placed either above the header or locked to the bottom of the viewable page. However, even without ads, the Huffington Post and Wired’s pages feel strange, due to their decision to feature a relatively large image front and center with little to no information next to them. The Atlantic opts to make use of its space with a relatively simple layout of 3 article links, while The New Yorker features one headline with a byline, lead and a small image.

Next, here are sample article pages from the same websites.

The decisions only get harder. Of the four, only The Atlantic’s article page presents a lead paragraph to the reader. Two others present the viewer with a combination of banner ad, headline and image. Wired’s, while having no ads, only manages a large headline, dedicating the rest of the space to fancy layout and navigation links. In contrast, here is that same Wired article page, but seen in mobile Safari’s Reader:

Which would you prefer? In general, most websites make do with the same amount of space. Headers and navigation bars are largely the same size in each example, so how the remaining space is divvied up between advertisements, flashy graphics, and actual content becomes crucial to the experience. None of the sites manage to get both the homepage and article pages quite right and many times, the layout seems rough around the edges. Imagining the screenshots as a single, static page, it’s unfathomable to think it would be acceptable for images and headlines to bleed out of the page, or for the reader to be presented with only one large ambivalent headline or image and no actual content, as we’ve seen in the above examples.

The conceit of course is that scrolling down the page will reveal more information. However, the same could be said for Filloux’s experiment on desktop browsers. The point is to see how designers manage the first view of a site that readers arrive to. What the screenshot of Wired’s article page in Reader mode demonstrates is that a dedicated system for displaying text may work better than trying to work within a small browser frame. Hence the power and popularity of dedicated applications like Instapaper and Flipboard.

For example, here is the New York Times mobile edition.

Even with a banner ad(that appears only intermittently), the removal of the browser UI elements allows designers to dedicate more space to content and manage UI space themselves. On its home page, there is enough room for 3 headlines, including a small lead and image for each. More information can be shown to the reader, and in a much clearer fashion. The article page itself now resembles much more what we saw from mobile Safari’s Reader mode and is infinitely easier to read and comprehend. Even if they chose to limit text by the addition of a larger image, the clarity of the initial homepage helps to understand what article the reader has chosen. In some of our previous examples, the reader was only presented with large images and little context. In the case of The New York Times mobile edition, the overall design of individual views read together as a larger whole.

This is a good example of an original design for web publishing on mobile devices. For fun, let’s see how a straight digitalization of a print magazine appears. Here’s Harper’s Bazaar:

Harper’s takes a lazy approach here, in essence presenting a slideshow of each individual page of the magazine. Here is double-dipping at its worst: payed content with full page ads. Of course, Bazaar is a strange beast in that most readers actually find the advertisements to be part of the content. Ads aside, this model for digital publishing is still broken. Multipage spreads, be they ad or content, are broken up on the iPhone or iPad, rendering them potentially useless. Here’s a side by side of two iPhone screenshots, recreating the original image.

I won’t bother to discuss the presentation of text, because you already guessed that it renders horribly, especially on the iPhone’s smaller screen. The experience is perhaps not as bad on the iPad, but having to tap to zoom to be able to read the content you paid for seems like poor form. This illustrates why a lazy approach to producing magazines for mobile devices will always fail. That isn’t to say it will be impossible to reproduce the qualities of magazines on those kinds of devices, but simply that everything must be rethought and redesigned from the ground up, not merely tacked on.

But back to Filloux’s original premise. Does mobile publishing present the user with less advertisements? I suppose the answer is yes: The examples illustrated above never featured more than one banner ad. However, looking at its impact on the usable space of a mobile view, even a single ad can significantly impact the presentation of content. More so, I would say, than on desktop browsers. So while there may be less ads overall, I would argue they are more intrusive and impact a site’s content more meaningfully. None of those mobile webpages made for a particularly pleasant first appearance. If there is any hope for web publishing, on smartphones at least, it would seem to actually be away from the web and on dedicated applications. The screen constraints might be the same but designers aren’t additionally constrained by a mobile browsers own UI elements or forced to try and adapt a desktop webpage into a much smaller container. I will say, however, that my results are from experimenting with an iPhone alone. The experience could be entirely different on a larger device like the iPad. The thing to keep in mind is that creating a rich experience for each kind of device format is essential.

Overall, I think Filloux’s conclusion is on the money:

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.

And what a challenge it is.

Marco Arment:

Consumers have tolerated double-dipping — products that cost customers money and have ads — for over a century. It doesn’t feel as offensive in contexts that have always had it, such as printed newspapers and magazines, or cable TV.

But ads shoved into a non-free iPad or web publication feel wrong to me.

Arment gets how things should be, but I doubt we’ll ever see anything of the sort in the near future from historically print driven publications. Publishers like Conde Nast (the New Yorkers parent publishing house) or newspaper organizations just aren’t operating at the scale necessary to maintain ad free magazines or papers driven instead by per issue or subscription revenue. They are simply too large as organizations.

Ads have already been the main source of income for most publications for decades, making it hard to shift gears into the digital realm with a new business model. The issue isn’t that there aren’t enough people willing to pay $4.99 an issue or more for quality content. The problem is that there just aren’t enough people, even if there were hundreds of thousands of them, to sustain corporations that employ thousands of people, sometimes around the world, trying to publish both digital and print publications that require massive overheads(especially with print or publications with a large journalist team). Not to mention that the success of some publications may insure the survival of other publications from the same house. The per issue cost of the New Yorker may be enough to maintain itself, but who’s to say that the ad revenue is what ensures the survival of some of Conde Nast’s other digital offerings.

All this to say that I’m not optimistic on the chances of say, the New York Times, dropping ads from its digital subscriptions. However, I am more optimistic that a great iPad magazine can rise from the ashes of print by a website like Ars Technica, who’s operations costs are already geared towards an online only model. I would expect such online publications as The Verge or The Huffington Post to be the ones driving innovation on iPad publishing, not the Wall Street Journal. If anything, online journalism has shown that a news organization doesn’t have to cover all news on all subjects to be successful. There’s plenty of money to be made delivering specific and focused news to a discerning audience that will flock to whatever interests them. That is how most of us get our news today. The potential is massive for whoever wants to bring that paradigm over to digital print.