Chris Toppon and I were hired by London College of Fashion to create an iPad app – showcasing graduate portfolios – for display at their MA exhibition in February.
iPad vs Touch Screen
Previous London College of Fashion shows had displayed student work on large touch screens or elaborate touch-enabled lightboxes. These were ambitious, visually impactful installations, but the organisers had a sense that the big interfaces didn’t deliver the ideal user experience in an exhibition setting; they were keen to adopt the iPad as a device to complement their physical exhibitions.
Showtime
The function of any app would be to display content from the University of the Arts London’s online portfolio platform Showtime. The MA graduates of 2011 have their own branded virtual space within Showtime, and this was to be presented on an iPad, utilising all of its whizzy, touch-enabled goodness.
Chris, as the lead developer for Showtime (a cakePHP app), engineered a JSON API from the back end to provide the raw data for the app.
Web app vs ‘native’ app
LCF wanted a fast, sexy, swooshy app that did loads of cool stuff – and they had lined up a design agency and Objective-C developer to deliver the project. Chris and I suggested that the thing could be built using HTML and Javascript, which would be better because:
- we would be using in-house skills
- the Showtime codebase would be enhanced in the process
- the end result, rather than being a walled garden, would be a web app framework wholly owned by the College, ready to be deployed in any future exhibition, to display any sub-section of Showtime portfolios
Phase 1: Sencha Touch development
Chris and I researched various different mobile frameworks for the project, but settled on the Sencha Touch library following a webcast by Jonathan Stark (September 2010). The TouchStyle web app – offered by Sencha as a showcase and possible starting point for developers to create their own apps – seemed to fit our needs.
Learning how to operate the Sencha code was a steep curve, and required a lot of digging through the API docs and picking up scraps from the forums. Much more in the way of online demos and more discussion on bigger coding forums like Stack Overflow would have made life a lot easier. However, there were encouraging signs that we’d picked the right platform – such as the release of version 1 in November 2010 – and, through hard graft and by working together on problems, Chris and I were able to get a functioning beta ready for testing just before Christmas.
iPads on display at the Victoria House Basement.
The iPad 'zone' before the exhibition private view.
Problems and fixes
Orientation switching: The biggest problems we had with the app were related to the way it behaved on orientation change. Thankfully, iPads were docked in immoveable frames for the exhibition, so this problem was side-stepped; however, before the app is ready for the App Store it has to be restructured in order to fix the issue.
Performance: The element I was most concerned about in recommending Sencha Touch to LCF (over native development in Objective-C) was performance. Would it be fast enough? All the web app evangelists said it would, others weren’t so sure. The app we produced for the exhibition seemed fast enough when used on our home networks, and even when we tested it at the venue. But we hadn’t anticipated the likelihood that the venue’s 2MB network would not be restricted to the six iPads, and that potentially hundreds of visitors might potentially be hogging the bandwidth on the night of the private view (this is unfortunately what happened). The venue provided a closed network for the remainder of the show, and generously waived their broadband fee. For the summer we’ll be upgrading to 10MB, to ensure stable performance across multiple iPads even if they are all refreshed simultaneously.
Caching: On the same performance note, we are planning to implement image caching in future iterations of the web app. Showtime images referenced in the JSON feed are served via Amazon Cloudfront, and on initial load up to 100 thumbnails are pulled into a single panel. Local image storage and also a progressively loading carousel will streamline the app further.
Phase 2: Phonegap
Still in progress – update to follow.
