Created 22nd November 2013
8 secrets of great mobile website design
With 85% of the adult UK population owning a mobile phone, and mobile web-surfing set to overtake desktop surfing, building a mobile website has never been more important. But designing mobile websites means having to contend with tiny screens and limited battery life and functionality. So what’s the best way to make sure that your mobile website design is good enough to encourage conversions rather than frustrating customers? Here are Oxygen’s seven secrets of great mobile website design.
“Think seriously about the functions your customers need most on-the-move and re-orientate your content priorities accordingly.”
Mobile website design secret #1 – design for context-specific function first
First, you will need to think seriously about the functions your customers need most on-the-move and re-orientate your content priorities accordingly. If you’re a chain, a map with store locator and time sensitive discounts could be the most important thing to display first. If you’re a newspaper, your top five stories may be what your users want to see. Display a ‘make a reservation’ button on the homepage if you’re a restaurant or hotel. And add a ‘click to call’ feature to encourage users to get in touch, when that’s what they’ll need to do. Include QR and barcode scanning. A site that doesn’t let the user do what they need to, quickly and easily, will simply put customers off.
Mobile website design secret #2 – streamline content
Mobile websites have to display on tiny screens with extra room for large navigation buttons and large fonts to make them readable. There simply won’t be much room for content. If you’re an online store, cut down the number of categories listed on your homepage to the essentials, and if you’re a blog, list top posts with a ‘read more’ option. There’s no need to try to cram everything that your main site displays in. Include a ‘go to main site’ option at the top or bottom of the homepage instead so that users have that option.
Mobile website design secret #3 – easy-to-use design
An easy-to-use mobile website is an attractive mobile website. Keep text readable and use combinations of colours that are easy on the eye. Remember that users dislike having to scroll too much, especially in two directions. So one of the most user friendly ways to design a mobile website is to limit yourself to a single column so that any scrolling needed only has to happen vertically. Make sure you don’t defeat the purpose by making your text size so small that the user has to zoom in – they’ll then have to scroll horizontally to read the ends of lines. Limit text input by the user (because typing with a small screen keyboard is always a frustrating exercise) and try to keep to a short url, so that your mobile website can be found easily.
Mobile website design secret #4 – streamline functionality
Mobile users have limited battery life. Sometimes they have limited data download options and a dodgy internet connection. They don’t want to have to wait ages for your site to download because you’ve incorporated fancy animation or sliders etc. Avoid Flash, Java Applets, frames and pop-ups. Keep image sizes small and make your site light enough (with compressed images and reduced code) to download fast. Limit the use of HTML5 features such as geo-locational positioning, and complex canvas animations to places where they’re absolutely needed. Don’t set pages to refresh automatically as this uses up the device’s limited memory – let the user do this themselves. Just finally, don’t forget to make sure your server will detect mobile users and send them the mobile version of your site automatically.
Mobile website design secret #5 – make navigating the site easy
Most mobile users will be accessing your site on-the-go. Quite apart from displaying the information they’re most likely to need first, your site should also be easy to navigate. Limit the number of layers in the site to three or less. Include a ‘back to top’ button on long pages. Consider using drop down menus. And design with large text in a good web font which is easy to read and large buttons which can be operated with a thumb. These are essential because if a user accidentally presses the wrong button, they have to spend time and battery life waiting for the wrong page to load before they can navigate back to the page they want. Infuriating… Make sure your users can get where they need to go with the minimum of taps and swipes.
Mobile website design secret #6 – test, test, test…
The most obvious thing to test is that your site displays well on all the myriad formats and devices which your customers use. Using analytics to find out which formats your customers favour takes the guesswork out of the process. Remember that not all of them will upgrade to the latest technology, and keep your site technically flexible enough to display on older devices. Don’t forget to test that all the links on your site work. The other thing to test for is usability. This can only really be done by people who haven’t been involved in the design. Your customers are the very best people to test on, as they’ll be able to tell you if crucial information is missing or should be prioritised further up the content hierarchy.
Mobile website design secret #7 – link to social media
An obvious way to build brand awareness is to help users act as ambassadors by building in links to social media. Think of it as a two way process. Users may stumble across your site when looking through social media sites on their phones, so post your mobile website url to your Facebook, LinkedIn and Twitter feeds. And add social media buttons to your mobile website so that users can ‘like’ and share it.
Mobile website design secret #8 − understand that things will change
Okay, this is an extra and not so much a secret as a perspective. The pace at which platforms are developing is huge. Things that weren’t feasible in mobile website design a year or even six months ago, are very possible now. The code your mobile website designer writes today may not work in a couple of years. On the other hand, more sophisticated platforms may have opened up other ways in which to engage with your customers via their mobiles. So enjoy the advances that changing technology brings you…
Still feeling confused about how to make your mobile website work well? Give our award-winning designers a call today on 0845 26060 255. We’ll make sure your on-the-move customers find you.