- 17 May 2012
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:
About Brian Middleton
Brian is one of our Front-end Developers who has been working on the web and pushing pixels for the last 10 years or so. He started work as a traditional print designer at an advertising agency in Little Rock, Arkansas. When the internet started to happen, he quickly became enamored and took his career on a different path. Finding new and better ways to design and code for the web is his passion. When he is not banging out code, you may find Brian catching up on movies, playing video games, or biking to one of the fine vegan food establishments around town.