Power Creative is fully embedded in the blogosphere with several folks at the agency, posting their musings and insights for your weekly enjoyment. Peruse the blogs below and come back often!

jQuery Mobile for Rapid Prototyping and Development

jQuery Mobile for Rapid Prototyping and Development

When developing web-based applications for mobile devices, or even just simple web sites, sometimes it pays to travel the beaten paths, use the familiar tools, and aim for the known landmarks. The mobile space is constantly changing, however, and finding your way through a project often requires a bit of intrepid exploration and trailblazing. It also helps to have the right tools.

For that reason, we're always keeping our eyes open for new technologies, processes, and shortcuts to help us give our clients the best answers to their questions and to their customer's needs. Tools like the jQuery JavaScript library (and Prototype before it) have enabled us to more effectively and efficiently meet our goals and find those answers.

jQuery Mobile logo

Another such tool is the jQuery Mobile web framework, which we've watched since it was first announced. Alpha versions showed early promise, but weren't stable enough for our projects. We've revisited it recently, however, and found the last few beta versions before the 1.0 release full-featured and stable enough to base a small project upon.

Like many frameworks and JavaScript libraries, jQuery Mobile provides its own web development paradigm, including a new navigational model and URL structure. Its greatest benefit to us, at least initially, was in facilitating the rapid prototyping of a touch-enabled mobile interface. The framework provides a solid base that is already cross-device and size/resolution agnostic, and that also works in desktop browsers.

Prototyping with jQuery Mobile, we assembled a basic HTML page—containing all the elements our application would eventually utilize—which was automatically rendered in a touch-compatible mobile interface merely by including the framework. The built-in visual themes provided an appealing—if basic—graphical style that our creative team used as a rough guide for graphical requirements, features, and flourishes.

sample of default jQuery Mobile styles Screenshot of Lennox Mobile Product Selector's final styles
jQuery Mobile provides attractive base styles Final design evolved from built-in components and themes

The primary benefit, however, was seeing how all the pieces functioned together, and how the navigational model affected page flow. It allowed us to hone our goals and plans even as we enacted them, and all without resorting to wireframes or relying on traditional mockups.

We also took advantage of some built-in features of the jQuery Mobile framework that we otherwise might not have considered due to time constraints or because the effort of developing them from scratch would have outweighed the benefits.

Small changes, enacted in real- or near real-time let us shape the project like a sculpture, taking a functional prototype from first-code to production quality.

Screenshot of a Lennox Mobile Product Selector results page QR Code to launch Lennox Mobile Product Selector

See it in action