After Google launched “Mobilegeddon” or “Mobile-topia” (depending on your perspective) on the 21st of April this year, with their new mobile-friendly ranking algorithm, its now more important than ever to have a mobile website. Mobile-friendliness has been added as one of the important ranking factors, and websites that are mobile friendly will now rank considerably better in mobile search results – this doesn’t just count for mobile phones but all mobile devices, including tablets. If you want to be on top of your game with your website’s SEO, it’s time to jump on to this trend sooner rather than later, and optimise your user experience at the same time.
Because of Google’s recent change, having a mobile-friendly website will soon be a basic requirement – but if you’re willing to spend the extra time and effort to go the distance and make it a good mobile experience, you will be rewarded. A great user experience on mobile could result in a much better ranking on Google’s search engine results pages (SERPs).
When you’re designing a mobile website, it’s recommended to create a responsive website rather than a separate mobile-specific variation of your site. With a responsive site, you only have to manage and maintain one set of data, and you get the same information and data across the desktop and mobile experience. This is important, as users will quickly bounce off your site if they can’t find all the information they’re looking for on the fly.
When you’re preparing your responsive design, it’s essential to always keep in mind that any styling of elements on your desktop site needs to be able to be translated to a linear mobile format in an easy and efficient way. A simple site design is good for the user experience because it makes it easier for the user to access information and navigate through the site. Simple doesn’t have to mean boring or low impact – use your imagination! Because of the small screen real estate, you’ll need to make sure the content and design can be easily read without any distracting clutter that might steal the user’s attention.
With so many people using touch-based user interfaces like tablets and mobiles, there are special considerations you should keep in mind to optimise your website for use on these devices. Based on the average finger size, the recommended height of touch targets like links and buttons is around 44px in height. Users are rapidly getting used to a whole set of different touch gestures to do specific actions, and these can also be utilised on a website – for example browsing through an image gallery by sliding your finger left and right.
There is also some native functionality that can help you on your way by simplifying the user flows. A couple of simple steps like making phone numbers clickable so the user can click to call, and making addresses open the maps app when clicked does truly help. It’s not always very fast or easy to select and copy a group of text, and then open the right app to paste it in. Another thing you can do is to limit the input options for certain form fields – for number fields, bring up the number keypad only – this will make it easier to enter the right kind of information. These might seem like little things, but keeping the user happy and in a good mood can really help with the pathway to conversion.
On mobile devices where your internet connectivity might vary in strength at different times, it’s now becoming highly important to optimise your performance and focus on speed. Google has even backed this up by adding site speed as a new signal in their search ranking algorithms. Site speed reflects how quickly a website responds to web requests – Google found that slow websites resulted in higher bounce rates and unhappy users. The last thing Google wants is unhappy users.
For images, you should try to find a balance between crisp and clean, while still making sure the file size is as small as possible. This might mean having to save your images at 90% quality instead of 100% to get the file size down – users often won’t notice the difference, but it will be noticed in the file size. When it comes down to retina images – which are highly relevant for modern HD mobile screens, you can get away with saving the images at 130% of the size dimensions that you want to display the images at, instead of the full 200%. Large retina images usually take up too much memory, so a smaller file size is definitely a plus. You can even crunch down the size of your PNG files without losing any of the quality with TinyPNG – go check it out!
Mobile devices are continuously taking up a larger part of a user’s day-to-day interactions, and it will just increase with time – emphasising how important it is to get on board and make your website mobile friendly today!
Have a look at the infographic below about the specific design aspects you should keep in mind while designing for mobile. Click on the image for a larger version that you can share with your friends!