Developing an iPhone view of wexarts.org
[ 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:
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 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.
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.
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
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).