7 Usability Guidelines for Websites on Mobile Devices

By Abid Warsi
2008-01-30


7. Design mobile-friendly page layouts

On your website, make sure you design the page to present content in the right order and render well on mobile screens. Website layouts for large landscape PC screens usually don't work well on small portrait mobile phone screens. Furthermore, mobile browsers and page transcoders usually vertically stack pages suitable for portrait display.

It's often best to have completely different page designs to meet mobile users' needs. If mobile phone users are a big part of your business then you should consider creating a site just for mobiles. Sites that are designed for mobiles perform significantly better with users than those that aren't.

For example, BAA's website renders very poorly on a mobile screen. Page sections don't appear where intended relative to each other and pages look poorly designed. Single word link text can be wrapped over 4 lines making it difficult to read. Conversely, Transport for London's mobile homepage contains simple categorised lists of links. Users find this easy and quick to use.

  

TFL's mobile site renders well on mobile screens. BAA's site doesn't appear to be designed for mobiles and renders poorly.

Tutorial Pages:
» Introduction
» 1. Meet users' needs quickly
» 2. Don't repeat the navigation on every page
» 3. Clearly distinguish selected items
» 4. Make user input as simple as possible
» 5. Only show essential information
» 6. Place basic browsing controls on the page
» 7. Design mobile-friendly page layouts
» In a nutshell

Related Tutorials: » Setting Up Subversion for Development on Windows » Stylize Your Digg Count » Installing Apache on Windows » Ecommerce Imagery: Persuading with Pictures » Customizable Websites - The Definitive Guide » 10 Common Errors When Implementing Accessibility