If there is anything in this article that sparks your interest, please contact us.

Feel free to share or discuss this article with colleagues on social media using the buttons below, or discuss on our LinkedIn or Facebook pages.

View all articles


Making a Web Site Mobile-Friendly

Increasingly, people are accessing web content from mobile and tablet devices rather than from desktop and laptop computers. Often, customers will start searching or viewing on a mobile device and switch to a desktop device later. To engage customers it is therefore important to present a consistent image regardless of how they access content on any platform. Also, from 21st April 2015 Google are promoting mobile-friendly web sites up their search rankings so it pays to be mobile-friendly!

This article discusses the issues and explains some of the steps to creating a mobile-friendly web site, using our own site as an example with before and after images!

What's The Problem?

Original desktop web site viewed on mobile device

Web sites which have not been designed for, or upgraded to work on, smaller screens will appear small and unusable to users on mobile devices — see our old web site in the image on the right: the text is difficult to read; the user will often have a touch screen and have to pinch to zoom in and out; scroll horizontally and vertically; and links and buttons might be too close together or not work because they rely on features such as hovering over a link, which does not work on a touch device. Sites where users also have to fill in forms can also be difficult to use because of poor design. These problems can of course be solved by better design, some visually and some in the coding to help the user complete tasks with fewer touches or clicks.

The Solution

Create a Responsive Web Site Using CSS

The web site design needs to be different for smaller screens and the most flexible way to do this is with a responsive web design — one that automatically adapts itself to the screen or window size. If the web pages have been coded using CSS (cascading style sheets) it is possible to have different styles apply with different media types or sizes, thus instructing the browser to format the page differently for each. Typically a site would need to handle desktop, tablet and mobile sizes, or perhaps just desktop and mobile, with additional CSS files. Within the CSS the designer can use media queries to ensure that the styles apply to a certain type of device.

As our standard web site has a fixed width of around 770 pixels we want to show a different view once the screen is smaller than that. So, on our new mobile-friendly web site we use the following for mobile devices:

@media screen and (max-width: 770px)

TIP: This can be tried and tested on a desktop simply by resizing the browser window.

Some key points when creating a responsive web site are:

Create a Great User Experience

To get a great user experience the web site needs to load quickly and be easy to navigate:

To help with faster loading:

To improve navigation:

To improve the user experience when filling in forms they should use the full device width when in portrait orientation on a small screen, and the label (e.g. E-mail) should be linked to the input field using the label tag so that the user can touch either to start typing. The form should also make use of the input field attributes:

Use The Full Device Width

Mobile-friendly web site viewed on mobile device

Once a responsive page has been created, the last step is that the page should specify a viewport, which is the visible portion of the document. If no viewport is specified in the meta tags of the page the browser renders the page into a large viewport and then scales that to fit into the browser window. However, if the page specifies a viewport with the width being the device width, the page is rendered to fit into that space — the web designer is informing the browser that the page has been designed to fit into that space. The user should only now need to scroll vertically — as you can see in the image of our new mobile-friendly web site on the right.


Finally, I suggest initially testing the new web site using a few different browsers on a desktop device and resizing the window to mobile or tablet size, portrait and landscape, to see that the design re-flows and works. Then, test on a few real mobiles or tablets to ensure that it looks great and has a good user experience. You can use some of the Google developer tools (see below) for some very useful feedback too.

The design and coding tips above give an outline of how a good responsive web site can be created. For further help please get in touch or check the useful links below.

Useful Links

Google Mobile-Friendly Test

Google PageSpeed Insights

YUI Compressor (for minifying CSS and JavaScript)

Responsive Web Design Basics — Web Fundamentals

Use CSS media queries for responsiveness — Web Fundamentals

Label and name inputs properly — Web Fundamentals