Vanity Fair is a favorite guilty pleasure of mine. Each month I can pretend to be smart while reading an essay by Christopher Hitchens and then turn the page to photographs of a beautiful celeb-u-tant when the words get too big.
I have the first dual iPhone/iPad application but it is lackluster. It’s not bad it’s just not particularly good. The original app let you buy one issue at a time at silly prices and would let you re-download any issues you had purchased onto multiple devices. In landscape orientation a magazine was presented as a flip book or slideshow – basically just pictures of two-page spreads in a long horizontal line. In portrait mode you swiped horizontally through the articles, tapping a ‘Go’ button to open each, and then scrolled a text window up and down for each article. If an article had images or other media – these were presented at the top of the screen. Tapping a picture, for example, would launch a slide show.
The reading experience was a little poor. Long articles had to be scrolled through vertically with no pagination. This effectively no better than reading a web page. Flipping through the articles in portrait mode presents you with a big teaser image and a headline (interspersed with reproduced ads from the print magazine). Getting from one article to the next required tapping the screen to bring up controls, hitting a back button, and then proceeding to the next article. The entire navigation experience was fidgety and labor intensive.
Oh, it also crashed a lot.
The updated Vanity Fair application for iPad is solid improvement.
The main selling point is that this application now uses Apple’s subscription API with reasonable pricing and provides access for existing print subscribers, at least it’s supposed to. The application has been given a design and UI overhaul and it’s much more usable and much nicer to read.
The app is free to download. One month subscriptions, automatically renewing, are $1.99, one year subscriptions are $19.99, and single issues are still ludicrously priced at $4.99 (of course you could subscribe for a month and cancel, but shhh. don’t tell anyone).
This version of the app is only for iPad, so no reading tiny magazines on your phone.
The new Vanity Fair app looks great. Even the startup screen is inviting. The original startup screen was a cryptic white window with an ominous logo. The new screen features a VF logo-based pattern with subtle shading. The screen looks like the inside of a box that you’re about to fill with expensive presents. All of the content has been designed to fit an iPad screen in landscape or portrait orientation. They’ve done away with trying to give you a tiny picture of the printed page. The content has been arranged in such a way that if you rotate your iPad in the middle of an article, the layout changes, but you don’t lose your place. This is an important detail that many other magazine apps overlook. For example, the Wired magazine app was more or less just a picture of each page of the magazine, slightly squished. This required pinching and zooming all over the place to read an article. With my bleary computer-addled eyes I can read the Vanity Fair app at almost arm’s length.
The user interface is reserved, well structured, and clear. There are no silly features like cover-flow or zoomy animations. Upon launch there is a library view of the magazines you have downloaded. The app includes a short, free sample magazine with a few articles and some pretty pictures of Marilyn Monroe. This library screen supports two views; a small thumbnail view, arranging magazine covers in a grid with buttons to read or buy; a large full screen view with large images of covers, which is navigated by swiping left and right. In both of these views switching to landscape orientation changes the covers into a cover-and-table-of-contents. From this screen, simply tap a cover to view the magazine.
Each magazine opens quickly and navigates smoothly. Overall the app is fast even on a first generation iPad. Navigation is far more obvious. Once you have opened a magazine in the app, you swipe left and right to navigate, and swipe up and down to read an article. All the articles are paginated vertically which means a small little swipe of your thumb will advance you to the next page. Articles which are longer than one page all feature small visual cues that there is more content below the fold. Usually in the form of a double arrow, also graphic elements sometimes strategically bleeds up from the page below.
The UI within a magazine is straightforward. Tap the page and a toolbar appears on the top and bottom. The bottom tool bar has a big scroll bar for scrubbing through all the articles and two buttons to switch back and forth between your library and the currently opened magazine. On the top toolbar is a home button, to return to your library of magazines, a back button for when you’ve followed a link (like from the table of contents), a table of contents button (which opens in a scrollable popover), the title of the current magazine (a tap on this takes you to the cover), and a browse button. The browse button activates a birds-eye browse mode for each magazine, showing you all articles and ads zoomed out and arranged horizontally. In this display you can see the relative lengths of each article – long articles are taller than single page ads and short pieces.
All magazine pages in the app are actually PNG images. Every single page. This means that a single magazine can end up being hundreds of megabytes of data. Downloads can take a long time. They have done a good job making the images sharp and clear. Good graphic design and large type sizes also help, but there are places where the text looks a little mushy around the edges.
The page images are almost all at screen resolution – 1024px x 768px. there are a few oddball long form pages which feature info graphics or tables or other things that don’t break over a page easily. This means there’s no extra resolution to zoom into. Zooming is not enabled for these pages unless you enable accessibility zooming on the iPad. When you do zoom in on a page in a magazine – you get blown up too small image blocky pixel text included. Since there is no text in a PNG image, the magazine can’t be searched, one can’t copy out text for reference or quotation, and the brilliant built in VoiceOver screen reading feature can’t read the page aloud. This app was not built with accessibility in mind.
I’ll cover more on the problems with PNGs in the technology section below.
Interactive features are superimposed over each page. This gives the appearance of having slideshows and videos inline in the page, which is nice, but standard iPad features like swiping to navigate, zooming in on an image, or letter-boxing and pausing video are not supported. Some images have pinch-zoom capability but not all. The ones that do have instructions next to the image.
Links to external websites, or social networking features like posting an article to twitter are indicated through custom icons. The icons look nice enough, but it isn’t really clear that they are tappable (because they’re not, they’re just part of the PNG page, there is an invisible hotspot over the image.). Some pages have social features. Some don’t. It appears that only articles which are also published on the Vanity Fair web site are shareable. This is understandable restriction, but the implementation is weird. The placement of the icons varies per article. Sometimes it’s at the top, sometimes not. The actions aren’t available on every page. Therefore if you’ve finished an article and you want to tweet it to your followers, you have to scroll up to find the button on the page someplace. A consistently placed sharing UI for each page (a toolbar item, for example) could solve this problem by opening a menu of sharing options for the article. When an article is not available for sharing the UI would be inactive.
These interaction features all feel bolted on and unsatisfying. The previous version of the application did a better job with this by linking to slideshows in standard iPad photo controls and using a standard video player for included videos.
While I love the bird’s-eye browsing view so far (I like the visual overview of the whole magazine and the article length) if you swipe past an article you’ve already read and scrolled to the bottom – the browse view keeps the article in the scrolled-down position, hiding the masthead of the article. I realize the app is trying to help preserve my reading state (i.e. keep up with where I left off with each article) but it’s not relevant in this view.
Non technical problems
As a subscriber I’m able to download each new issue as they become available. At the moment though, there’s no way for me to browse back-issues that I received over the course of my subscription. I can understand that from a business perspective, but there’s also no way to buy back issues either.
I’m sure they haven’t digitized their entire collection yet, but should they have the last year or so that they’ve published digitally. Vanity Fair provides no way to migrate issues from the old app to the new app. This means you have to keep around that old app if you want to read those old issues. I understand that the old issues would have to be converted to the new format, and I recognize there are probably business reasons for not doing that, but as a pretty loyal customer, it sucks.
The library view in the application, which shows all the magazines you’ve downloaded, features a big, ugly banner ad inviting you to subscribe. Fair enough, it should at least be handsome though. Once you’ve subscribed that silly ad doesn’t go away. This ad only shows up in the thumbnail view. I use the full screen view.
Connecting my subscription, my vf.com account, and the iPad app was like passing kidney stones. I followed the in-app instructions to connect my iTunes account to my subscription. This involves filling out some information in a web form (this opens in a little web view from within the app) that is used to locate your account. You can search by your mailing address, your account number (if happen to have a mailing label around the house), or by logging in with your vf.com account.
The system found my account without a problem…but then nothing happened. Nothing continued to happen. So I signed out and tried again. This time it told me my account was already in use. So I signed in again. Nothing happened some more. I tried logging in at vf.com. I updated my profile. This it the only thing you can do at vf.com. Nothing continued to happen on my iPad. I found the subscription management link, which took me to another Condé Nast site. I tried logging in there with my vf.com account. This didn’t work. I tried searching for my account by address. This worked. I tried to set up the subscription account with my vf.com username and password. That didn’t work. My email was already in use. No matter. Let’s check my subscription. Aha! The print subscription was expiring this month, so of course the iPad has no magazines for me to download because I have none “left” in my subscription. If the iPad app had told me this….I could have just bought a subscription 30 minutes ago. OK. I renewed the print subscription, went back to the iPad app. Nothing continued to happen. It wasn’t finding my account anymore. BLARG. I cancelled my subscription, and signed up on the iPad. Now both the iPad is downloading issues, and the subscription site says I’m up to date.
I am a persistent nerd. I was determined to beat this problem so I could read my stories on the train to work. Regular people are not me. Regular people will give up immediately.
This app is a pleasure to use and read from, barring some of the issues I stated above. I hope they continue to make improvements and perhaps move away from publishing the magazine as a giant stack of images.
The subscription linking mess is terrible. Knowing what I know now, I’d have saved myself an hour of anguish and just purchased the subscription on the iPad right away. My time and mental health are far more important than $20 and I like the content enough to pay twice. If the subscription linking process isn’t fixed, I doubt they will gain many readers.
Condé Nast is using Adobe’s Digital Publishing Suite to build this app. This is a combination of development software and distribution services that integrate with other Adobe products, primarily InDesign CS5.5.
Based on the sales copy it looks like the publisher creates content in inDesign then migrates it to a ‘folio’ file format via tools added on to inDesign and then is finally published to Adobe’s service for distribution.
The ‘folio’ format appears to be a container format which holds PNGs, PDFs, or HTML files and supplies an interactivity layer. Folio files are viewed by Adobe’s “ContentViewer” which is available for iOS and Android. Adobe provides a service which allows a publisher to create a somewhat customized, branded app that can be distributed through Apple’s app store or Android Market.
Adobe provides the integrated toolset (their customers are probably using InDesign already) and the distribution mechanism and then charges per issue for distribution. This is apparently not cheap.
I can imagine Condé Nast probably needs a technology partner to help move to digital publication. I’m sure they have many bright designers and artists, and probably a good technology team managing their web sites. Keeping a stable of really good iOS developers in house is probably not cost effective, and going on their own is risky. Partnering with Adobe, though, seems like letting the fox into the hen house.
From Adobe’s site, it looks as though their folio container format can work with multiple types of content:
- Create, manage, and share .folio files from within InDesign CS5.5 using the Folio Builder panel included in the Folio Producer tools.
- Create publications using PNG, PDF, or HTML file types.
The Vanity Fair team has chosen to go with PNGs. I noted above that this is not ideal. In addition to the usability concerns, download size, lack of search-ability, etc, screen resolution PNGs are not very future proof. For example, we won’t see a “Retina Display” iPad this year or even the next. But we will someday. When that day comes, every back issue will look like a blurry photocopy. If the content were created as HTML or PDF it could scale to fit the screen or even be converted to some other format for sharing, archiving, or printing.
I don’t want to blame Vanity Fair too much though. I wouldn’t be surprised if the PDF option creates absurdly huge files, and the HTML option looks terrible.
Speaking of an HTML version, a demo
All this thinking about deploying magazines to a tablet reading device in a friendly format got me thinking about how much one could actually accomplish with plain old HTML.
I took the original HTML, stripped out everything that wasn’t the article, and wrote a custom stylesheet. I’m using Google web fonts which are reasonably close to what you’d find in a print issue of Vanity Fair:
These are, of course, cheapo-free web fonts and a quality publishing house like Condé Nast would, of course, license proper fonts.
The demo is formatted to fill the screen on an iPad, so it looks very much like one of the pages from the app – except it’s HTML text that could scale if needed, be indexed and searched, and even printed out for a cave man to read.
The CSS used is all standard, excluding a few media queries targeting mobile safari for the iPad, so this looks pretty good on most browsers even IE 7 and 8.
I’ve been following the iPad magazine thing for a while, here are some more articles on the subject:
- Highly readable web templates
- Oliver Reichenstein at iA has had a lot to say about iPad magazines and the interaction design of reading apps
- Khoi Vinh doesn’t like eMags or iMags
- Condé Nast hates Terry Chay (Similar subscription woes)