Friday, March 16, 2012

10 simple rules for mobile web design

 A mobile site has to be very easy to use because it has a small screen which has to navigated with an oversized thumb or finger.

This site was created using Blogger so it will display a different version of the page you are looking at depending on what type of device you are using.

If you are using a mobile phone to view this site then you should see a selection of recent blogs which includes a thumb sized link to each mobile web page.

If you are using a desktop or laptop device you should see the full page with side bars and footers.

However if you are writing your own site from scratch, these tools will probably not be available to you.

This makes for an interesting design problem that has to be thought about before you can start writing for the site.

Here are the 10 main things to think about before you starting to create your site.

Its worth thinking about different combinations as each web site will have a different emphasis on what it is trying to achieve.

  • Keep it quick - Design your site to load fast and make copy easy to scan
  • Simplify navigation - Create clear navigation and search functionalities
  • Be thumb-friendly - Design your site so any size hand can easily interact with it
  • Design for visibility - Make it easy for your customers to read
  • Make it accessible - Mobile sites should work across all mobile devices
  • Make it easy to convert - Create clear ways for your users to make purchases or contact you
  • Make it local - Consumers look for local info on their phones all the time
  • Make it seamless - Convert as much of the functionality of your desktop site to mobile
  • Use mobile site redirects - Ensure that visitors who visit your website from a mobile device are redirected to your mobile-friendly site
  • Listen, learn and iterate - Make testing and optimization an ongoing process
  • Small is best - Keep your pages small
  • Navigation should be clear and concise
  • Avoid graphics that do nothing to add to the navigation or readability
  • Test your pages Be sure to test your pages in both smart phones like the iPhone and less sophisticated mobile devices like PDAs.

Take a look at some of the bigger sites that have mobile versions and compare them to the web version to seen which of these rules they fulfil