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.