My latest work assignment is a major technical and product revision of hemmings.com, the web presence Hemmings Motor News’ excellent automotive magazines.
As a warm-up to the project I worked with Hemmings’ developer, Jeremy Meerwarth, to create a simple mobile-viewable version of the site. The majority of the current site usage consists of people viewing Hemmings’ premium classified ads so our initial approach was to satisfy the need for a basic mobile-viewable classified ad. In this scenario we were considering a probable entry point of a “Share this ad” email or Facebook post. A user shows up on a classified display page, we detect user-agent and render the mobile page as needed. We knocked this out in a day with some simplified templates and they looked fine. This is great if someone shares a classified ad by email or social media but otherwise it’s an isolated page with no way to navigate and explore other content.
Creating a navigable mobile classified site with multiple entry points was a different problem altogether.
Initially we explored how to modify the site’s main templates to send the site into a mobile template ‘mode’ via user-agent detection. Light prototyping here showed this to be a trainwreck of dependencies. All 
of the content on the site was formatted for a 960px viewable screen width. The nested conditional spaghetti needed to accomplish merging the mobile site into the main site was way out of scope – and it felt wrong.
Our conclusion was that we needed to send mobile user agents to their very own version of the site (a typical approach across the web). Through Apache’s mod_rewrite we can detect mobile user agents and send them to our sub-site and use some easy cookie checking to let people jump to the full site as needed. Now that we were working with a blank slate we started looking for formatting and design options and any libraries that might help us.
Enter IUI – originally developed by Joe Hewitt to solve the exact same problem we were facing. It’s a lightweight javascript dispatcher pattern that uses styles to transform simple divs and lists into a user experience nearly indistinguishable from iPhone app design conventions. Animated navigation and mobile-friendly design and readability are built-in and the ramp-up time was less than one day.
The resulting site allows users to navigate from a stripped-down home page to search and browse classifieds with a familiar iPhone-like user-experience. The amount of nesting and navigation needed leaves something to be desired but this app is so fast, loading only div content via ajax rather than refreshing the whole page, that load times are acceptable even on Edge networks. We could definitely use some polish but the bones are solid and it looks and feels great on any webkit mobile browser. Huge props to the maintainers of this code, it helped us produce something very polished in a brief period of time. Check it out.
There are some disadvantages to the IUI approach. As it stands, the ajax loading of new pages cancels script execution in those loaded div elements. This can be unwieldy when you really try to optimize an interface or add 3rd party elements. My primary criticism of IUI is the same criticism I have of any sufficiently complicated framework – as soon as you try to do something really hard you end up fighting the framework.
For instance – IUI’s handler scheme can make it hard to do deep linking. To accomplish something like a deep link into a classified ad I did some special server-side hacks mixed with sophisticated rewrites to create the expected behavior. We also had to do some minor hacks to bolt on analytics.
Frankly, I can’t bitch about anything. The libraries are clear and well-written and hacking in work-arounds was clean and possible. I highly recommend IUI as a starting point for your mobile site or a valuable project to contribute to. IUI helped us cover the technical and general design details and the mobile site is a usable way for our customers to view and find ads. It turns what might be a daunting undertaking into a no-brainer and even if it won’t fit your complex needs out of the box it is a good place to start hacking and borrowing.
Less than 1% of our existing traffic comes from mobile devices: to some extent we answered a question that nobody was asking (update 8/2010, mobile traffic is now over 3%). What was the value of this effort when so much of the primary website needs serious attention? The really valuable outcome of creating a mobile version of the site was the process of subtraction – stripping away the noise and exposing the core structure of Hemmings’ classified content. Glaring weaknesses in the information architecture emerged and kicked off an internal project to revise our entire approach to makes/model taxonomy. We also realized that this project doesn’t fully reflect how our customers might actually want to interact with our content from a mobile device. We realized we have to do a lot more work on organizing our ads and stories into a curated channel inside the app so it feels more like content and this extends to the entire web property. Finally, it was a great way for our two-man development to get revved up for our major upcoming redesign project.
Anyhow, it’s a good start. Stay tuned. -sb