Designing for the mobile web

Multiple different digital devices showing a design of a travel website

As the majority of web surfers now use their smartphones to access the internet, it's important your website provides a flawless experience on smaller screens

Working with a web designer or development agency to create a mobile presence for your company is a good first step, and a task which they should be able to complete relatively easily. You might decide to:

  • Adapt your existing website to work on mobile devices (known as 'responsive design')
  • Create a dedicated mobile website (less popular these days)
  • Develop a standalone mobile app

Create the right mobile experience

Whichever option you choose, you'll want to make sure you get what's right for your business and your website's visitors. Here are four things you should ask your web designer when it comes to creating a mobile-ready website:

1. Streamlined mobile content

Screen real estate is a fancy name for 'space', and it's limited on a smartphone. Because of this, you simply can't provide the full desktop experience on your mobile site. Instead, you need to think about what content to keep and what to leave out - plus how to present and communicate it.

The lack of space is compounded by the inconsistency of mobile browsing speeds. If a user happens to be in an area with a slow mobile internet connection, for example, web pages will take longer to load.

Your website should be designed and developed in the most economical manner. You don't have to remove all images and video, but use them carefully.

2. A layout which doesn't require zooming

Again, lack of space is the biggest consideration for a mobile web designer. Your content should be easily viewable without having to zoom or resize, which can be irritating for the user. Opt for single-column pages with good, clear navigation.

This may mean your pages are longer, but most mobile devices make it easy to scroll down the page - and people are used to viewing sites in this manner.

3. Navigation that's intuitive

This is arguably the most important element of your mobile design. It will show users what they can expect to find on your site and has a big effect on how easy it is to use.

Generally speaking, horizontal navigation bars are out because the page is too narrow, and vertical menus take up too much space. So what are the options?

One idea is to repeat a vertical menu at the top and bottom of the page, so users can drill straight into the content they want. This provides plenty of space for content and makes it easy for people to navigate elsewhere.

Alternatively, many designers create 'accordion' or navigations or 'burger menus' which open on request, thus saving space. If you choose this route, test the accordion function carefully on all main mobile devices.

4. The little things

Little tweaks will make a big difference to your mobile site. For instance:

  • Don't make text too small, as this makes it hard to read on a small screen.
  • Leave space around buttons and links. Tapping a touch screen shouldn't result in the user accidentally pressing the wrong link.
  • Keep images simple to keep the image file sizes down.
  • Design buttons so they change appearance when clicked. This reassures users that they've selected the right one.

What does the * mean?

If a link has a * this means it is an affiliate link. To find out more, see our FAQs.