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
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.
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
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.