Behind the scenes with The Mobile Playbook: A cross-platform HTML5 site designed for tablets first

Last week Google launched The Mobile Playbook, a resource guide for executives on how to implement mobile into their organizations and win with mobile.  Today, we’d like to shed some light on the actual work that went behind themobileplaybook.com and what that means for advertisers from a technology and mobile strategy standpoint.

We built The Mobile Playbook in partnership with Hello Monday, a creative agency with strong capabilities in HTML5 design. We saw this site not only as an opportunity to showcase useful content but also as an opportunity to demonstrate the power of HTML5.  To put it another way, we wanted to walk the talk.  It is one thing to recommend that advertisers optimize across screens and another to actually do it ourselves.

To that end, we required that the content be staged on a mobile website instead of an app because of the cross-platform reach we could get from this approach; themobileplaybook.com can be viewed not only from tablets and smartphones but also from PCs. In optimizing for PC, smartphone and tablet,  we created two versions of the site -- one for smartphones and one for tablets. The PC optimized site is actually the tablet version with some minor modifications to the UI.



The Mobile Playbook posed unique design challenges as well. The core playbook content itself is long-form, representing 5 chapters and over 6,000 words. Our goal was to engage users and get them to read as much of the playbook as they could. Most of the creative energy went into thinking about how to make the playbook easy to read, visually stimulating, and fun to interact with -- an opportunity seemingly made for tablets. Based on our own data and other research findings, we know that users engage with tablets primarily as lean-back content consumption devices.

Instead of some of the original format ideas we considered such as an ebook or PDF presentation of the content on the tablet, we worked with Hello Monday to explore the interactive potential of HTML5 and think about how the long form content could be best presented through a tablet browser window. According to Andreas Anderskou from Hello Monday, “Inspired by interactive magazine apps, The Mobile Playbook utilizes a dynamic progress bar, interactive navigation menu, example gallery, and the ability to swipe through content. What's unique about this experience is that we've brought app-like interactivity to the user without requiring them to download an app. To emulate app functionality the content is loaded upfront without the need to ever load a new page.”

“In our time working on the site, we’ve seen that HTML5 has the potential to take browsing experiences on the tablet to the next level. Since modern browsers are rapidly deploying with HTML5 capabilities, the end user no longer needs to download specific apps or plugins to enjoy a consistent experience. We hope that this will inspire others to design around the capabilities of the tablet and HTML5 mobile websites to enhance the browsing experience,” says Anders Jessen, Lead Developer at Hello Monday.

We were fortunate to partner with Hello Monday to illustrate the power of HTML5 websites and tablets. We hope you’ll enjoy www.themobileplaybook.com from your tablet or whichever device suits you.

Posted by: Johanna Werther, Sr. PMM Mobile Ads

Behind the scenes with The Mobile Playbook: A cross-platform HTML5 site designed for tablets first
Rating: 100% based on 975 ratings. 91 user reviews.