With the functional prototype and the design work in the can, we got the opportunity to start work on the front-end implementation for Contiki’s mobile website . Since we had a good dose of working with the jQuery mobile framework from the prototype, we were able to dive right in and get to work.
Theme It!
The first thing we did was to identify all the different patterns in the designs and create themes for them. jQuery mobile has a very powerful system where you can set up multiple themes, which include visual style for buttons, form elements, collapsible menus, etc. This gave us the flexibility to easily change the look of different elements by simply changing the class applied to the tag.
Even though the themes in jQuery gave us a good amount of room to make changes within their framework, we needed to customize things a bit further. This was done by setting up some of our own CSS styles to override the defaults of these themes. This was necessary to apply custom icons and background images that were not available in the framework.
The orange pluses were one of the icons that needed to be changed independent of the theme.
F is for Framework
Another benefit of using jQuery mobile was all of the built-in functionality it provided. We were able to easily execute collapsible menus and complex form elements using the framework. Once again, though, we needed to take things a little further. This included things like creating a pattern for tooltips and for expanding and contracting certain elements not covered by the framework.
For tooltips, since you don’t have the option of any hover actions on a mobile device, we made any element that needed extra description into a link. When that link was tapped, it would reveal the tooltip information. This worked very well throughout the site.
Tooltip in action.
Fancy Retina Graphics
As we proceeded further into the project, it became apparent that we were going to need to make retina versions of all of our graphics. We noticed that logos and such were looking a little fuzzy on our iPhone’s retina screen. This was something that wasn’t accounted for at the beginning of the project, but we quickly fixed by making double resolution graphics where needed.
The difference in the retina and normal version of the Contiki logo.
Wrap Up
Using jQuery mobile as a base framework was both good and bad. It was good at providing us a lot of baked in functionality that we would have otherwise had to create ourselves. It was bad in the way most frameworks are bad where you always need just a little more room to customize than what is provided. This was a pretty easy hurdle to overcome since we were able to override certain parts of the code with our own CSS.
If you are curious to what all this looks like right on your very own device, head over to http://www.contiki.com/mobile to see how it all came together.
Have a site you would like to create a mobile version for? Have a strictly mobile web project coming up? We can help. Let’s talk.
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