Toolbox just completed a major iPad design and development project for a Fortune 200 client. Our challenge was to take a large amount of existing web and print content and re-imagine and repurpose it for mobile devices. Our charge was to ensure that iPad audiences had the rich, compelling user experience to which they were accustomed, and that we brought to bear the full spectrum of the channel’s interactive capabilities for the entire project.
It was one of those engagements that pulled together our staff’s myriad skill sets — strategy, deep publication experience, UX chops, HTML 5 software development, design and typographic acuity, custom illustration, photographic art direction, mission-critical project management and old-fashioned problem-solving. During the past quarter, we designed, produced, coded and tested over fifty interactive iPad articles and a bevy of high-touch HTML 5 templates for the client’s future use.
The project has been an overwhelming success. We helped the client navigate many of the complexities of working with HTML5, and we’ve learned a few things along the way as well.
This morning Rob and I were talking about the project’s high-points over lattes at a new coffee house that’s not too far from our studios.
We talked about five things we learned along the way:
1. Take advantage of iPad’s controlled environment.
Unlike web browsers, with numerous rendering styles served up on questionable monitors with varying pixel dimensions, mobile devices like the iPhone and iPad allow designers and developers to create with a single form factor in mind. Whether we’re designing an ereading application for the iPhone, or a web kit magazine for the iPad, the designers can approach the project with a strong command of the ‘page’ in front of them, simply because its pixel count, actions, gestures and rendering methods are a known quantity.
The iPad still presents challenges to developers and clients wanting to maintain good design. For example, it takes foresight, original design, and clear communication between designers and coders in order to properly create an animated feature article that flips between landscape and portrait mode on the fly without losing anything in translation.
2. Video can save your readers from long, boring print articles.
Rather than video being isolated from — or awkwardly tacked alongside — print design, we’re increasingly advocating for a thoughtful convergence of text, illustration, photo and video. Thankfully YouTube and Vimeo have made the short-form video normative, a standard which has paved the way for more integration.
We take our clients’ deeper-dive content (tertiary stuff that might otherwise be long, boring columns of type on the page) and chapterize the content into smaller chunks of digestible information — a perfect reason to have an inline video jukebox on an iPad app, for example. Video is increasing our clients’ traffic, it’s encouraging social sharing, and clients are asking for videos with illustration and animation that go well beyond simple talking heads.
3. Webfonts and iPads (still) make awkward dance partners
Apple’s most recent iteration of its iOS4.2 mobile operating system brings to life some significant web font improvements. Developers may recall that Mobile Safari used to crash when certain web font combinations were loaded; this seems to be fixed. As a developer, I can embed my client’s TrueType and SVG fonts within an iOS4.2 app, and that typeface will render on static and dynamic content, but two holy grails — OpenType typeface support and streaming webfonts that work in online and offline modes—are still elusive. This requires clear communication between developer and client when the issue of web fonts comes up. A recent iPad project we completed back in December served up evergreen content (unchanging articles that are always available whether or not a user is connected to the internet), but because the typefaces were installed, we had to limit ourselves to a few weights of the client’s font family. Which leads us to:
4. Start planning your offline experience early.
All of our recent iPad experiences have reminded us that clients and their designer/developers should be talking strategically about online and offline iPad user experiences from the very start of the project. What happens to your inline video content when a WiFi iPad user wanders out of range? What’s the messaging on an audio or video jukebox when a streaming video is unable to be accessed? Should you tradeoff and pre-load some teaser video content as part of the application download? How will my webkit typefaces work in offline mode? Think through these questions in light of your particular audience and their facility with technology, their propensity to be bothered if a given solution is unavailable, and in light of other content you can naturally offer in its stead.
5. We believe.
That is, we sincerely believe that the iPad is not only a compelling, well-designed piece of hardware, but that taking advantage of its form factor and nascent capabilities offers a smart, tenable path forward for our clients. All of our clients come to us because they have compelling stories which need help being told; we’re reminded daily that those stories can be brought to life using a whole host of mobile device tools we’re able to tap into.
The audiences for digital content on mobile devices is ever expanding. According to Wedge Partners, Apple will ship up to 100 million iPhones, and between 45 and 48 million iPads in 2011 alone. These projections build upon the 48-50 million iPhones and 13.5 million iPads shipped in 2010. At the recent Consumer Electronics Show (CES) in Las Vegas, twelve new mobile devices (tablets/slates/ereaders) were introduced to go head-to-head with the iPad. As Rob just mentioned, “You know you’ve reached a tipping point when my own parents are in love with their iPad.”
We've already started our next iPad project and we're looking forward to building upon the lessons learned from this successful endeavor. Look for more updates from Toolbox about the growing mobile marketplace. So: what have you learned from using that shiny new iPad you got for Christmas? Drop us a line.
— Paul Soupiset, Creative Director, Toolbox Studios, Inc.
Derek: I’m completely self-taught and have been doing hand illustration since I was a kid. My professional career as a Web developer, programmer and designer started at age 17. I interned at a San Antonio Web design firm and then worked as a programmer for Avalon Digital Solutions and a developer for Blue Clover Studio. My skill set includes multimedia and Web development using Flash, Linux, Apache, PHP, MySQL, ActionScript, CSS and JavaScript. (I’d certainly add Swift 3-D into the list, so we give it props as a web dev tool!)
Recent Comments