Developing an iPhone view of wexarts.org

Thu, Aug 20, 2009

[ iPhone and iPod touch view ]

[ Other mobile PDA view ]

[ Development document (20 pgs.) ]

The Wexner Center for the Arts is proud to announce and launch a new version of our web presence, optimized specifically for iPhones, iPod touches, as well as other mobile devices. Beyond just the presentation of Wexner Center events and information, we're also making available a Development Document for others (be they arts centers or not) to take and hopefully utilize in their own mobile development efforts. Ohio State Visual Communication Design major and Wexner Center web development student Alex Ford, who took this project from inception to launch, details the project below:

wexarts.org/iphone

An iPhone site was something that has been on the list of projects for me since I started interning here in Winter Quarter 2009. It seemed like an interesting, rewarding challenge, and the time is right: more and more institutions, corporations, and schools are developing and releasing either custom web views or native applications for iPhone/iPod touch.

The mobile site developed for wexarts.org provides a concise calendar of events, critical (and not so critical) information to help you visit the Center, a mobile view of the WexBlog, and links to mobile versions of the wexarts.org presence on sites like Twitter, Facebook, or Flickr.

The Process

The project started with a quick sketch in Photoshop, which, with the help of substantial contributions from Chris Jones (Director of Design), spawned many more design iterations throughout the project, some of which are shown below as major milestones in the design.

Three examples of early design concepts

Between other projects, I began writing some of the code for the interface. I did this without an iPhone, so I was always either borrowing someone else's (Robert and Chris probably hid theirs when they saw me approaching by the end of the project), or using Apple's iPhone Simulator, part of the iPhone software development kit.

The most obvious difference between a desktop web site and an iPhone version is the drastically different screen size. Not only are you basically limited to a single column, but the limited size makes usability and legibility paramount. Most webapps are used only for a minute or so to check on a specific piece of information. The goal of the iPhone version of wexarts.org is not to force a user to traverse a long, drawn out visual "experience" in order to get to what they want, but to be able to quickly and easily get to what they want.

The great thing about designing an interface (and writing the code to support it) for a device like this is that, unlike a traditional website, which will be viewed on one of hundreds, or even thousands, of possible combinations of web browsers, operating systems, screen sizes, and connection speeds, all iPhones and iPod touches have the same screen size, same browser, and same OS. We know the capabilities of the user's device up front, which allows us to push the limits of the web standards it supports.

Conveniently, the iPhone has a web browser more advanced in its standards than most desktop browsers. It has, among other things, a very fast Javascript engine, support for HTML5 video (which we plan to implement later as part of a unified video portal), and draft CSS3 standards support (like animation, text shadows, and gradients). These are luxuries that often are not afforded to you when you are developing for the "most common denominator". For this reason, the wexarts.org iPhone site simply doesn't function on any desktop browser except for Apple's own Safari 4, and, partially, Google's Chrome.

I don't want to get into too many technical details, but for those interested, the wexarts.org iPhone site's user interface is implemented using Javascript, drawing heavily on the jQuery library, and using (WebKit native) CSS transforms where ever possible for the smoothest possible animation.

I looked at some pre-built iPhone "UI kits" like iUI, but our design and animation standards called for a custom implementation. This, of course, was a challenge. At this point, the Safari web inspector and error console proved essential in debugging code and moving the project forward toward workable prototypes.

Development continued for several weeks. After meetings with Jerry Dannemiller (Director of Marketing and Communications) and other marketing folk, the project took on a solid direction and goals for the content were laid out. From there, the home stretch involved adding features we were missing and removing superfluous things that had crept in over the course of development.

If you have an iPhone or iPod touch, you can access the mobile site at /iphone/, or wexarts.org will automatically redirect you from certain pages. If you'd rather see the full version of wexarts.org, tap "iPhone view preferences" at the bottom of any iPhone page to set this preference.

Mobile wexarts.org for Everyone

wexarts.org/mobile running on Opera Mini
In order to support nice, smooth animation and certain special features, the iPhone version of wexarts.org is developed exclusively for the iPhone/iPod touch. The iPhone site is unusable in other mobile browsers, though some more advanced environments like Android may be supported in the future.

Because we know that not everyone that wants to see wexarts.org on the go has an iPhone, we also developed a more generic mobile site (/mobile/), which is coded for the "most common denominator" and works in most less capable mobile browsers like Opera Mini or the Blackberry browser. This is a capable mobile site as well, simply without some of the bells & whistles available to iPhone users.

This mobile view was developed with Opera Mini in mind (the most popular mobile web browser), but was tested on Android, the BlackBerry Pearl/Storm, and any other smartphone we could get our hands on. We are interested in your experience with this mobile site in browsers we haven't tested, so feel free to leave a comment with any issues/glitches you experience.

Alex Ford is a student employee at the Wexner Center for the Arts, a senior in Visual Communication Design at Ohio State, and works as a freelance web developer and graphic designer (http://alexforddesign.com).

Jean Dubuffet, Vaches au pre (Cows in a meadow), 1954

Transfigurations: Modern Masters from the Wexner Family Collection closes Dec 31. Don't miss the exhibition artnet named among the world's 25 "must-see shows."

Artists featured in Transfigurations: Modern Masters from the Wexner Family Collection

Learn more about the artists represented in Transfigurations at our dedicated website. (Educators will also find curriculum resources to support their K–12 classrooms.)