A brief history of mobile web browsing

Web browsers first appeared on mobile phones at the start of the millennium. These initial attempts to ‘mobilise’ the web were pretty disappointing. Firstly, the hardware wasn’t powerful enough to handle full web pages, and screens were too small and low resolution. Also, use of WAP (Wireless Application Protocol) and WML (Wireless Mark-up Language) demanded special tools and limited the possibilities for creating usable interfaces. Furthermore, the web’s best content was rarely adapted for delivery to mobiles.

So what’s new?

In 2009 things have changed for the better in the world of mobile web browsing. All of the popular phones have operating systems capable of running a full featured micro browser, from the Webkit-based Safari on the iPhone OS to BOLT browser, which can be installed by users on J2ME phones of all types, including Blackberrys.

So aside from a few things like native Flash support, the mobile web has closer to that which we experience from a desktop or laptop. However, there are still some key differences.

Less is more

A small screen makes it extremely important to keep the content and interface light. It’s a great excuse to be ruthless and lose all the dead wood (something you should also consider doing to your regular sites). You need to meet users’ requirements quickly, so you need to lose that huge banner image of a lovely lady pointing at a computer screen (sadly). In fact images should be kept to an absolute minimum, as downloading them adds significantly to page load times over cellular networks.

Reduce repetition

It’s common to repeat elements like navigation on every page of a standard web site. However, the navigation can easily push important content outside the viewable area in a microbrowser. The solution is to use your homepage as a menu and link back to it from every other page.

Highlight active elements clearly

Without a mouse or a touch sensitive screen, users will have to navigate through hyperlinks using ‘up’ and ‘down’ buttons or using some sort of scroll device. This makes it incredibly important that you highlight the currently selected link clearly. Otherwise users will never be sure where they are going to be sent when pressing the ‘go’ or enter button.

Specialise

It’s far better to have a separate site specifically for mobile devices rather than to design your main site with mobiles in mind. Mobile sites will not capitalise on the advantages of sites delivered on a desktop or laptop PC.

I recommend placing a mobile version of your site on a sub domain, such as http://m.example.com, rather than on a separate domain like http://www.example.mobi. This keeps everything on one domain and is easier to manage as well as making more sense to users.

Know your audience and the limitations of their devices

If your target audience is a group of sales people equipped with company iPhones, then you are in a fortunate situation as you can design to the limitations of an almost fully functional microbrowser. However, if your user base could be using any model of phone then there are many more limitations and variances. For example, screen size can vary from 128 x 160 pixels to 320×480 (with many slight differences in ratio). As a rule of thumb, sites should be built as a single column with no floated elements.

Test, test, and test again

It’s even more important that you validate and test a mobile web site than a standard one. With a huge amount of resources at their disposal, it is not a problem for desktop computers to have error handlers and debuggers running in their browsers. Such luxuries demand too much processing power from mobile devices.