Challenge

Mobile Devices to be targeted were:

• Smart Phones: iPhone 3g, iPhone 4, HTC Desire
• Experience Phones: Blackberry, Nokia n97
• Feature Phones: Nokia 6300

Approach

Our approach was to review the market and choose where to direct our efforts. We selected a range of handsets with different web browsers ranging from Opera mini to Safari on the iPhone. We then created a liquid layout to degrade gracefully on less rich browsers - yet provide a rich browsing experience on the Blackberry and iPhone. Using lightweight XHTML/CSS to build the site, we then integrated the mobile layouts into the CMS.

With this approach we make use of a good CMS with a flexible presentation layer, and multiple layout types. We leverage device detection capabilities of CMSs like Sitecore and Alterian to distinguish mobile from desktop and apply relevant layouts. As the market for mobile devices is complex and flourishing, it is not possible to test the mobile specific website on each and every device. To help in testing we make use of device emulators as well as the physical handsets. This helps to ensure a consistent and easy-to-use cross device solution is achieved.

Mobile accessibility

Mobile phones present a new set of challenges with regards to accessibility and research has shown that people have different goals when using different channels. As smart phones use touch screens, we needed to ensure a usable website experience for these devices. Some of the quick wins here included making larger buttons and keeping file sizes to a minimum. Our developers keep file sizes for mobile sites to a minimum so people can find the information they need quickly and easily. The user experience is also greatly enhanced by creating easy to use menus specifically designed for touch screen devices.

Certain content is only suitable for desktop use such as JavaScript scrolling images and long pages of content. In these situations we ensure alternative mobile content is available. A good object-based CMS allows editors to write different length headings to reflect the smaller screen sizes.

Results

Fusionworkshop have launched a ‘mobile-specific’ version of their website for use on for iPhone, Blackberry and other popular models. The same content that is used on the company website has been rendered using a set of mobile layouts and style sheets. Through the use of device detection functionality, content is rendered in a more usable way for mobile visitors. In this way our editors can add or edit pages and menus in the CMS with the changes instantly reflected in both mobile-optimised and web versions.