Designing websites for mobile phones

An approach to designing websites for mobile devices

When designing websites for mobile devices, the first question to ask is "do I have to?" Many phones do a grand job of displaying standard web pages without major changes. Others produce results, that might be imperfect, but might also be considered 'good enough'.

However, if your target market demands that the mobile version of a site is just as good as the standard version, then you will need to take some time to ensure it works properly.

For example, we were recently employed to consult on a new project for an online game (a global race simulation) where competitors could check their progress and make alterations to their routes via their mobiles. Since mobile technology was key to the success of the whole project, the client could not afford to make do with second best when it came to the mobile element of the project. In such circumstances a designer might be tempted to build two sites; one dedicated solely to the phone version.

However, with a large project and a limited budget a different methodology will prove fully sificient for the client's needs.

The method we suggest is to write spotlessly clean xhtml websites. By using 100% correct xhtml, and by avoiding all the usual sloppy shortcuts that web browsers are so good at covering up, we start with a clean base.

Starting from this clean base code it is easy to discover or 'sniff' the technology being used by each visitor using standard sniffer protocols that have been around for decades.

Once we have done this the next step isn to construct the layout and display of the website on the fly. This work must be done as much as possible on the server rather than the client side to ensure full compatability. So, if the sniffer detects a particular mobile phone it might first reduce the font size, change from a 4 to 2 column layout and finally remove some extraneous advertising panels. For a different mobile phone it might be possible to go with three columns. Of course, testing and retesting will decide the right layouts for each device.

We might also spend a moment to talk about avoiding old habits. Standard web design has some unwritten rules such as "add a navigation bar to every page. These rules must be examined and in this case discarded. The screen 'real estate' on a small screen display is too precious to fill with much other than the required content. Therefore new paradigms must be evolved for ease of use.

This process has the added benefit, that as new devices come on to the market they can be added to the styling rules without having to rewrite the website's core functionality each time. This clients find that updating their websites for new phone technologies and screen sizes is a relatively cheap process.

Read more articles or subscribe to our rss feed