Creating Contiki's Mobile Site, Part 2: Making the Mobile Prototype

In developing the Contiki mobile website, we thought it would be a good idea to provide them with a working prototype that they could actually navigate through on their mobile devices before we went into full production. We had already started looking for a mobile framework to use on this project. After careful consideration, we decided to go with jQuery Mobile. We choose this framework for its flexibility, built-in functionality and ability to be easily customized. Plus, being based on jQuery was a huge mark in its favor.

Now with Annie’s paper prototype in hand and a fresh install of jQuery Mobile, we went to work. We concentrated on functionality and leaned heavily on jQuery Mobile’s built-in elements. jQuery Mobile has a very rich, well-implemented set of default styles. You can easily add tags to code to produce buttons, form elements, sliding menus and toolbars. To give you an idea of jQuery Mobile’s default styles, see the image below.

With the power and flexibility of the jQuery Mobile framework, we were able to crank out a functional mobile site prototype with minimal coding effort.

This gave the client a good idea of exactly how the site would work. They were able use their mobile devices to tap buttons to navigate, open and slide menus with their fingers and tap form elements to fill them in with the built in keyboard. Of course, there were pre-determined paths they had to go through for each activity since there was no backend integration at this point. Nevertheless, they were able to get the full picture of how the site would work.

This process saved us a huge amount of time and effort since we were able to work through any functionality issues that were identified via the prototype before heading to the design phase. This was definitely a helpful step in the process of building the Contiki mobile site, especially when you can use a framework like jQuery Mobile that can do a lot of the heavy lifting for you. I am sure we will be using this process in the future as we tackle other mobile projects.

Check out the other posts in this series, Creating Contiki’s Mobile Site:

• Part 1: Design Strategy
• Part 2: Making the Mobile Prototype
• Part 3: Visual Design
• Part 4: Implementation