jQuery Mobile Prototyping Tools

Posted by {"display_name"=>"greg", "login"=>"greg", "email"=>"greg@udon.org", "url"=>""} on April 03, 2012 · 6 mins read

I'm looking for a tool to mock-up jQuery Mobile user interfaces and have found Tiggzi, Mobjectify and codiqa. I did a quick test of each service using Chrome on Windows and  Ubuntu as well as my iPad. My Ubuntu Chrome does not have flash installed.


In all cases I tried to create the same Listview page for an app I'm working on.  I wanted an unnumbered list with search that filled the screen horizontally.

Tiggzi

The user interface initially looks very intuitive, it supports themes, and basic device configuration settings for simulated mobile devices. It also supports selection of jQuery Mobile themes. Tiggzi also support collaboration on a project across multiple users (something I didn't see in the other options).

When I started creating my mock-up it was not immediately obvious how to delete an element. It also seems to be enforcing borders around objects and my list view defaults to a numbered list (not what I want) and I'm not immediately finding how to change the listview options.

Tiggzi requires flash and it prompted me to install flash on my Ubuntu system. I also tried logging into my Tiggzi account from the iPad and I could see my project and view it on the iPad but you can't edit the project (not a surprise since the editor is a flash application).

Tiggzi may have the deepest feature set of all of these tools. There are options for defining REST services, data mappings, javascript and events that I didn't see in the other solutions. Tiggzi looks like a great good solution for someone who wants to invest time in a working prototype or work in teams. For my purposes, more screen mock-ups than a working prototype, it wasn't as intuitive as the others but I could see myself graduating to Tiggzi at some point in the future.


Mobjectify

They have no free account level or trial period account but they do have an online demo which lets you try the user interface. I selected the List object and it presented a form with the Listview options. Fill out the form and some sample list items and viola, the list is ready (no hunting for an icon or menu item to change the Listview defaults). However, since it's not a true WYSIWYG, to see the results of the page you have to click a Generate icon at the top of the page and I don't see that icon in their demo mode.

I tried Mobjectify on the iPad and it worked great. Really wish I could try the Generate option. There's also a Code tab so you can cut and paste Javascript into the project. In addition, they have a quick written tutorial that shows the features of the product.

All-in-all I like the approach that Mobjectify has taken for their user interface. I wish they had a full featured trail account or one a free level that limits the account to one project.

codiqa

Like Mobjectify, codiqa has a Design and Preview mode. They make it really easy to switch views to see how the interface looks on different devices and there's even a Rotate Device button to quickly see what it looks like in portrait or landscape (Tiggzi had this also on their toolbar).

This user interface is quite good. A selection of jQuery Mobile elements is provided on the left. You drag and drop them onto the screen and a form is displayed on the right with the main options for the element. Even though there is a separate WYSIWYG (Preview) mode the design mode is very close to a full WYSIWYG and yet it has the feature I liked about Mobjectify where the element options are immediately available in a form. It also presents a few more options than Mobjectify did for the listview (dividers for instance).

The design user interface displays on the iPad but drag and drop doesn't work so it's not usable but it sure looks like it's close to working on the iPad.

I was really impressed with how quickly I was able to mock-up jQuery Mobile screens. This is just the tool I am looking for and will be something I give to my users.

codiqa has a couple of options for trying out their service. A free builder-plan that lets you use the product and export it to HTML but not save the project and a 30 day trial.