iPad Magazine Interface Design

A great magazine is more than just a collection of articles around a theme or idea, it’s a curated editorial experience. Through layout design and copy it can take you to different places and teach you new things. The release of the iPad has kicked off the latest chapter in the history of magazine design. I’ve been working with a startup, Sideways.com, to create our own magazine publishing platform and here is what we’ve done.

Where We Started

Before the release of the iPad we worked on an iPhone magazine called TapTilt where we could test out some of our ideas. The long term goal was not just to publish a magazines but to build a publishing platform that others could use to easily bring their books and magazines into the iTunes store as an app.

Of coarse iTunes already has a book format (ePub) and there is a Kindle app on the iPhone and iPad that also uses the ePub format. EPubs work well for text but not for more interactive experiences. Magazines, children’s books, graphic novels and other publications that rely heavily on illustrations or interactions aren’t served well in an ePub document.

Looking at Other Mags

Print magazines rely largely on full page ads to cover their production costs. When porting their content onto the iPad staying with the full page format was an easy way to keep those ads intact. They are also reluctant to change their formats and content to drastically or the digital editions will not count to their overall circulation numbers. To make sure readers see those ads most magazines stuck to the idea of swiping left and right through pages like you would their print counterparts. In addition to navigating by swiping back and forth many early iPad magazines starting experimenting with new kinds of navigation.

As we looked at the magazines available for the device we wanted to see what they were doing well and where they could improve. Most brought video into their publications and tried to deal with the two different screen orientations of the iPad. But these early magazine apps didn’t take advantage of some of the basic features of the web like hyperlinking, many don’t even have live text (the text is rendered as an image or unreadable format) which means you can’t search it, copy and paste, or resize text to improve readability.

The most high profile (and successful magazine app) to date on the iPad has been Wired’s June issue. A look behind the scenes into how the app was constructed gives us a good sense of some of the challenges that many magazine publishers are facing when porting their content over.

Starting a Platform (Building with HTML and CSS)

Many of the weaknesses we found in other magazines came from our experiences building for the web. They are magazine publishers trying to understand the web and we were web designers trying to understand magazine publication. We could take advantage of sharing and discussing through social media like Twitter and Facebook. We could release our music reviews the day music was being released instead of waiting a full month to publish. We could also integrate with the iTunes store so users could preview songs directly in the app. And this is just scratching the surface of what you can do within a magazine app.

To take advantage of all this it seemed like a no brainer to use HTML and CSS as our primary way of serving up content. We also had the added benefit of having webkit (Mobile Safari) rendering our layouts. That let us play with HTML5 and CSS3 without having to worry about backwards compatibility with older browsers. This cut down on the front end development time considerably.

Since navigation was an inconsistency in some of the other magazine apps we used, it became a priority early on to experiment with something more universal. Viewing the magazine in portrait mode gave you a full page view with the navigation accessible in the upper left hand of the screen, rotating to landscape more placed a static navigation on the left side of the screen. In the next issue we are going to try taking the navigation off the landscape orientation and move it to a button up top leaving more real-estate to use for layout design.

Download the Sideways App

Publishing on the iPad is just getting started. Studies about usability (like this one by Jakob Nielsen) will continue to shape the way we design for mobile devices. One thing for sure though, it’s a compelling medium to design for.