Beginner’s guide to mobile friendly web design

With the invention of smart phones, and the advances in 3G, 4G and now 5G connectivity, came the inevitable rise in people using their mobile devices to browse the internet, but there has always been a lag in websites catering for mobile viewers. There’s an obvious investment required in mobile friendly web design to ensure a website works well on a smaller device, so that’s always going to be a barrier, especially for smaller businesses, however, many larger businesses still lag behind in creating a seamless mobile experience.

Having a mobile friendly website isn’t just a nice-to-have, it’s critical in ensuring our site is easy to use and provides easy access to the information our users are looking for. Giving our users a bad experience on any device is likely to lead to higher bounce rates and lower conversion rates, so improving your website’s usability on mobiles can only be a good thing and a sound investment.

In this article we’ll look at what makes a website mobile friendly and what you can do to ensure your mobile visitors are well catered for.

Optimise your images for mobile viewers

Uploading your images at full size and resolution is going to cause your website to load slower. It will put more load on your server as well as requiring more data for mobile users to download and see the images (not everyone will be on Wi-Fi). If your users have patchy data coverage and connectivity issues, downloading huge images is going to cause frustration and could lead to them leaving and going to your competitors’ sites instead.

The solution? Resize and compress your images before uploading them to your website. If your image will show at 600 pixels wide on your website, there’s no need to upload at image at 4,000 pixels wide, so resize the image to 600 pixels wide and, where possible, reduce the file size by compressing the image. This can lead to a loss of sharpness and quality of the image, so you’ll need to find a balance between the smallest file size and the best quality. We’d recommend using software such as PhotoShop to do this as it gives you more control over the final image.

Create space around buttons and links

We’ve talked a lot about CTAs (Calls-to-Action) and how important they are in improving conversion rates on your website. If your buttons or links are difficult to click (think ‘fat fingers’) on a mobile device, you’re placing a barrier between your customer and their mission of buying from you – don’t do it!

Make sure your links are easy to click on and don’t shrink down when viewed on a small mobile screen. Avoid putting links and buttons close together where there’s a risk of people clicking on the wrong link, causing confusion and frustration.

Check your forms

A form on your website is usually something you want users to fill in. Whether it’s an enquiry form, a request a call back form or the new customer registration form and payment details for your ecommerce website. Making forms difficult to use is probably one of the most costly mistakes you can make with your website.

The usability of online forms is the topic of another article as there’s so much to consider, but on mobile devices, it’s vital to make sure form fields fit on a small screen, form labels are still visible and lined up as you would expect and that the submit button is large enough and positioned logically to make form filling on a mobile a doddle.

Avoid massive pop-ups

Cookie banners, privacy notices, newsletter opt in popups – they’re everywhere! Some of them are simply huge and fill the entire screen on a desktop computer, let alone a mobile screen. The problem with these pop-ups is that they’re often difficult for mobile users to close or even locate the ‘Accept cookies’ button as it’s off screen. If you have any pop-ups on your website, make sure they’re easy for your small screen friends to close.

Test it yourself

Sure, you can use Google’s mobile friendly test to give you an idea as to whether your website is mobile friendly, however these tools have their limitations and don’t really see your website as users do. There’s really no substitute for manually testing your site yourself. Load up every page, click on the links, fill in your forms. Is there content disappearing off the side of the screen? Are there images that take forever to load? Are your forms easy to complete? Did you accidentally click on the wrong link? Were you able to successfully add a product to the shopping cart and check out (if your site has that functionality)?

Ignoring mobile users is like leaving money on the table. Mobile friendly web design doesn’t need to be rocket science (or cost the earth); just by making a few tweaks to cater for your small screen viewers, you’re improving the usability of your website, improving engagement and ultimately increasing the likelihood of generating more leads and sales.