Designing for the mobile web

Web Architect Alexander Rehm provides a rundown on designing and developing for the mobile web.

In preparation for the development of your website, you may have thought about your target audience, what they expect from your website and how you deliver it.

You may or may not have considered how you wish to serve those browsing on mobile devices. Which products and services best suit them? What mistakes do you need to avoid? What’s best practice?

Device considerations

To begin with, think about the device itself, commonly, the internet enabled mobile phone. There are an excess of phones on the market, but most now share common core functionality: colour-screen, wireless or WAP capabilities and input devices – perhaps even a stylus or keyboard.

There are a considerable range of display resolutions on offer, the most common being 128x160, 176x220, 240x320 and 320x480 (iPhone). The trend is for increasing resolutions and better displays, though a number of current devices are still at the lower end of the scale. Over the past year the World Wide Web Consortium (W3C) has been working on a Web Best Practices document for designing and developing mobile phones for the web, and for the time being, they recommend designing for a usable screen width of 120 pixels, with the minimum amount of colours of 256.

Of course, 120 pixels width is recommended in order to reach the maximum number of mobile web users. You may wish to create a number of versions such as one for normal phones and one for the Apple iPhone, etc.

Designing for mobile phones

Information Architecture is vital to the success of any website and the same applies for mobile sites.

Computers have the advantage of a full size keyboard, mouse, big screen and different windows you can click through, close, minimize or go back to. This allows enormous flexibility when creating usable, consistent navigation solutions. This is not true for mobile. With a screen resolution as little as 120 pixels wide, there is very little space to play with. There is no such thing as a left hand navigation or right hand panels with additional information. You can display only a limited amount of content on screen at any one time, with only a limited number of links visible.

You will need to reconsider image sizes or indeed, whether they justify inclusion: compared to most modern computer connections, the download speed on a mobile is very slow.

The more a user clicks, the longer they wait and, if they are not using wireless, the more they pay. A mobile site should be stripped down as much as possible to limit the amount of copy and the amount of links and images. Navigation should be simple and the structure shallow, requiring as few clicks as possible in order minimise download time. Mobile users will want quick, specific information and want it fast. Requiring a conventional web browsing process will result in frustration.

Due to the ergonomics of mobile phone browsing it is important to repeat navigation and access keys at the foot of pages in order to reduce up-and-down-scrolling.

In conclusion

Translating an existing website, with its full range of products, offers and information to the mobile user can prove a challenge and may not be the right approach. The focus should be on creating a mobile version that compliments your main website and provides a quick reference to your products, services and content for your customers.