Advertisement
Theory

iPad Magazine Interface Design

by

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.

This Post is Day 10 of our Interface Design Session. Creative Sessions

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.

screens1_taptilt

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.

screens3_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.

screens2_wired

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.

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.


This Post is Day 10 of our Interface Design Session. Creative Sessions
Related Posts
  • Code
    Articles
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps ThemeForest.net? In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Computer Skills
    App Training
    Beyond Highlighting: How to Get the Most From Your AnnotationsAnnotations icon
    It's easy to highlight a passage in an eBook, but there's so much more you can do with digital highlights. Here's everything you need to know to annotate your eBooks and PDFs on your Mac, PC, iPad, and more, and then put your annotations to work for you.Read More…
  • Web Design
    Roundups
    5 Awesome Ghost Themes You Can Learn FromGhost logo
    With the world near-saturated with the success of WordPress, along came Ghost, 2013's new blogging platform of note. Born from a simple concept, the project was successfully backed with nearly £200,000 of Kickstarter pledges and released to the world as an alternative open source platform. Much like WordPress, Tumblr or any major blogging platform, Ghost is supported by an ever-growing community of themes to customize the appearance of your blog. In this roundup, we're going to take a look at a handful of some of our favorite Ghost themes and analyse why they work so well.Read More…
  • Web Design
    eCommerce
    Taking Shopify Theme Development FurtherShopify thumb
    In this final part of our Shopify series we will look at how a deeper knowledge of Liquid will enable you to make your themes even more flexible. This will help you deliver richer and more imaginative store designs.Read More…
  • Web Design
    Design Theory
    Responsive Web DesignDsfd rwd retina
    Unless you’re totally new to the industry, or you’ve been living under a rock in the faraway lands of another planet, you’ll have heard about responsive design. Even if you don’t understand it fully, it’s bound to be something you’ll have come across or interacted with in some way or another.Read More…
  • Computer Skills
    OS X
    50 Things You Probably Didn't Know About OS X MavericksMavericks400
    Mavericks, the latest major release of OS X (pronounced Oh-Es Ten), is version 10.9 of Apple’s desktop operating system. With, reportedly, over 200 new features Mavericks is no incremental update. Jonny Ive might suggest that “Apple has reimagined the operating system for the desktop”, but the truth is Apple has incorporated some of the best ideas from third-party developers and has sought to integrate some of the features of iOS (the operating system for the iPod Touch, iPhone and iPad) into it’s desktop big brother.Read More…