Due to the increasing popularity of accessing the web on the go, more and more web designers are being faced with the challenges of redesigning existing web sites into more mobile friendly alternatives. Should you be considering taking on such a project, it’s important to be aware that just because you know web design, that does not mean that you know mobile web design.
Designing sites for devices with such small screens and even smaller buttons throws up an entirely new set of potential usability problems. And it’s important to keep such potential problems in mind at all times when designing such sites. I will now outline ten tips for doing just that.
Not only do mobile devices have significantly lower resolutions than most computing devices, even the resolution among different mobile devices varies considerably. While it would be nice to develop a website that is compatible with all mobile devices, aiming to do so is likely to lead to a site that isn’t really compatible with any.
When designing a mobile version of a site, you’re primary goal should be simplicity. You should look at the standard version of the site and ask yourself what can be taken out. Why would you do such a thing? Because unnecessary functionality both increases load times and decreases overall usability. When it comes to web design for mobile devices, less is always more. If it’s not absolutely necessary, you should take it out.
Link Back to the Full Site
On the other hand, occasionally users of the simplified mobile friendly version of a site will want access to something that you have taken out for usability purposes. It’s important for temporary access to such features to be available at all times. A simple link to the full site and a corresponding link back to the simplified version is therefore very much a requirement.
Speaking of links, if it’s clickable, you should make it as large as possible. While this isn’t always easy when space is at such a premium, small links can be very hard to click on touch screen devices. You should also do your best to maximize the space in between different links. Again, this can be difficult, but when links are too close together, it’s becomes very easy to click the wrong one.
Detect Mobile Devices
Many mobile web users are not going to know whether or not your site is available in a more mobile friendly format. It’s therefore important for your site to detect when a visitor is on a mobile device and to redirect them to the mobile version. There is after all very little point in designing a mobile version if most mobile users continue to use the standard one.
Due to the fact that mobile devices are of course used on the go, connection speeds experienced by users vary widely. Optimization is therefore key when it comes to everything from image and video files to overall script minification. It doesn’t matter how much you focus on other areas of usability if your site ends up taking forever to load.
Reduce Scrolling As Much as Possible
Given the size of the screen on the average mobile device, completely removing the need to scroll is going to be impossible. It’s important to try to reduce it as much as possible however.
- You should remove the need for horizontal scrolling by choosing single column designs.
- You should reduce the need for vertical scrolling by reducing the size of the header, the number of photos and the amount of unnecessary content.
Watch out for Readability
Just because a particular font is easily readable on a large screen, that does not mean that it will be suitable for a small one.
- Avoid handwritten font.
- Increase the space between both words and lines.
- Choose the font and background colors wisely.
Avoid Text Input Whenever Possible
If you’ve ever attempted to input text on a mobile, you are likely to agree that it’s not exactly easy or convenient. Therefore whenever it’s possible to remove the necessity of text input, you should aim to do so. The easiest way of doing so is to always offer users options when requesting information from them. When it comes to mobile devices, selecting one option out of ten choices is always going to be easier than inputting text.
Avoid Pop Ups
Finally, not only are pop ups not supported by many mobile devices but even if they were, there wouldn’t exactly be a lot of space to pop up into. Therefore, when designing a website for use on mobile devices, pop ups of any kind should be completely ruled out.
Patrick is a blogger and web design expert at YarraWeb. He thinks web designers have to start designing for mobiles, tablets and smart TV today to ensure maximum sucess for their clients’ websites.