7 usability guidelines for websites on mobile devices

by Abid Warsi on 10 March 2011

Mobile Internet is continuing to grow very quickly. These guidelines will help you create or improve your mobile user experience.

1. Reduce the amount of content

Not everything shown on a PC site can fit reasonably onto a mobile web page, where space is short and every pixel counts. It's important to reduce the amount of content shown on the mobile-optimised version.

Only include the most important content or features. Low priority content that can be removed might include content or links that are outside of the main content area, such content typically found in the right hand columns of standard web pages.

Mobile websites should be very focused. This makes them easier to read and move around, as well as quicker to load on devices that can sometimes have slow Internet connection speeds.

2. Single column layouts work best

Wide web pages are difficult to view on small mobile phone screens. Even on smart phones like the iPhone with their relatively large screens standard web pages load up zoomed out so that they can fit on the screen. Most text is unreadable until users zoom in to the part of the screen they want to view. Zooming in isn't ideal because it adds an extra step and zooming in and out isn't easy to do on all phones.

Comparison screenshot of a BBC News article
Remove low priority content and present content using a single column layout

Instead, create single column pages that use up the whole width of the screen. To add additional content the page should expand downwards rather than across, as scrolling down is easier than scrolling across and users generally prefer it.

3. Present the navigation differently

It's difficult to fit the navigation across the top of the screen on a mobile web page. Stacking at the top would push the content too far down. A single column layout on a mobile phone screen page placing the navigation at the top would push the content too far down. Here are some tips for adding a navigation to mobile website:

  • On the homepage place the navigation and site search at the top of the page, and leave content for later pages. This is suitable for sites on which users want to navigate or search straight away, rather than read content. For example, when users visit ecommerce sites they usually have a specific product category in mind and want to tap through it or type it into the search box.
  • Place the navigation at the bottom. Users can still access the navigation but it doesn't get in the way of reading the page. An anchor link at the top of the page can give quicker access.
  • Place the navigation in a dropdown link at the top of the page (and possibly at the bottom too).
  • Only offer a 'Back' button on pages other than the homepage. This keeps the page design simple at the expense of any ability to navigate directly to another section of the mobile website.

4. Minimise text entry

Entering text onto websites using mobile phones is much more difficult than when using a desktop or laptop keyboard. Physical QWERTY tend to be the easiest mobile keyboards to use, followed by touchscreen QWERTY keyboards followed traditional 12 button physical 12 alphanumeric keypads.

However, users make far more errors and are significantly slower when typing on even the best mobile keyboard than when using a full size PC keyboard. It stands to reason, then, that users don't want to have to type as much on mobile websites.

Screenshot of M & S address picker

Ways to reduce the amount of text entry required include:

  • Allowing users to use stored details in their 'My Account' section when going through a mobile checkout experience e.g. picking from previously entered delivery addresses.
  • Asking users to enter a PIN instead of a password.
  • Take advantage of inbuilt functionality (see below)

5. Decide whether you need more than 1 mobile site

Screens and processing power on mobile phones vary tremendously. For example, a quick check on a leading mobile phone retailer showed phones selling with resolutions ranging from 128 x 160 pixels to up to 480 x 800. And, while many smart phones have the ability to load up full web pages less advanced phones can't cope and would crash trying to do the same.

If your mobile website is only going to be seen by smartphone users with fast download speeds then one mobile version will be ok. However, if you want a broader reach then you should consider creating a paired down version. Facebook goes as far as having 3 main mobile versions. m.facebook.com is the main mobile site, touch.facebook.com is optimized for touscreen mobile phones and 0.facebook.com is optimized for users in countries with very slow download speeds.

Screenshot of Facebook mobile
One of Facebook's 3 main mobile versions.

6. Design for touchscreen and non-touchscreen users

Smartphones account for the majority of mobile Internet usage in many countries, including the UK and USA. So, it's important that your mobile site should be optimized for smartphones. These have typically have large touchscreens screens but may have a more traditional trackball, joystick or directional keys. Therefore, it's important to that your design is easy for both touchscreen and non-touchscreen users.

The most common difficulty with viewing standard web pages on a smartphone is in selecting, particularly tapping, small text links accurately. Fingers tend to be too thick to hit a small link accurately, and if there are 2 or more links close together then it's easy to accidentally tap the wrong one.

Links should be avoided for any important calls to action (it's less of an issue to use them for footer links). Instead, design calls to action that take up more screen space and which can be tapped easily. For example, use thick rows than span the width of the screen or square boxes can both of which can be tapped easily.

7. Take advantage of inbuilt functionality

Many mobile phones have an advantage over PCs - they come with lots of inbuilt functionality that most PCs don't have. You can make it easier for users to perform certain tasks by utilising a mobile's inbuilt functionality and thereby remove the need for manual steps.

Make calls
All phones can, of course, make phone calls by default (PCs require additional software most users won't have purchased credit to make calls from their PC to physical phone). Allow users to automatically ring a number when they tap or click a phone number. This is useful for 'Contact us' or 'Store finder' pages.

See an address on a map
Similarly, it's possible to give the user the option to select an address and automatically open the mobile phone's map application.

Find the nearest...
Users are often away from their home when they use the Internet on their mobiles. Since many mobile phones come with inbuilt location-detection capability (e.g. GPS) you can ask a user to share their current location. High street retailers, for example, can make it easy for customers to detect their nearest stores on a map. Social networking mobile sites can make it easy for users to find people, places or events near them.

Input information in innovative ways
There are innovative ways to allow users to input information that are both fun and useful. QR codes are an example of this. Waitrose had a press campaign late last year to promote it's Christmas iPhone and Android apps. Scanning the code took users directly to the app stores to download it.

Screenshot a Waitrose QR code
Scanning these codes is quickly becoming a popular marketing scheme


The number of people accessing websites of their mobile phones is increasingly rapidly. They can be given a much better user experience by following these guidelines:

  1. Reduce the amount of content
  2. Single column layouts work best
  3. Present that navigation differently
  4. Minimise text entry
  5. Decide whether you need more than 1 mobile site
  6. Design for touchscreen and non-touchscreen users
  7. Take advantage of inbuilt functionality

Thank you for your comment. It has been submitted for approval.

Comment Again?

Leave a comment

Please enter your name.
Sorry, this email address is not valid.
Please enter your comment.

Course basket x


Price per place

Add another courseCheckout

Pay now by credit card or later by invoice (invoice payments only possible if all courses are 3+ weeks in advance)