Mark Porter

Editorial design

New work: The Guardian iPad app

October 13th, 2011

Promo+front
(Click all images to enlarge)

Hooray! The Guardian iPad edition is in the app store at last. It’s been such a long wait I’m guessing that expectations will be very high. Well I for one am happy that it succeeds in what it sets out to do — deliver the content of the printed paper on the iPad in a form that feels completely at home on the device.

There was a debate at The Guardian about whether it should be more dynamic and live; but as the website and existing mobile apps are already serving up hot fresh news, we felt that this time we should make something for the newspaper junkies who wanted a more “print-like” experience. The aim was to keep some of the qualities that make print lovable and engaging, but to avoid the trap of imposing a print design on a digital device.

Stage one was brainstorming, sketching and paper prototyping with the in-house team plus me and the redoubtable Jack Schulze and Matt Jones from Berg. We had lots of fun thinking about what we should/shouldn’t try to adapt from print, and exploring alternative architectures and UIs. We ended up with enough ideas for about 10 apps.

But to me it was always about how to capture the essence of the print experience and translate that into forms and behaviours that felt right on the iPad. Editorial websites and apps tend to impose navigation by means of lists and menus; the large amounts of content and the relatively small windows that we view it through on monitors and mobile devices makes this is a logical and efficient solution. But something important can get lost — the hierarchy and the editing decisions that create distinctions between stories.

When we look at the pages of a printed newspaper we take in a range of stories at once. Some are big, some small; some are obviously more important than others. The decisions about space, position and treatment are the product of the experience and values of the editors, and when you buy a printed newspaper you’re not just buying the words and pictures, you’re also buying those values and judgments.

What’s more, when you turn the pages and skim the headlines, images, and layouts, it all combines to build a picture of the whole paper in your head even if you don’t read any of the stories.

So a successful adaptation of a printed newspaper to the iPad should try to preserve some of those choices and hierarchies, and allow readers to skim the paper as a whole before they dive in to individual stories.

front_international

It was these thoughts that led to the main innovation here, a series of secondary front pages for the different sections of the paper, each no more than 2 screens deep. They act as maps of the content, reflecting the topography in a condensed form (in this case the varying tone and scale of the stories and their configuration in the printed paper). And you can skim the whole issue by swiping through them, just as you scan a printed newspaper by turning the pages. It’s an invitation to lean back and explore rather than lean forward and go straight for what you know.

front_sport

Pushing for these principles and finding the design solution for them was my biggest contribution to the project. But even though I’m just a hired gun at The Guardian now I still feel like their visual design approach is kind of my baby, so I also got pretty obsessive working with the in-house team to make it look sharp and modern and Guardianesque. In many ways this is much simpler in an app than it is in a website; you’re designing for one device and one OS so you knew exactly what it can do and how it will look and behave. Even so, it took a lot of time and effort, and a lot of top design talent, to bring it to fruition: the amazing Andy Brockie was there from the very beginning to the very end, Barry Ainslie put in a few hard months and John-Henry Barac helped out too. The fine-tuning continued right up to the final whistle.

Why did it take so long? It’s partly a result of the Guardian’s decision to develop it with their own resources, rather than send it off to Bangalore or Belarus to be coded. But it’s also because of the fascinating work that went on behind the scenes building a bridge from print to iPad.

Unlike the iPhone and Android apps, which are built on feeds from the website, this one actually recycles the already-formatted newspaper pages. A script analyses the InDesign files from the printed paper and uses various parameters (page number, physical area and position that a story occupies, headline size, image size etc) to assign a value to the story. The content is then automatically rebuilt according to those values in a new InDesign template for the app.

It’s not quite the “Robot Mark Porter” that Schulze and Jones imagined in the workshops, but it’s as close as we’re likely to see in my lifetime. Of course robots do not make good subs or designers, so at this stage some humans intervene to refine, improve and add character, particularly to the article pages. Then the InDesign data goes into a digital sausage machine to emerge at the other end as HTML.

Getting all this working was a massive project for the Guardian’s Editorial Systems Department, just as complex as the development of the app itself. So a year is really not so bad. We’re still a long way from totally automated design (thank goodness), but it’s fascinating to see how far you can get with automation, leaving the subs and designers to add the human touch.

Promo+fancy

As I said, I’m pretty happy. There are still things to improve, but there comes a moment where you just have to launch and learn. It’s still not clear what is the best way to publish a newspaper or magazine on a tablet, or even what the Guardian will do next on the device. But I think we’ve made a good app and contributed some new ideas.

Finally… As well as those already mentioned, a shout out to lead OS developer Martin Redington, product manager Jonathon Moore, and all the other amazing people who helped make it happen. And thanks to the guv’nor — Guardian editor Alan Rusbridger — for his encouragement and patience. He said he wanted it out by Christmas… But he meant 2010. I hope it was worth the wait!

Update. I forgot to mention the indefinable Luke Hoyland. But there are so many I should probably stop adding names now.

http://itunes.apple.com/gb/app/guardian-ipad-edition/id452707806?mt=8

http://www.guardian.co.uk/mobile/ipad/guardian-ipad-edition

http://www.guardian.co.uk/help/insideguardian/2011/oct/13/guardian-ipad-edition-newsstand-app?CMP=twt_gu

14 Comments »

  1. Comment by Tobias Gärder — October 13, 2011 @ 12:00 pm

    Congrats! It looks really great (judging by the screenshots now, haven’t been able to try it personally yet), and – as always – excellent typography. Got to get my hands on it and try it out soon.

  2. Pingback by Infovore » Links for October 13th — October 13, 2011 @ 1:01 pm

    [...] Mark Porter » Blog Archive » New work: The Guardian iPad app "Unlike the iPhone and Android apps, which are built on feeds from the website, this one actually recycles the already-formatted newspaper pages. A script analyses the InDesign files from the printed paper and uses various parameters (page number, physical area and position that a story occupies, headline size, image size etc) to assign a value to the story. The content is then automatically rebuilt according to those values in a new InDesign template for the app. [...]

  3. Pingback by The Guardian on iPad « magCulture.com/blog — October 13, 2011 @ 7:36 pm

    [...] Update: Mark Porter talks about the app. [...]

  4. Comment by Tim — October 14, 2011 @ 10:02 am

    Thanks for sharing some of your process and insights. Fascinating.

  5. Pingback by Quintatinta — October 18, 2011 @ 10:03 am

    [...] Leslie ha hecho un análisis más detallado. Mark Porter, también. El periódico tiene videos y promos para hacerse una idea. Y hay una oferta gratis [...]

  6. Comment by John — October 18, 2011 @ 12:46 pm

    Interesting account and achingly nice results. Looking forward to trying it. Well done.

  7. Comment by Miles Cheverton — October 18, 2011 @ 8:19 pm

    Hullo. I wrote a quick blog post about this, entitled “The last spasms of a dying business model – Why the Guardian iPad App is a step into the past”

    You can read it here if you’d like :)

    http://thetalldesigner.com/blog/2011/10/15/the-last-spasms-of-a-dying-business-model-why-the-guardian-ipad-app-is-a-step-into-the-past/

  8. Comment by markporter — October 19, 2011 @ 8:58 am

    @MilesCheverton. Thanks for the link. It seems some of your commenters do understand and appreciate the aim of the app. There is a website with live updates and comments which is perfectly readable on the iPad. The app is intended for a different audience. Martin Belam writes interestingly about this topic here: http://t.co/GMQXVZHN

  9. Pingback by Guardian iPad app « — W210 blog — — October 20, 2011 @ 4:17 pm

    [...] The Guardian iPad app and its development as described by Mark Porter. [...]

  10. Comment by Ingrid — October 23, 2011 @ 2:49 pm

    Cool. Interesting to hear about all the processes that had to be developed.

  11. Pingback by Adapting Ourselves to Adaptive Content (video, slides, and transcript, oh my!) « Karen McGrane — September 4, 2012 @ 2:15 pm

    [...] I’ll mention it again, because I think it’s a great point. So the Guardian had to solve the same problem again for the iPad and they said, “Great, we’ve got a lot of editorial judgement going into our print [...]

  12. Pingback by Some thoughts « Bigger Picture Group F 2011/12 — October 30, 2012 @ 4:20 pm

    [...] days news. (Mark Porter, the Guardian editorial designer, explains this much better on his blog: http://www.markporter.com/notebook/?p=1080 11th paragraph most [...]

  13. Pingback by The importance of adaptive content - Insight Database — January 8, 2013 @ 12:03 pm

    [...] earlier. I’ll mention it again, because I think it’s a great point. So the Guardian had to solve the same problem again for the iPad and they said, “Great, we’ve got a lot of editorial judgement going into our print edition. [...]

  14. Comment by John — January 11, 2013 @ 10:27 am

    Good post!

RSS feed for comments on this post. TrackBack URL

Leave a comment