VANITY FAIR IPHONE EDITION

Translating The New Yorker to the iPhone  was fairly straight forward. The magazine, made up of longform articles and very few photos, lent itself to the small screen. Subsequently it was a success in every way. Plans then moved on to putting out an iPhone version of Vanity Fair. This would be more of a heavy life. Now the ingredients not only included long feature articles (with sidebars), more photos that go with those feature articles, but also photo portfolios and infographics. 

 

TECHNOLOGY

Rather than making a separate bespoke app, It was decided that we would utilize Adobe's Digital Publishing System for the framework. Even though DPS was already being used for all the Vanity Fair's iPad version, Adobe didn't have a seamless way to create an iPhone version, so this would have to live within the DPS iPhone viewer but actually developed using css/j-script.

 

 

COVERLINES

The biggest problem we faced was the sheer volume of content. Vanity Fair used a traditional style of cover: big image, and many coverlines. We couldn’t just shrink down the cover, as the coverlines wouldn’tbe readable. The solution was to keep the cover image and coverlines separate. The latter being accessable via a tap at the bottom of the screen, which brings up a scrollable list of coverlines. Each coverline is tappable to take the reader directly to that story.

 
 
        Cover and coverlines          (iPhone Edition)

      Cover and coverlines
      (iPhone Edition)

 

 

TABLE OF CONTENTS

In the print version of the magazine, the Table of Contents takes up 2 to 4 full pages, divided into sections. On the phone, these could not just be a long scroll, as people would get thumb fatigue by the time they got to the last story. The answer was in a Table of Contents that acts as a funnel. Needing some type of categorization, we decided on article length. This was taking into consideration that people on mobile had a finite amount of time to devote to reading on their device. The TOC became a simple screen: Short, medium, and long articles. Tapping on ‘Short Articles’ would then drop down all the short articles in the magazine. Then tapping on that article title would then take the reader to the article. Same for medium and long articles. Certain word counts were established as a rough guide as to which content would fall into short, medium, or long.

 
 
  Vanity Fair's 4 page TOC (Print edition)

Vanity Fair's 4 page TOC (Print edition)

 
        Vanity Fair TOC (iPhone Edition)

      Vanity Fair TOC (iPhone Edition)

 

 

DEALING WITH INFOGRAPHICS: THE 60 MINUTES POLL

Infographics posed another problem. Vanity Fair has a monthly page called the 60 Minutes Poll. The concept is that a group of people are asked 10 questions, all related to a specific topic. Results are displayed in percentage form, with artwork/designs to go with each question. In the print version, the poll takes up a whole page, usually in a circular form. On the iPad, the Vanity Fair art department broke it up into 10 states, 1 for each question, that the user could click through. I utilized this method for the phone, but the graphics had to be rethought from a horizontal orientation to a square format. Readers would scroll through using the previous and next CTAs

 
 
  60 Minutes Poll (Print Edition)

60 Minutes Poll (Print Edition)

 
        60 Minutes Poll (iPhone Edition)

      60 Minutes Poll (iPhone Edition)

 

 

PHOTO GALLERIES

With a magazine like Vanity Fair, which is heavy on both the text side and the photography side, I needed to make sure that readers could access those photos and portfolios in a way that took advantage of the limited space. Putting them inline with the text was not an option, as it would disrupt the flow of the story, and also make scrolling seem endless. We didn't want to put them at the end of the story, because not many people would discover them. Instead, we hid them at the top, accessable via the red and white + that would be under the main photo. Tapping this would bring up the 'photo tray' that would contain a gallery if there were more than one photo in the story. Captions would be at the bottom, which the reader could hide by tapping the screen, and reveal with a second tap.

 

      Article photos in slideshow format