Mobile friendly website design

You may have heard the term 'responsive design' in relation to websites. This is the increasingly common solution to the problem of how to make your website look good on different devices. The 'responsive' part of the term refers to the fact that the website dimensions are automatically altered depending on the dimensions of your screen. It's all one website but 'responds' differently depending on the user's device, so they get the best experience possible.

The unstoppable rise of mobile internet usage

Few people are surprised about the growth of mobile internet usage, especially with increasing network speeds and the popularity of tablet devices since Apple's iPad launch. As the devices themselves become not just more prevalent but better at what they do, the usage will only continue to increase.

Our own website statistics reflect this trend, as our Google Analytics graph below shows. This is a simple graph showing the number of mobile and tablet visits to our website from January 2010 to December 2013 per month (click the image to see a full version including labels).

We're now getting about 8 times as many mobile and tablet users as we did 4 years ago, with the proportion of total visits growing from 2.5% to almost 13%. And the fastest growth has been over the last year, so it's exponential.

Do I really need a responsive site?

While you can't ignore your mobile users, that doesn't necessarily mean you need a responsive website. Mobile browsers are fairly good at presenting websites already, so unless your website is built in Flash (which won't work on iPads or iPhones), it will still work. It's just a bit more fiddly. You have to zoom in to read text or click links accurately, there can be display issues, and sometimes sections of a site won't work.

Mobile internet users may be familiar with this frustration and patient with your website but as more websites become responsive, the exceptions are going to stand out. Brands like the BBC, Google and Amazon already provide a much more mobile-friendly display, and even the smallest businesses are catching up.

What is responsive design?

Where there may previously have been different versions of a website for mobile devices, responsive design presents exactly the same website but adapts it to the size of your screen. So instead of having to cater for every different device and browser that's available, the website can simply adjust based on the size of the screen. It's more universal and more 'future proof' because it doesn't have to react to every individual device.

For people using a mobile to view a responsive website, this means a display that's already the right size without zooming, text that's immediately readable, and faster loading for those shaky outdoor connections. All of which means they're likely to spend longer on your website.

Responsive design in action

Even if you don't have a mobile, you can 'fake' a responsive display by re-sizing your browser window. Try it with our latest e-commerce site for The Cheeseworks:
www.thecheeseworks.co.uk

Once you've got this site open, try reducing the width of the browser window. You'll notice that above 1000 pixels (the size of a small laptop screen), the non-essential space either side of the website is reduced. Bring the width down still further, and it will switch to a single column display. The menu is reduced to a single item at the top of the screen, the banner images are removed, and the content is presented in one scrollable column.

Or click the examples below to see a screenshot:

Want your own responsive design?

Get us to produce the next version of your website and we can include responsive design. We'll work with you to decide how to adapt your 'desktop' design to a mobile responsive version that works across devices. Just get in touch.