With the launch of the Windows Phone 7 and a wider variety of Android devices in Australia, we decided it was time to upgrade our mobile website and give greater consideration to these emerging mobile platforms. Our brief for the project was simple: create an engaging mobile site that showcases our best work, meets the needs of our mobile audience, and uses the best technology available to us. This case study will focus on our process, the technology we use and highlight some of the issues we overcame along the way.

Plan and wireframe

To begin this project we prepared a list of issues and restrictions that were self-evident across the different mobile devices. This included: different screen sizes and resolutions, different browser engines and  W3C standards integration, download speeds via 3G networks and the different user controls available in each platform.

Our next step was to plan out the information architecture, prepare some wireframes and design the interactions for the site. We proposed to model the sites’ interaction on applications typically found on iPhone or Android devices. Our content – thumbnails and information of our work – we anticipated would support the simple browsing behaviour that a single page model view has to offer, while a flexible width design would overcome any issues we have with browsing in landscape or portrait mode. We developed the wireframes in Axure, a rapid wireframing and prototyping application, as this allows us to turn the wireframes into working HTML prototypes and view these on our mobile phone browsers.

Graphic design and build

The wireframes are then handed to our graphic and web designers to begin work on the user interface, HTML, CSS and Javasript. As we identified earlier the screen size and resolutions between devices vary. iPad and other tablets aside the iPhone 4 has the largest resolution at 640px by 960px, and double the pixel density per inch (for every one pixel on iPhone 3GS there are four on an iPhone 4).  This presented an interesting challenge – how do you make the images crisp on the iPhone 4, but not too large on regular phones?  Some methods include targeting specific browsers via CSS3 media queries, image resizing via Javascript or the method we chose; to save a larger image and incorporate scaling techniques offered via CSS3 and within the HTML.

As an example, the new CSS3 background-size property allows images to be scaled to fit within the block level element. The advantage of this, over say providing fixed dimensions is that the CSS will take care of the scaling, and scale to give the best possible image size for that particular device.

Between the iPhone, Android phones and Windows Mobile phone, there are slightly different implementations of Javascript. For us it made sense to use a Javascript framework that would take care of any of the cross browser issues that may arise. There are many out there but we opted for ZeptoJS, a small Javascript library of around 3kb and a rich feature set that gives us access to swipe gestures as well as regular helper methods to work with the document object model.

While the iPhone and Android devices use the Webkit browser and Windows Phone using the proprietary Trident engine, our choice to use HTML 5 and CSS3 animations is not without its shortcomings. Webkit animations and many of the CSS3 properties will not work on the Windows Phone or other web enabled phones. With this in mind we incorporated into the design degradations that allow the site to still function, but with a less advanced feature set. At the time this article was written, Microsoft suggested that their soon-to-be-coming Windows Mobile update with Microsoft Explorer 9, will support Webkit animations and many CSS3 and HTML 5 enhancements. Subsequently the site will automatically switch over to use the advanced features and become a richer experience when this occurs.

Test and delivery

After many hours of testing we launched the site. With the addition some just-in-time image manipulation and lazy loading of images to overcome the download times on 3G networks our site’s initial load is around 80Kb. The site degrades nicely on non-Webkit, non-Javascript and other web enabled phones, while performing nicely on the various iOS and Android devices.

What this design taught us the most was not to take for granted the lessons learnt in the early days of website development. Techniques that were learnt when dealing with different screen sizes and resolutions, different browsers and download speeds of dial-up internet connections; these issues from the past gave us a good grounding from which we built upon the knowledge we have now about modern web design, user experience and content development.