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.
