5 Mobile Website Usability Rules You Cannot Afford To Break

5 Mobile Website Usability Rules You Cannot Afford To Break
Despite the fact that there are approximately 1.2 billion mobile web users worldwide, some websites are still a usability nightmare when accessed via mobile devices. The fragmentation of the mobile device market – with a relatively wide array of device – resolution – operating system combination has further complicated matters.

There can be many reasons that explain why usable websites become unusable when accessed via mobile devices. This article contains a set of rules which in my opinion should be kept in mind when designing and developing the mobile version of a website. These rules are by no means exhaustive but they should lead to you key areas for further research. So, here we go ….

Rule 1: Know Your Users

The mobile version of your website should be adapted for your user and not the other way round! A recent article on this blog highlighted this by explaining how to know your readers and write usable blog posts for them. Knowing your users is essential as otherwise it is practically impossible to design a mobile website which provides the best platform for interaction.

There are many ways which can help you build a profile of your typical user. I particularly find useful traditional methodologies such as conducting online questionnaires and polls. However, I have also obtained valuable user information via web analytics and usability testing tools. I consider knowing your user and identifying what your typical user wants from you as the first step in any web development project.

Rule 2: Make Your Mobile Website Accessible

Accessibility is a subset of usability. Therefore, by making your mobile website accessible, you will ultimately be contributing towards its usability.

Mobile website accessibility can take various forms. For instance, by allowing the toggling of options instead of forcing users to see them, hiding the number of widgets and features which are rarely used along with avoiding things like filling long forms are all techniques that contribute towards effective mobile accessibility.

When users have to access a website using a mobile device, a good proportion of their attention and focus should be on the content which will enable them to achieve their goals. This means you need to present the content in a legible format. Overall, there is a general disagreement with regards to the ideal minimum screen resolution that a mobile website should fit on. The most quoted resolution is 240 x 320px, although I highly doubt it since the average smartphone today has a screen size of 4 – 4.5 inches.

Rule 3: Keep it Simple

Mobile devices are typically restricted by screen size, processing power and internet bandwidth. Although all of these factors are becoming less restrictive with the advent of powerful devices such as tablets and dual core mobile phones, a mobile device is still less powerful than a computer.

With this knowledge in mind, it is thus advisable to keep the interaction as minimalist as possible and focus solely on helping your users achieve their objective. This often involves designing a separate website for users who access your website via a mobile device. You may also opt to developing an app for your users to download via app markets.

Rule 4: Communicate Via Colors

Color plays a key role in the usability of your mobile site. When used effectively, colors will convey the message you are trying to get through more effectively and in a much compelling fashion. A useful guide for choosing the right colors is this article entitled “Colour: User Experience And Psychology“.

Once you choose your site’s color palette, it is important to reference usability best practices where color is concerned. Of the most notable ones are the necessity of links to be blue and to provide a sharp contrast between text and its background. The key idea here is to use color to convey the objective of your site effectively.

Rule 5: Testing

Usability testing is a continuous process and not a one-time task. Your users will access your mobile website through a number of devices; hence the tests have to be conducted on multiple devices so as to address the multiple device -operating system – browser combinations. In an ideal world, testing should be physically carried out using a wide array of real devices. However, for smaller web development companies, this can be expensive.

A work-around is to have the more popular devices such as the iPad, an Android Tablet, an iPhone, an Android phone and Widows Phone. Additional testing can then be carried out using emulators. The latter should be used with caution as their rendering may not necessarily replicate the real device in an identical manner.


The above are what I consider as being five important steps towards designing a usable mobile website. You simply cannot afford to overlook them. Do you have any tips for mobile website usability? Please leave them in the comments section below!

  • Tesmond

    Still waiting for a “mobile” site that works better than 99% of “desktop” sites…

    Google image search annoyed me most recently. I have a 1280×800 pixel mobile device, Google detects that I have a mobile device and presents horribly low resolution versions of the original images. I tried Dolphin HD and set it to desktop mode, but it appears that Dolphin HD is not compatible with the JavaScript that Google uses for their page load…would have been happier with the old page based desktop version!

  • Ian

    Some good points, apart from accessibility and use of colour.

    Accessibility isn’t really about the points you’re describing. The things you’re mentioning would be helpful, but really they’re just general usability points. 

    Yes, it’s a subset of usability, but that subset is disability. Much of  the work is enabling compatibility with assistive tech through things like proper labelling, and much of the rest of the work is ensuring that you aren’t disadvantaging or excluding disabled groups by including any unnecessary barriers.

    One of these unnecessary barriers is relying on colour to convey information, doing that is a sure-fire way to annoy or exclude many (10% of white males are colour-blind) of your users.

    Colour should only ever be used as a supplementary means of re-enforcing information. For example your recommendation to use blue to indicate links isn’t much use if you don’t know what blue is (tritanopia) so it should be used just to re-enforce the primary means of conveying that information, for example an underline on the link.

    Another good example – use of the colour red to indicate form fields with errors should just be a re-enforcement of the primary means of conveying it, ie. text and a cross icon.

    That may of course be what you meant to say anyway, but it isn’t the message that comes across in the text.

  • Drose

    What is your opinion about responsive design versus separate sites for mobile and web? 

  • http://otherthanthat.com cathybrooks

    Thanks for the simple guidelines. As someone who’s working squarely in the realm of mobile web it’s a daily chore to wade through the morass of content from businesses/brands that seem unable to grasp the fact that by failing to accommodate people who are accessing their content via mobile devices (a percentage that is growing exponentially by pretty much all accounts).

  • Pingback: 5 Mobile Website Usability Rules You Cannot Afford To Break | Usability Geek » Web Design()