iPhone Web App Project

Posted in Mobile, News, Web Standards

Screen shot of an iPhone movies siteDeveloping a web-based application for the iPhone (and iPod Touch) has its fair share of unique challenges. Recently, I had the opportunity to dive into such a project by developing a user interface for an application my brother built a while ago. He had created a server-based web app, just for fun, that provides helpful information for finding such things as movie theater listings, recent DVD releases, critics reviews, etc. Mainly we were using it to find showtimes for local movie theaters at the last minute (e.g., on our phones when a newspaper wasn’t handy). But we also found it useful while browsing movies at the video store in order to view movie ratings, reviews, actors, and other useful things in order to avoid renting bad movies.We wanted the web app to resemble a native iPhone app as much as possible. So I started by reading a lot of useful information on Apple’s Web Apps Dev Center – there are a lot of great “tech talk videos” that are worth a look. Perhaps the most useful resource was Joe Hewitt’s iUI project and accompanying sample applications.We’ve been steadily adding features to my brother’s original app. Some of the features include:

  • We used Ajax to dynamically fetch a publicly available JSON feed in order to display a list of movie trailers which play full-screen on the iPhone when it’s rotated into landscape mode.
  • Each theater’s address links to a Google map (on an iPhone it hands off the link to a fully-featured native Google map application).
  • We wanted the site to be available on non-iPhones as well as desktop browsers, so we are doing server-side device detection in order to send two separate CSS files, one for the iPhone and another for desktop browsers and general mobile devices.

We’re keeping the web app private for now (it’s just for fun), but if you happen to see me in person I’d be happy to give you a quick demo.