Jump to content

Mobile Site Design Best Practices

+ 4
  Maximiliano Firtman's Photo
Posted Aug 30 2010 03:22 PM

When you are creating a mobile version of an existing desktop website, you need to understand that you are mobilizing the website, not minimizing it. Minimizing (or miniaturizing) a desktop website simply involves displaying the same content on a smaller screen. Mobilizing is more than that; it requires understanding the context and offering your services and content in a manner that is useful and allows for quick access by the user.

Warning: If you are designing a mobile Rich Internet Application or a webapp using Ajax, you should always insert in the UI a background operation icon to alert the user when a background connection is in progress. An offline button could be useful if the user is not on WiFi or is in roaming mode and doesn’t want to get updates for a while.

Some best practices include:

  • Avoid horizontal scrolling.
  • Maintain visual consistency with your desktop site, if you have one.
  • Reduce the amount of text.
  • Use legible fonts on every screen; don’t rely on the resolution.
  • Use background colors to separate sections.
  • Keep the main navigation to three or four links.
  • Maintain the total link count at no more than 10 per page.
  • For low- and mid-end devices, don’t insert more than one link per line.
  • Use all the available width (i.e., not columns) for links, list elements, text inputs, and all possible focusable elements.
  • Provide a Go to Top link in the footer.
  • Provide a Back button in the footer (some browsers don’t have a Back button visible all the time).
  • Provide the most-used features at the top.
  • Group large lists by categories, each with no more than 10 items (for example, country selection by selecting the continent first).
  • Minimize the amount of user text input required.
  • Save the user’s history and settings for future predictive usage.
  • Split large text articles into pages (with page size depending on the richness of the browser).
  • Try your color palette in different environments. Users may be in a place with poor lighting, on public transport, at the beach in bright sunlight, or in an office with fluorescent lighting.
  • Provide different styling for touch devices.
  • Think about fluid (liquid) designs for best adaptation.
  • Use lists rather than tables.
  • Don’t use text images.
  • For touch and cursor-based devices, use full-width links so that a link will activate if the user clicks on any pixel in the line containing it. Make sure there is only one link in each line.
  • Use high-quality color images and fancier features stuff for smartphones (we will discuss optimizing later).
  • For cursor navigation, create medium-sized clickable zones for the cursor, moving by 5 or 10 pixels every time. Do not make the user travel a lot using the cursor; design all the clickable buttons near each other.
  • If you are providing a shortcut, a widget, or an offline version of your mobile website, create an alert at the top of the design (generally with yellow background) alerting the user to download it. Don’t show that alert after many views or after the user has entered the download area.

Note:
Keep the text on your site to a minimum. Read every paragraph five times, and you will always find some word you can remove or a shorter way to say the same thing.

For low- and mid-end devices, it is preferred to use a table design instead of floating divs, like in the first years of the desktop web. But keep in mind that using more than one item, link, or idea per line isn’t a good practice on those devices.

Programming the Mobile Web

Learn more about this topic from Programming the Mobile Web.

How do you take advantage of the new opportunities opening up in mobile web development? With this book, you'll learn the intricacies and pitfalls involved in building HTML and CSS-based apps that you can extend to work with particular devices, including the iPhone, Nokia, Blackberry, Android devices, and other smartphones. You'll not only learn how to deal with platform variations, finicky browsers, CSS compatibility, and other issues, but also how to create pleasant user experiences in a constrained environment.

See what you'll learn


0 Replies