Mobile app prototyping with Codiqa, jQuery Mobile

Codiqa and jQuery Mobile can be used to build mobile apps very quickly. Here's how I used them.

I've learned that the right way to build a successful mobile user experience is to test frequently and evolve quickly. It's important to build and release usable prototypes so that people can try the mobile app for themselves and provide feedback on the features and usability.

In my last mobile project, I discovered a very quick way to build a working mobile app prototype. here's what I did:

  1. I engaged a user interface (UI) designer to mockup some screens for my iPhone and Android app.

  2. I used a hosted service, Codiqa, to build the mobile screens via their WYSIWYG Web-based editor. For the page headers and footers, I pasted the images from the mockup screens into the Codiqa editor while for lists of items, I used the tool's built-in controls to simulate iPhone and Android lists.

  3. Then I used Codiqa's editor to link up buttons in the pages so that I could simulate an entire usage scenario--from user input to search listing to the detail screens.

  4. At this point, Codiqa produces a mobile Web app that can be used on iPhone and Android phones. I can tap the buttons to simulate the flow, but the lists and details are filled with placeholder text.

  5. The best feature of Codiqa is that it generates the mobile Web pages in jQuery Mobile format. jQuery Mobile is a powerful JavaScript toolkit for building mobile Web apps. I edit the jQuery Mobile scripts produced by Codiqa, connect them to my server's REST services via jQuery AJAX calls, and populate the lists and details dynamically.

  6. So now I have a functioning mobile Web app that I can give to my iPhone or Android testers and get their feedback. Codiqa and jQuery Mobile are very flexible, simple to use, and they allow me to enhance my mobile Web app quickly.

  7. When the mobile Web app is the best that it can be, I pass the app to my iPhone or Android developer to build it as a native app, reusing the same graphical assets and REST services that I have used.

This method of building mobile apps fits very well into our agile development process, in which we iterate many times to create the best product possible.

With Codiqa, it's even possible to let my product managers create the prototype app themselves, leaving the last phase of integration to techies like me. This could be the best way to get the entire team hands-on with the creation of the product.