Guide

Best practice in web design

Mobile web design best practice

Mobile web design is necessary for most businesses in 2018. Devices such as smartphones and tablets are widespread and people are increasingly using them to shop, interact and conduct business online.

If your company relies on a desktop website, at the very least you should check how compatible it is with mobile devices. If your customers can't access your website on the go, you may well be missing out on potential sales and business.

How to create a mobile-friendly website?

You can take different approaches to creating a mobile-friendly website. The three most common strategies are:

  • responsive design
  • adaptive design
  • designing a separate mobile version of your website

The best approach for your business will depend on your circumstances, your existing website and the experience you wish to provide to your mobile users.

All approaches have positive and negative aspects. You should do your research and consider your options carefully to make sure you spend your time and money wisely.

What is responsive design?

Responsive web design involves using HTML and CSS to create grids, layouts and other website elements that automatically respond and adapt to the user's device based on screen size, platform and orientation.

Responsive design provides optimal viewing experience across a wide range of devices, and removes the need to have two separate versions of the website or duplicate your content creation. This makes responsive sites typically easier to maintain and less complicated when it comes to configuration for search engines. Learn more about responsive web design.

Responsive vs adaptive design

Adaptive design involves creating several distinct layouts for multiple determined screen sizes, including mobile phones, tablets and desktop computers. The website detects the type of device a user is accessing from, and delivers the pre-set layout for that particular device.

This can work well and preserve resources if you wish to retrofit an existing desktop site. However, the results don't always display optimally for a wide variety of screen sizes. Most new websites now use responsive as it takes less work to build and maintain.

Separate website for mobile and desktop

Some businesses choose to take the 'separate websites' approach. They create mobile-dedicated websites designed specifically for mobile devices.

This strategy uses server-side logic to send a different version of the site to a user depending on the device they are using. The downsides of this approach are higher costs of maintenance (due to having to maintain two different versions of the site), and greater potential for issues around search engine indexation.

Tips for mobile web design

When designing a mobile website, regardless of the approach you take, 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.