5 Tips to Help You Design a Mobile-Friendly Website Your Customers Will Love
Have you ever wondered exactly what all those people scrolling on their phones are looking at? Whether you’re in a restaurant, on the train or out for a walk, you’ll undoubtedly see people checking their phones – but for what?
The answer isn’t always Facebook. In March 2015, internet access from mobiles overtook internet access from desktop computers for the very first time (Comscore, 2015). Millions of people every day are using their mobiles to get online, from checking social media to browsing for new products on company websites. If you’re not sure why you should have a mobile-friendly website, read this article, then come back here for tips on how to get there.
Responsive web design in a nutshell
When developing a mobile-friendly website, we’d recommend investing in a responsive design. This is a website with a flexible layout that automatically rearranges itself to adjust to someone’s device and screen size. The pages adapt to the device they are being viewed on, which means different parts of the page might be condensed or swapped around. Certain elements (like buttons) might also change so they are easier to see or interact with on a small screen.
Here is an example of an effective responsive website design.
Traditionally, a business would have built a website to suit each device: one for laptops, one for mobiles, etc. Responsive technology now means you only have to build one website, which will work with any device someone might use.
Here are some tips that will help you make sure people love your website on any device.
1) Think mobile first
Responsive websites can be complex to plan and build, as you have to take into account that different elements will rearrange themselves to fit your visitor’s device. Make sure you work with someone who’ll help you take a ‘mobile first’ approach from the very start, so you design for the smallest screen to start with and scale up from there. For some more ideas on appealing to mobile users, read this article.
2) Make things the right size
People looking at your website on their smartphone will be looking at a much smaller screen than those on a tablet or laptop. Some of the major problems for people on mobile are the size of text and whether they’re able to interact with it properly. Mobile users don’t have the benefit of a mouse and will use touch screens to add or find out information. This means that all text, links, buttons, forms and boxes need to be big enough to be used by fingers and thumbs.
3) Keep navigation simple
Smaller screen sizes mean you should try and keep navigation on your website as simple as possible. Drop-down menus can be difficult to use on mobiles, and the longer the list the harder it can be to click on individual items. Keep the number of menu options to just two or three if you can.
4) Choose bold, clear images
When deciding on the images to use on a responsive website, make sure you choose ones which will be easy to see even when they’re shrunk down to the size of your phone screen. Anything with lots of detail, or low quality, or overlaid with lots of text will be difficult to see – you can always check this by emailing the image to yourself and then opening it on your smartphone.
5) Keep text concise
As mentioned, text that’s too small will be difficult for mobile visitors to see. But if your messages are too long, they’ll get bored scrolling down the page. Put your most important message at the top of the page, make it short and encourage visitors to keep reading with compelling language. You should also consider using visual devices such as bullet points and sub-headers to help break the information up and make it easier to scan.
Creating a responsive website can be done without any outside help; many free website builders will now help you make a responsive website as standard, such as WordPress. However, if you have a complex site or would prefer a helping hand, there are plenty of expert providers who will be able to manage the whole process for you (including us).
For more help on making sure you’re mobile ready, read our dedicated guide.
Have you enjoyed this article? Share it with your colleagues on social media…