interesting bits and bobs about design, web and social media, the useful, the useless and everything in between.

Mobile site design: part 2.

Following on from my previous post that looked at good examples of mobile site design, I have created some top tips for consideration when looking at creating a mobile version of a site. Catering specifically for mobile users is something that you can no longer afford to ignore. Gartner’s mobile market report says 428 million mobile devices were sold in the first quarter of 2011, representing a 19% increase year-over-year. A lot of that growth is due to smartphone sales, which were at 100.7 million, an 85% year-over-year increase.

Through commercial experience and indepth study into the subject - plus working on the mobile version of our very own Philter site (which is in development as we speak - yay!) here are my tips for consideration: 

General.

• Mobile sites should be quick and easy to navigate as users are often on the go.
• There are a range of different devices and screen sizes, so get a design that has a fluid layout to suit all sizes.
• Avoid horizontal scrolling – a single column layout (with vertical scrolling only) is best.
• Don’t use hover states / rollovers (smartphones have touchscreens or use a stylus).
• Ensure content large enough so the user doesn’t need to zoom.
• Include an option for mobile visitors to visit full site.
• The mobile site should detect the user’s device and take them to the appropriate site (mobile version or full version).
• Avoid flash as it wont work on Apple devices.
• Don’t use pop-ups.
• Test the mobile site on multiple devices (and preferably in different browsers). Smartphones can be hired for this purpose.
• Decide whether you need more than 1 mobile site - 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 an alternate paired down version.

Content.

• Reduce and simplify content that is in the full site.
• Put the most important information at the top of the page.
• Break up information into smaller sections.
• Consider speed and cost to user (they may get charged per kb of mobile web data) - try to keep each page under one megabyte.
• Compared to desktop computers, the more you click on links on mobile websites, the more you wait because of loading time. You need to find a balance between the amount of content and navigation.

Images.

• Reduce the amount of images used to maximise speed and minimise cost for users.
• Include high res images for the iPhone 4 retina display.

Links.

• Make clickable elements big enough for a fingertip.
• Include some clear space around links.

Navigation.

• Position the navigation menu below the content if your users want to see changing content quickly.
• Position the navigation menu at the top of the page for users who want to navigate to a particular category right away.

User text entry.

• Minimise user text entry as it is more difficult on a mobile.
• Ways to minimise user text entry include:
  - Allow users to use save details in their account e.g. picking from a previously entered delivery addresses.
  - Ask users to enter a PIN instead of a password.
  - Take advantage of inbuilt functionality like QR codes.
  - Use radio buttons or lists.
  - Keep URLs as short as possible.

Mobile functionality.

• Take advantage of inbuilt functionality:
  - Make calls.
  - View on map.
  - Find nearest…
  - Innovative ways to allow users to input information e.g. through a QR code.
• Create icons for the site (for when the site is bookmarked).
• iPhone – hide the address bar to maximise screen size.

Hope they help!

Steph
The Creative Type