Toolbox Studios Blog

Five things you need to know about iPad development

 

 

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.

re:form for sparkhouse

In 2009 Augsburg Fortress Publishers launched sparkhouse. This new Minneapolis-based resource design group was formed to “reimagine resources like VBS or Bible study in a way that creates new vitality, change, and relevance in Christian communities.”

This month, sparkhouse launched a new curriculum called re:form – the only confirmation program that offers innovative resources for pastors, youth pastors, volunteer teachers and parents who want to radically empower youth to tackle the powerful ideas of faith and theology. re:form makes confirmation an interactive experience through creative, culturally relevant and provocative videos, illustration, humor, and activities that speak to kids on their level and encourage them to explore and make their own personal discoveries about their faith journey.

Its first edition recently rolled off the presses and into our hot little hands. It features books and videos chock-full of thousands of intricate, hand-drawn illustrations, each rendered in the quirky style of our creative director Paul Soupiset. Those pen and ink illustrations were watercolor painted, scanned, color-adjusted, and fed into a production workflow that simplified our client’s video and print production processes. Several main pieces work together to create the re:form curriculum:

• re:form two-DVD Set — We hand-illustrated forty hilarious animated short videos which frame and begin each lesson, framing the tough theological questions that kids are really asking, like “Who wrote the Bible?” and “Why does God let bad things happen?” The Two-DVD set is rooted in historic Christianity yet speaks to kids in their own voice. 
•  re:form Anti-Workbook—A hands-on 192-page Anti-Workbook is the centerpiece of each kid’s confirmation experience. It’s a sturdy, full-color, wire-O bound journal chock-full of activities and ideas for groups and individuals, with space to journal and doodle, and extras like pullout cards and cool stickers. re:form Leader Guide quickly preps teachers for each lesson and activity. 
• re:form Gallery—re:form prompts kids to make videos, take pictures, interview people, and create stuff. Then they can upload all of their artifacts to an online portfolio at the re:form gallery, where they can share with their local congregation what they’ve been learning. re:form empowers youth to discover for themselves what they believe. 

Here's one of 40 videos produced for the first edition:

SXSW Interactive and Youth Media

The Toolbox Studios delegation hit the recent 2009 SXSW Interactive Festival (sxswi) with several ambitious goals—to engage with other thought leaders in the interactive design space, to share best practices, to create new youth media collaborations and to validate a few technological hunches based on evidence we've been researching.

We fanned out, employing the divide and conquer technique, given the breadth and depth of this year's offerings. We made ample use of Twitter to liveblog our findings, comment on sessions, and have a little fun as well.

Initial reports suggested a 38% increase in attendance at this year's conference—many sessions were filled beyond capacity and the creative energy was palpable. 

Toolbox creative director / youth media account director Paul Soupiset has been distilling his notes from the five-day event and has shared the following six takeaways for youth media publishers, designers, game developers and marketers:

6. Teens [still] don't Tweet. While Twitter was hands down "the" tool at this year's SXSW Interactive (and one we recommend be part of any company's corporate communication plan... see more at #5), the 140-character micro-blog trend isn't being as eagerly adopted by teens. Anastasia Goodstein's YPulse teen panel again validated this hunch: You're just not going to reach a majority of 14-to-18 year olds with the über backchannel. Better to occupy the mobile space and MySpace. Facebook is there as well, but the "I wanna customize my space" fave MySpace is still top dog among this cohort. Should be interesting to see how this trend develops as Facebook and Twitter continue to dominate and grow the microblogging/lifestreaming space.

5."Not making plans is so totally Web 3.0." — this line from Caroline McCarthy, a CNET News staff writer, framed a second, related truism—Twitter was clearly still the rockstar and darling of sxswi. As McCarthy pointed out, when lines to get into parties at the Austin confab got too long, flash-mob intelligence via Twitter created new meetups, new parties, on the fly.

With a multitude of third-party tools and add-ons, Twitter offers increased freedom and mobility to stay on top of news and events in whatever niche you're interested in following.

And to those following the youth crowd, just because they aren't all on Twitter (yet), that doesn't mean their socializing isn't happening on the net—teens are embracing MySpace and Facebook, but moreover, they're embracing the relationships emerging from those connections. As Harvard fellow and youth media scholar Dana Boyd points out, "We have this belief that kids are just addicted to social network sites. If anything, they’re addicted to their friends. This “addiction” to friends is precisely what makes social networks so important, especially for tweens, who are more limited in their socializing options (until they can drive). There’s school, extracurriculars and the movie theater on the weekends, but with social networking they can be sure not to miss a single OMG moment.”

4. Get out of the way and let your audience explore. Interestingly, this reminder came out of an interactive game development session, although it was emphasized in later Web 2.0 panels as well. As one gaming expert stated, "the complexity of our gaming interfaces should level up with our users as they proceed [with gameplay]." The key idea here seems completely intuitive, but it found new currency with me at the Playing On! Interface Lessons from Games session: when we design games, instead of front loading the game with tutorials or a discursive set of rules, we should allow the player to start gameplay and learn progressively.

In the 2.0 panels, this prioritization of the audience surfaced more in the context of public relations and customer management. With social media, we all know you can't exert control over everything online as you once could. You can't play by the same rules, either. You have to learn to listen to the conversation, insert yourself/your company genuinely, and be okay that you can't predict or dictate the outcome. You can only monitor and react to it.

3. Design is still king. Evidenced everywhere I turned. Good design creates context. Good branding creates curiosity, loyalty, buzz and desirability. Too many examples to name. Okay, maybe one: Alex Bogusky's B-cycle (bicycle sharing) initiative.

2. It's all about R&R. Not rest and relaxation, but rewards and reputation. A fascinating seminar borrowed from the language of game playing mechanics and found parallels to be brought to bear in all of our social media apps. Rewards will need to move beyond simple point-tallying and actually show bling for levels attained (exemplary games display which level a user has achieved, which in turn earns him/her instant street-cred). The best of these apps incorporate some kind of collecting mechanism as well—a metaphoric trophy case—to show off those accumulated points. Whether it's medals on an army officer's uniform, merit badges on a girl scout's sash, or a collection of karate level belts, humans collect visual indicators of our advancement. Finding creative ways to do this on the application level rewards your avids, and offers a clear path for noobs who want to engage with your brand.

1. A Social Vote for Change Probably the most memorable session I went to was a lunch at Stubb's BBQ, where the topic was "Social Media for Social Change" — a lot was said about the distinction between using social media for charity and using the same tools to effectuate actual social, systemic, societal, or institutional change. 700 people RSVPd for this lunch. I was lucky to arrive early, which means I got in the door, actually ate a great brisket lunch (ironically/awkwardly eating my BBQ sitting next to two new friends who work at PETA2), and settled in for the conversation. The panelists included pioneer Beth Kanter, David Armano, Scott Goodstein,  Stacey Monk, James Young and Randi Zuckerberg. For an engaging overview of the conversation, read Kanter's brilliant summary blogpost here.

Behind the Bowl games

Each year, Toolbox designs and manages the Valero Alamo Bowl site (www.valeroalamobowl.com) and the AT&T Cotton Bowl site (www.attcottonbowl.com). And each year we send a cadre of Toolboxers to the games to help the event staff manage game stats, upload content and track user activity. 

Above: The Valero Alamo Bowl staff sent us this memento as a token of their appreciation.

Below: Mark Broderick (our food & beverage account director) scored extra tickets for his family to see his alma mater, Texas Tech, take on Ole Miss in the AT&T Cotton Bowl in Dallas.

Redesigned, Refreshed, Relaunched

We've been busy designing and launching several new Web sites for our clients:

	ARCE: The new site for the American Research Center in Egypt -- the only American non-profit organization dedicated to preserving historical and cultural treasures of ancient Egypt -- features e-commerce solutions for donations and membership, as well as event registration.www.arce.org.
	Verbal Ink: International electronic transcription company Verbal Ink unveils its new brand and online presence at www.verbalink.com.
	CCN: Cacheaux Cavazos & Newton, an international law firm, debuts its new bilingual site that includes a live U.S. Dollar/Peso rate, RSS feeds, and cross-referenced attorney bios and practice areas with downloadable vCards. www.ccn-law.com

down in the photography studio

Man, we really, really want to tell you what Steven was shooting Thursday down in the photography studio. It was creative and interesting and involved a custom-made metal surface, a brightly colored container, a slide, a hot glue gun, the illusion of something spilling and

CS3 Dreamweaver

he "urned" it

sometimes you need a little extra caffeine when you're working on your thirty-second consecutive hour awake.

hats off to you, Derek.

coffee urn. toolbox kitchens. found this morning.

..:: podcasting studio podcast:remix ::..

the logo process

Maybe a year after we created the AIRS identity last year, we went back and revisited the original sketches and steps it took to arrive at the final concept; in many ways the final solution was a departure from the original vision; however, seeds of the original idea can be found even in the initial thumbnail. this kind of process stuff interests us here at toolbox. anyway, here's the evolution of a logo: