Designing for the Mobile Web

February 24, 2006

Topics: Accessibility, Web Development, Web standards.

I’ve been thinking about the mobile web today. Accessible web design is all about providing access to web-based information to all users and platforms – and the mobile web is a fast-growing and very challenging area.

The biggest challenge with mobile web design is the fact that you just can’t test it very easily. There are dozens of mobile browsers and related products.

Opera has supplied options to test for small screens in their browser for quite some time, but that only provides testing for Opera’s interpretations. Every web enabled phone provides a browser of some sort – many of them have created their own browsers. Some use obscure custom browsers.

And Google has now announced their own lightweight mobile interpreter for pages accessed through a search from a mobile phone. This is all wonderful, but it’s a herculean task to test for all of these options (not to mention all of the phone charges and extra handhelds one would need to acquire!).

All of these services have their own interpretation of web standards (or non-interpretation, as the case may be). Support for HTML, CSS, and handheld specific style sheets is very spotty. However, a well-constructed page will usually degrade gracefully in a mobile browser. Not always, of course, but there are certainly things you can do which will help.

  • Use proportional widths.

    Handheld browsers usually have very small screens – the largest screen I know of is on the Hiptop from Danger, measuring in at a massive 240 pixels. Nobody likes side-scrolling! If you use a proportional width you can avoid this problem.

  • Place your page elements in a logical order.

    Which comes first, the content or the navigation? Neither is a great solution – if your visitor is going to an article, they want content. If they’re looking for an article, they want navigation. You’ll have to make a choice – but I feel this is where internal page navigation is a must. Provide just a few links to navigate around the page – Skip to Navigation, Skip to Content, perhaps even a dynamic link to visit the most recent article published! These can go at the very top of the page, allowing you to organize your page as you need. I still am inclined to recommend that content comes before main navigation, however.

  • Follow web standards

    Despite the fact that support for standards is not good amongst handheld browsers, you should always strive for standards. Unless you have a tremendous development budget which can support redevelopment of your mobile interface everytime a new browser comes out, you need to plan for the future. It is a better bet that the future of handheld browsers will tend towads standards than not.

This is a minuscule part of what you can do to improve your mobile web presence – Cameron Moll is writing a four-part series which provides detailed and extensive tips for mobile web design.

3 Comments to “Designing for the Mobile Web”

  1. What will be the standard measurement for your screen so you can use the proportional measurement?

  2. And what part of “follow web standards” fails to include validated code?

  3. mhm, dont you think you also need VALIDATED code, as the mobile search engines arent as far as google is and may have problems with shitty code?