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?
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:
- Avoid fixed sizes for elements wherever possible and use percentages so that they will resize
- Set a body text size for the body element in the CSS and then use percentages of this as the font size in headings etc (e.g.
font-size=1.5em— 1em is the initial font size of the element, so 1.5em is 1.5 times that size). Then, in the mobile or tablet CSS styles you just need to set a different (larger) initial body font size (e.g.font-size=16px) and everything else will scale accordingly.
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:
- Pages can be asked to load any CSS or JavaScript asynchronously
- Pages may include small amounts of CSS or JavaScript in-line if that removes the need to load external files immediately
- CSS and JavaScript can be minified (see Useful Links)
- Use CSS styles instead of image backgrounds
- Use vector graphics (SVG)
- Images can be compressed (JPEG, PNG)
To improve navigation:
- Links and buttons should be large enough to touch on screen individually, and not too close together
- Menus need simplification: perhaps as just a few essential tabs or buttons, or the “hamburger” (three horizontal lines) icon can be used to bring up a menu or a slide-in panel
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:
-
type(so that the user gets displayed a keyboard appropriate for entering an e-mail address, telephone number, general text etc.) placeholderso that an example of what is expected is shown in grey as a hintautocompleteso that the browser can fill in known detailsrequiredfor fields that must be completed
Use The Full Device Width
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.
Testing
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
YUI Compressor (for minifying CSS and JavaScript)
Responsive Web Design Basics — Web Fundamentals
