Mobile app prototyping with Codiqa, jQuery Mobile

Mobile app prototyping with Codiqa, jQuery Mobile

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

Topics: Software Development, Android, Apps, iOS, Mobility

Lee Lup Yuen

About Lee Lup Yuen

Lee Lup Yuen is passionate about mobile phones and PDAs, as he is constantly buying new gadgets and programming them in J2ME, .NET, Symbian and AppForge.
He has developed commercial applications with mobile technologies like SMS, MMS, WAP, 3G video streaming and location-based services.

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.


Log in or register to join the discussion
  • Does It Conform To Platform-Specific UI Conventions?

    On Android, tab headers are supposed to go at the top, on IOS they go at the bottom. On Android, the Back button terminates the frontmost "activity", the Home button merely suspends it. On IOS, the Home button terminates the app.
    • @ldo17

      It creates an HTML5 Web App not a Native Mobile App.

      You can convert the Web App to a Native App using PhoneGap.
      • In Other Words ...

        ... the answer is no.
        • Well

          Codiqa leaves platform-specifics up to you, and you can do any of these things with Phonegap. For example, you can handle the Android backbutton in phonegap through button events ( Also, you can detect that your app is running on Android or iOS and change the look and feel.

          The benefit to Codiqa is that your app can run on many platforms without having separate code bases, which many people find a huge cost and time saver. It really depends what kind of resources you have and the type of app you are trying to create.
  • Here is the list of few jquery mobile apps

    Here is the list of few jquery mobile apps