How to optimise web sites for mobile browsing?

Although most smart phones can view webpages that have been designed for desktop browsers, the experience often isn’t great. Users regularly find themselves having to zoom in and scroll around to find the right bit of the page. Clicking small links that are close to other links can be a hard task and filling in forms can turn into mission impossible.

Our analytics show that the traffic our customers receive is, on average, over 20% from mobile devices. Therefore you should make sure that your website is built in a mobile friendly way.

Update June 2013 - this figure is now in excess of 35% of traffic from mobile devices.

There are currently 1.6 billion desktop computers in the world, however there are 1.9 billion smart phones capable of accessing the internet. By 2015 it is estimated that there will be a smart device for every person on the planet and since 2010 mobile searches have increased by over 400%.

There are a number of ways that you can ensure your web assets are mobile friendly:

Responsive Design

Responsive design in simple terms is a way of designing and building the look and feel of your site in a way that it can adjust to different screen sizes seemlessly. A website should look completely different on a desktop than it looks on a mobile - on the mobile browser the important parts of the website should be enhanced and put into the foreground whereas lesser relevant content should play a minor role in the appearance. This way the mobile user has instant grasp and access to the most important information of the site.

Fixing forms

Forms are one of the biggest issues a mobile user faces. They often entail long lists that users have to scroll through, or input boxes that are too small. Worst of all there are cases the user won't even be able to submit the form via their mobile device.

Page Size

Web pages are made up of a number of different elements, from the underlying HTML and CSS through to the images and videos shown on it and the JavaScript which provides user interactivity. As access to high speed broadband has increased over recent years, so the number and size of these elements on a typical web page have increased dramatically. However, browsing from mobile devices is usually much slower than from a desktop computer, potentially resulting in a frustratingly slow experience for users surfing on the go.

There are a number of ways the size of a webpage can be reduced in order to improve this experience for your mobile users, from compressing the files before they are transferred, optimising images and videos, and improving the way in which pages are delivered by simply writing better HTML and CSS.

Having a separate mobile site

Often people take the view that having a separate mobile site is the easiest route to go down but that can cause as many issues as it solves and this solution involves having to maintain two sites instead of one.

More tweaks

Furthermore there are a few tweaks you can make to your mobile website to make it even better. Searches on a mobile device are often about finding correct directions, contact details or phone numbers of public places. So why not provide these instantly and mobile friendly? It is relatively easy to pop up a message asking the user if they are looking for contact details for example and if so take them directly to them. You can make the phone number clickable so they can dial directly from the within the webpage.

As for directions you can allow directions to be provided through the map application they have installed on their device. If the user agrees to share their location you can even relevant location based data: Events you might be hosting near them, stores or office locations, etc. Google adwords allows you to target mobile users by location and so perhaps a targeted local ad might work for you.