• Share
  • Share
  • Share
  • Share
  • Share

Posted by Melanie Smith on 06 May 2015

How mobile friendly is your website? Find out with our handy checklist

Mobile technology is now a fundamental part of our lives, with smartphones being used in pretty much every aspect of our day - emailing, social media, web browsing, shopping, weather checking, dating, fitness tracking, navigating, music streaming, games playing – the list goes on and on…

Therefore it's becoming increasingly important to consider mobile devices when creating or transforming your website – a significant number of your audience will be accessing your website on a mobile device. The stats back this up with the fact that 7 out of 10 people in the UK now own a smartphone and many of them use their smartphones for far more than just browsing.  In 2015 a third of all online sales in the UK took place via smartphones and tablets, with that figure due to rise to over 40% by 2019.  To help make sure that your website is mobile-friendly I've put together a checklist of things to consider:

  1. Be Responsive
    Quite an obvious one but definitely one of the most important. Don't just focus on one or two screen sizes but consider what may be released in the future. Allow your website’s page layout to adapt to all different shapes and sizes.
  2. Keep it simple
    Your website should be clean and intuitive to use. Not only will this portray a clean image to users it is especially important when you consider how it will look on a mobile device.  Icons can offer simplicity and help to reduce text - look out for links and content that could be replaced by an icon.
  3. Keep content short
    You want to make your message as clear to read as possible. When writing content think about the smallest screen size that it will be read on and how much scrolling the user will have to do to read the entire message. Most people will write their content and check it on a desktop sized screen and it will look fine. However that content could double or triple in length in mobile view, making it more difficult to read. 
  4. Consider fat thumbs
    I'm sure many of us have accidentally clicked the wrong link because two links are too close together or too small to select without zooming in, and it can be extremely frustrating. A responsive website needs a lot of space between links to prevent this from happening. Links should be large and selectable - a rule of thumb (excuse the pun!) is that links should have at least 45 pixels of breathing space around them.
  5. The speedier the better
    Keep web pages clean and avoid the use of JavaScript where possible. It may result in slow loading which could be dire if the user connects via 3G. If Javascript has to be used make sure it is as light as possible and always check if the same result can be achieved with CSS.
  6. Beware of heavy load-time on large images
    Maybe swap out large photos for smaller ones when viewing in mobiles. It might also be worth thinking about rendering images only when they are in view, if there are a lot on one page. 
  7. Don't forget about forms
    Forms should be optimised for mobile use. Think about how easy it will be for a mobile user to complete the form. Form fields may need to be larger than their desktop versions, as a mobile user will be selecting fields with their thumbs. Make sure to use the mobile 'done' buttons for focussing out of a field. HTML5 helpfully identifies field types such as email, which can alter a mobile keypad to include typically used characters for that field's type such as the '@' symbol. 
  8. Minimise the number of fields that need to be entered on mobile
    Forms can be fiddly when filling them out on mobile so only ask for essential information. 
  9. Use built in mobile capabilities
    GeoLocation is a great example. Instead of showing an image of a location, make use of the mobiles maps to show directions of where to go.
  10. Sharing buttons
    Use social media apps to make sharing/checking in easier. When displaying phone numbers allow the user to click that link to direct through to a phone call.  
  11. Test, test, test
    Test your mobile website on as many devices as you can possibly find. View the website as a user, and ask yourself is there anything in this website that could become a challenge? Would you be happy to return to this website? And was your experience enjoyable? 


It’s also really important to be aware of Google mobile search algorithm changes – these mean that websites which are deemed more ‘mobile’ friendly by Google show up higher in search results than ones that aren’t – find out how to check how your site performs in our earlier blog post

Want some help?

If you need any help making your website mobile friendly please get in touch – we would love a chat!! 

Images courtesy of Shutterstock unless otherwise stated 

Comments:

Close up of man wearing sunglasses with green cyber design on the lenses

The new Google Mobile Algorithm: What is it and what do I need to do?

Get prepared for the Google Mobile Search Algorithm changes coming soon

2 Minutes

white mobile phone with a red felt heart shape lying on top

Is your email marketing showing love for mobile devices?

2 Minutes

a line of 7 yellow stools against a burgundy wall in a waiting room

Hello BBC News responsive site! I've been expecting you...

Our Director of User Experience James Oliver takes a look at the newly launched BBC News responsive website design

2 Minutes

Interested?

If you think we might be a good fit for your business, fill out the form at the link below and we'll send you our agency playbook. It contains lots more information about us and what we're like to work with.

Send me the playbook