Guide

Best practice in web design

Designing for the mobile web

When you design websites, you need to consider how they will look and work on mobile devices. More and more users are upgrading to new smartphones and tablet computers, which they use to browse and search the internet. Search engines now 'qualify' content based on how well it renders on mobile devices.

Designing a mobile-first website

Although your website will be viewable on mobile devices, a more effective mobile presence may call for a separate mobile website or a responsive design.

Mobile-first approach is a popular strategy that involves designing for the smallest screen first and working your way up. The thinking behind this is that, if your website is good on a mobile device, it will translate well on all other devices, including desktop.

Mobile design issues

When designing a mobile website, basic web design principles still apply. Keep the website as simple as possible and consider:

  • Using CSS layouts (cascading style sheets) to support cross platform compatibility.
  • Page layout and information hierarchy given the limited screen space. Think about dividing content up into smaller segments across pages - this will ensure that they are quick to download and easier to read. Minimise vertical avoid horizontal scrolling.
  • The types of content that you use, eg the use of rich media (including animations and video) will increase download times and may not be supported across all devices. Avoid using too many images on your pages.
  • The placement of any navigation and its ease of use on mobile devices. Think about visual cues that you can use provide a better user experience. Use spacing between buttons to extend the clickable area.
  • Instead of entering free text (which can be difficult on a keypad), consider allowing users to choose from drop-down lists or radio buttons to input information.
  • Optimising e-commerce functionality for mobile, eg the shopping cart. Reducing the number of steps for customers to complete a purchase will help improve conversion rates.
  • If you have a separate mobile version of your website, as opposed to a responsive site, always give users the option to visit your main website and visa versa.

See more on the essentials of mobile marketing and m-commerce.