Mobile UX: How to Design and Build For the Best Results

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 optimize 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).

Responsive Design

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 optimize 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.

Performance

On mobile devices where your internet connectivity might vary in strength at different times, it’s now becoming highly important to optimize 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.

There are several tricks you can use to make your website generally faster – even though these will benefit both your mobile and desktop experiences, you will probably notice a bigger difference on mobile since these devices are likely to have a slower connection. The main thing you should focus on here is to keep your files as small as possible – both your images, your CSS and JavaScript.

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!

A similar way of thinking can be applied to your CSS and JS files. Consider if you really need to include a large JavaScript library to do one cool effect, or if it can be done in a simpler way with less code. Try to structure your CSS in a way so that you can re-use classes and make it more efficient. Once your site is ready to go live, minify your CSS to get rid of any whitespace that might add to the file size – resulting in an overall smaller CSS that loads faster.

Moving forwards

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!