Optimising sites for the iPad

Published:  May 16, 2011
Optimising sites for the iPad

Late in 2010, I was approached with a particularly interesting case study that I’d like to share with you. An iPad-related tender arrived from the Victorian Government Department of Education and Early Childhood Development (DEECD). In short, it is running a trial in Victorian schools where iPads are being used for various purposes to determine their feasibility and best practice applications. It’s a fascinating project, covering establishments such as the Royal Children’s Hospital.

To showcase the project, DEECD wanted a public website heavily optimised in its presentation and content to fully leverage and utilise the iPad.

Being an iPad optimised site meant we had some new user functions available, which are not possible on a typical mouse driven desktop website. We used swipe, touch (to replace clicking), and drag and drop. The trick was matching these up against the site map and determining the best combinations. For example, the limited screen real estate on Home gave us an opportunity to enable the user to swipe to see more of the feature case studies (i.e. we could now use one space on the screen to present a bigger pool of items).

Touch was great for the main menu (with big buttons for fingers). Drag and drop was a great fit for the Multimedia Gallery, where users can drag photos to enlarge, and videos to play.

Fixed resolution
The iPad screen works to a fixed resolution, so it’s very contained. Rather than cheat and incorporate lots of scrolling, we disciplined ourselves to determine smart ways to use the screen space and interactivity. Orientation was also a key consideration. Yes, that means adjusting the site so that it changes when the user turns their iPad on its side – scary. To do this justice, our graphic designers were again involved, rather than leaving it to the discretion of the programmers. A real positive of optimising for the iPad was that we could build to a single operating system, one browser and one resolution, therefore fully utilising HTML 5 and CSS3.

Business case
When researching and planning the build, we quickly discovered that there are very few quality iPad optimised sites in the world at present, aside from, say, nike.com. Most sites instead present in their traditional generic desktop browser version. Therefore, many of our references came from observing layouts and interactions used for iPad apps, such as ABC News and Flipboard. This project also got us thinking about what the business case is for optimising a website for the iPad in 2011. I’m honestly not convinced I could present one for you in terms of straight business economics, although I don’t discount the answer may become evident. I would propose a less tangible benefit is that optimising for the iPad makes agencies rethink how content and interactivity can be presented.


Thumbnail image copyright Carlo Mussett – cargocollective.com/carlomussett

Leave a Reply

Your email address will not be published. Required fields are marked *