Under the hood: mechanics of our mobile site

DUX recently launched the redesigned libraries mobile site after several months of researching, testing, and development. One interesting aspect of the project was deciding which development frameworks to use. With the continuing explosion of mobile development, there are new frameworks and micro-frameworks popping up almost weekly. For our project, we decided on the jQuery Mobile JavaScript framework for handling most of the layout and interaction components and the Leaflet JavaScript map library for our various mapping needs. Both choices have turned out well for us.

jQuery Mobile provides many benefits. First, it improves the user experience by providing an interface built upon existing mobile design conventions. It was clear very early in the design process that native applications would not be an option for us, yet users were very responsive to designs that emulated many conventions of native apps like nested lists. jQuery Mobile comes baked with many of these conventions.

Second, jQuery Mobile enjoys all the benefits of the original jQuery library, the most noticeable of which is the way jQuery irons out many of the inconsistencies that exist between various browsers. Before jQuery (or similar libraries like Prototype), web developers would have to write separate JavaScript code for each browser to accomplish frequent tasks like AJAX (which refreshes content without reloading the entire page), or to create various interface effects. Although some work to support cross platform functionality is still necessary in some circumstances, jQuery goes a long way toward providing an abstraction layer that allows the developer to write a single instance of relatively simple code that will handle the differences between browsers automatically.

Third, the combination of these benefits greatly simplifies the client-side development process and enabled us to spend more time conducting usability testing, focusing on information architecture (labeling, arrangement, navigation, etc.), improving access to existing services (databases, catalog, library information), and adding new functionality to enhance the user experience (geolocation).

The Leaflet map library is a recently released open-source map library from Cloudmade. It’s small (under 64 kb minified), well documented, fast, supports CSS3 enhanced map behavior and HTML5 geolocation.  And it’s incredibly easy to use. Initializing a map to detect and mark the user’s location is as simple as using the Leaflet example code below:

If you would like to know more about how we used these two frameworks, post a comment below or drop us an e-mail!

Author- Bret Davidson

DUX graduate assistant, Jan - Dec 2011

One thought on “Under the hood: mechanics of our mobile site”

Comments are closed.