Best practice in web design

Mobile web design is necessary for most modern businesses. 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 create a mobile-friendly website. The three most common strategies are:

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

There are pros and cons to each. What is best for your business will depend on your circumstances, your existing website and the experience you wish to provide to your customers.

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.

Such design provides an optimal viewing experience across a wide range of devices. It also removes the need to have two separate versions of the website and duplicate content. This makes responsive sites easier to maintain and configure for search engines. Learn more about responsive web design.

Responsive vs adaptive design

Adaptive design involves creating several distinct layouts for specific 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 on 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. There are typically higher costs associated with maintenance of, what is effectively, 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 - divide content into smaller segments across pages to minimise download time and make them easier to read.
• The types of content that you use - eg the use of rich media (including animations and video). These will increase download times and may not be supported across all devices.
• The placement of navigation and its ease of use on mobile devices - consider visual cues to provide a better user experience. Use spacing between buttons to extend the clickable area.
• Use mobile-appropriate technology - such as drop-down lists or radio buttons for information input, rather than entering free text (which can be difficult on a keypad).
• Optimising e-commerce functionality for mobile, eg the shopping cart - reduce the steps customers have to take to complete a purchase to 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 vice versa.

See also mobile marketing and m-commerce.