Browsing the web should be an enjoyable experience for all users of all device types. Users can get frustrated when a website is difficult to use on a mobile device, so it’s important that your website is mobile-friendly. These five tips will give you a great start.
Don’t Make the User Zoom and Pan
If there wasn’t a mobile-friendly version of Wikipedia, this is what it would look like:
Notice that the text is very difficult or, in some cases, impossible to read, so you need to zoom in. But once you zoom in to the point where the text is large enough to read comfortably, some of the text gets cut off, making it so you have to pan back and forth as you read, as shown here:
If you zoom back out until none of the text that you’re interested in gets cut off, that removes the need to pan back and forth as you read, but the text is still quite difficult to read, as shown here:
Fortunately, there is a mobile-friendly version of Wikipedia:
Notice that the text is large enough to read comfortably and you don’t need to zoom in or pan. Much better! This mobile-friendly setup can be achieved by implementing responsive web design. If you need help getting started, I recommend reading the Treehouse blog post The 2014 Guide to Responsive Web Design.
Allow Zooming Whenever Possible
Even if your website is designed so that the text is large enough for most people to read comfortably, some people may still want to zoom in. This might be because their vision isn’t the greatest, or because they have big hands and are using a device with a small screen and want to make sure they don’t tap on the wrong link. Thus, you should avoid setting the user-scalable property of your viewport meta tag to no:
<!-- Please don't do this -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">You may run into a technical reason that you need to disable zooming, but that should be the exception, not the rule.
Provide Large Tap Areas
Anything that the user can tap on should be large enough that it can easily be tapped on. It should also not be too close to other things that can be tapped on or else you might find that your users are often tapping on the wrong thing.
Handle Mobile Keyboards Correctly
HTML5 provides many useful input types for your forms such as <input type="tel"> and <input type="email">. Not only do these input types help with client-side form validation for both desktop and mobile browsers, but they also let mobile devices know which keyboard layout to use. To see what I mean, have a look at these two keyboard layouts:
If you have a form that asks the user for their phone number, using <input type="tel"> results in the keyboard layout pictured on the right up above (the one optimized for number entry) being used automatically.
You should certainly take advantage of the input types introduced in HTML5. For more details on this tip as well as some additional tips on handling mobile keyboards correctly, see the Smashing Magazine article A Guide To Designing Touch Keyboards (With Cheat Sheet).
Make Your Website Fast
Having a fast website is always important, but it’s especially important on mobile devices. If your website loads slowly on a desktop computer with a decent Internet connection then you can be sure that it will load really slowly on a mobile device.
There are many things that contribute to the speed of a website. A big one is images. You should make sure your images are not unnecessarily large, speaking both in terms of dimensions and in terms of file size. I’ve seen many websites that have a large image (3+ megapixels) that is being scaled way down when displayed. This is a waste of bandwidth. In addition, most image editing apps don’t save image files as efficiently as they could, which also results in wasted bandwidth. Apps such as ImageOptim can help with this.
Another thing that helps speed up your website’s load time is minifying your assets (e.g. CSS and JavaScript files), combining them, and inlining them when appropriate. This reduces the number of HTTP requests your users need to make.
One other suggestion that helps your website to feel snappy is to use client-side form validation. This way, if a user doesn’t fill out a form correctly, they don’t need to do a full page reload in order to find that out.
For more ideas on speeding up your website, have a look at PageSpeed and YSlow.
Recent Comments