Smarterbits

Proof by Mask [On iPhone]

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.

photo 3-4

And now with the highlights

atlantichome copy

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

newyorkermobilehome copy

huffpohomeweb copy

wiredmobile-1 copy

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.

atlantic article copy

newyorkerarticleweb copy

huffpoarticle copy

wired article

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:

photo 2-5

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.

New York Times

nytimesapparticle2 copy

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:

harpers-2 copy

harpers-1 copy

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.

harpers-spread copy

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.

    What I Want From a Digital Publication

    I spoke yesterday about the issues plaguing the print industry as they make the switch to digital publications, and it got me thinking about what exactly I imagine a digital magazine to be. So I tried answering those questions by looking at the ways I consume news and text currently. Here are my conclusions.

    Little amounts of advertisement. Preferably none.

    I have some tolerance for non-disruptive, ignorable and targeted advertisements. Daring Fireball, 5by5, shawnblanc.net and a host of other “niche” websites supplement or derive their incomes from these kinds of advertisements. They come in two varieties: small icon advertisements on the websites main page or through weekly sponsors that appear alongside regular articles of the site and on their respective RSS feeds. I don’t mind these and occasionaly, I’m even interested in the products being advertised. I don’t have tolerance for messes such as this.

    Given the choice, I’d rather pay than have to put up with RSS sponsors or small advertisements from The Deck. In some cases, as with Daring Fireball,that isn’t possible because John Gruber wishes for the content of his site to remain free, which I have no problem with. Other sites are trying to find ways around those issues either by offering member or patron status to readers who wish to become one. You can pay Ars Technica for a unpaginated, ad free version of their site.

    Newspapers, like the New York Times, also offer digital subscriptions and memberships, but the paywalls are either incredibly high or aren’t compelling enough for me to jump over. There are other factors in play in this case because while I wouldn’t pay the Time’s yearly subscription fee, I would gladly pony up the same amount for access to Gruber’s work. We’ll get to that.

    What I especially don’t want from digital print is the double-dipping allusion Marco Arment made reference to yesterday. Either have your content be free of charge with smart, discrete advertising or charge a flat fee for an ad free experience. Given the choice between the two however, I will likely always pick flat fee. Just don’t do both.

    Legibility and Focus on Content.

    Websites aren’t the ugly beasts they used to be a decade ago by any stretch of the imagination, but they still don’t make for a great experience dedicated to reading. The problem isn’t necessarily a fault of web designers or publishing houses, but rather the medium itself. Web design primarily lives in browsers and as such, must abide by the contraints, expectations and parameters of the medium. We want websites to be interactive, connected, filled to the gills with information and beautifully layed out. Those are the strengths of the web. What they aren’t however, are the strengths of the book or magazine page. Even where text is made the primary focus of a website, the results can often be mixed. Using Daring Fireball as an example again it is apparent that while the site emphasizes legibility and simplicity, the final result isn’t particularly breathtaking or aesthtically pleasing compared to Wired Magazine. While certainly practical and perfectly suited to the task, there’s something missing to make the entire experience more engrossing. While it’s entirely plausible that this is the precise way Gruber intends his website to appear, it’s also possible he’s making the best of what’s available to him; remember, his work is presented on a website viewed within the constraints of a browser.

    More pressing however, is that most websites still aren’t built from the ground up for the “mobile” size factors of smartphones and tablets. Daring Fireball renders very nicely on a 13 inch notebook screen , but not so well on an iPhone(at least without tap to zoom). Apps have come along to remedy the situation; Instapaper, Reeder and even mobile Safari’s reader functionality all do a great job isolating text from a cluttered website and presenting it in a hyper legible format. But again, the results are pragmatic. They could be better. This is easy to read. This is easy and fun.

    A digital publication should ideally treat a device’s display as a canvas for text, rather than a container. This is the magazine’s last remaining strength over the web; it can engage with text layout artistically, functionally and meaningfully. Digital text has by and large figured out the functionality aspect, but the other two qualities are what I’m aching to find on iPhones and iPads.

    Specificity

    I mentioned earlier that while I wouldn’t pay The New York Times subscription fee for its content, I gladly would pay the same price for content from writers I enjoy like John Gruber or Horace Dediu. Price isn’t the issue; my perceived value of the content is. I do read the Times and plenty of other papers, but I don’t want to pay for all its content. I’m very specific about what I choose to read from every website I browse: the Times may be excellent for my editorial and political news needs, but I also turn to other papers for sports coverage and business and technology issues, not to mention the dozens upon dozens of writers I follow on all sorts of esoteric or mainstream topics I’m interested in.

    Readers habits have changed, even Robert California knows this. This is why RSS readers, Instapaper and Flipboard have been such huge successes; not because they make websites more legible, but because they allow us to curate our own newspapers and magazines from a nearly limitless pool of information.

    Perhaps if the New York Times broke its editorial sections into individual “papers”, many more people might be inclined to subscribe to it. For example, if they charged $5 a month for iPad and iPhone access to their opinions pages exclusively alongside the $20 fee for access to all their content, I’d be much more inclined to pony up the money to them in return for precisely what I want from them. To put into this into perspective, I pay Shawn Blanc $3 a month to be a member on his site (that isn’t to say that the budget needs of Shawn Blanc are those of the New York Times). The problem isn’t that customers aren’t willing to pay $20 a month for newspapers, but that they might prefer to pay 4 different newspaper $5 to get the content they actually want. Our desire for content is more specific than ever, and we are willing to pay for it.

    Putting it all together

    In the end, when speaking of a digital magazine, I’m not speaking of the literal translation of magazines into a digital format, or even of text presented with multimedia features and hyperlinks. Rather, I’m trying to describe a simple product that presents and exhibits short and long form text in a well designed layout that aims to visually aid and embellish prose, all the while taking into consideration the strengths and possibilities inherent to digital devices like tablets and smartphones. The magazine is a good template to use as a start because it accomplished this in the print world, but we need not stick to it with digital mediums. I’ve offered my vision of what kind of digital publication I would enjoy reading, one that is specific, focused on text and as free of advertisements as possible. The resulting product could take many forms: small magazines and newspapers that are narrowly focused, spiritual cousins to the Kindle Single, or perhaps a larger publication that can be customized to the reader’s pleasure.

    The onus is on publishers to discover that product. They may yell and protest that their business model cannot adequately support content that is free of ads or cheaper than it is; to which I would say: figure it out. Suck it up and find new ways to get customers to become subscribers and loyal readers of your publications. It’s not impossible, since I’ve laid out exactly what I, and surely many others, would be willing to pay for. The challenges are enormous, but adapt. Barnes & Nobles is going from a brick and mortar store to a consumer electronics manufacturer with the Nook. If they can do it, so can you. Don’t settle for the status quo; you’re already dead if you do.

    I’ll be waiting, credit card in hand.

      Double Dipping

      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.