Jump to navigation

Tutorial – Mobile Web Design

Matt Dlubac

Designing a dedicated mobile website

If a majority of a website’s mobile users are accessing the site from smartphones, the designer may want to consider having those users redirected to a mobile version of the website. As with designing sites made to be viewed on desktops, there is no ‘best’ design. The designer should focus on simplifying the site as much as possible so that users can find the information they need as quickly and easily as possible.


What to avoid:

  • Horizonal scrollbars, the page should be fairly narrow to users do not have to pan across the screen to find what they want
  • Using flash, silverlight, or the like. Many mobile devices do not support such platforms, so they should be avoided
  • Emerging standards, mobile devices are slower to pick up standards than desktop browsers such as Google Chrome
  • Hard to use navigation as described in the previous page
  • Navigation bars on the left or right side of the screen, they take up too much screen real estate on smartphones
  • Elements that require use of hovering, users cannot hover on a touch screen

Best practices:

  • Use buttons in place of links whenever possible, they are much easier to press
  • Keep images as small as possible
  • Keep javascript code relatively simple, most devices support it, but not all
  • The W3C recommends a maximum markup size of 10kb, strive to meet that limit for optimal page loading time
  • Always include a link to the full site