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.
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.
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.
|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.