Do’s and Don’ts of Mobile Website Optimization

Probably every person with a smartphone has at least once experienced the frustration of trying to view a desktop website on their mobile phone. The reason of this frustration is pretty straightforward: websites designed for desktop don’t work well when viewed on mobile devices. And sometimes, they don’t work at all.

In acknowledgment of the differences between the many devices that are now used to access the Internet, building websites that deliver a consistent user experience is becoming a norm.

The process of optimizing for mobile usually starts by switching to responsive design. This allows your website to automatically adapt to the device it’s being viewed from. But that’s not all. Mobile optimization also considers website structure, speed and other elements with the end goal of enabling mobile users to access information and perform needed tasks with ease.

In this article we’re going to explore how to approach some of these factors that need to be considered when optimizing website for mobile users.

1. DO Design with the User in Mind

Every business or individual looking to adapt their existing website for mobile audience should keep users in mind at each and every stage of the process. They should be aware who their audience is, what they need and expect from the website and how they behave when they interact with the website on their mobile or tablet devices.

For example, a large portion of mobile users expects to be able to access the location of a business or its phone number quickly. To accommodate user intent, businesses should consider placing “Call” and “Get Directions” buttons on their website to simplify these most common tasks and to make sure that mobile users can easily get to them.

2. DO Make Text and Icons Large Enough to Read and Tap

Mobile users easily get frustrated with clunky websites where the text is so tiny that they have to struggle to read it and where buttons are so miniature that it’s a challenge to tap the one you actually intended to tap. Let’s face it – unless users are able to navigate a website super easily, they are not likely to come back again.

To make your mobile website more user-friendly in terms of readability and navigation, use a font size of 16 pixels at minimum and a line-height of 1.4. Also, make sure all your buttons are clear and large enough for fat-finger taps. You should leave at least 8 pixels of white space between the button content (text or image) and its border, as well as 15 pixels of margin around the button. Remember, spacing on mobile websites has more importance than on desktop websites because of the constraints of screen size and touch-screen resolution.

content_border_padding_margin

3. DO Build for Speed

With mobile users, it’s all about speed. If your site does not quickly deliver the information users want, they will leave. According to Citrix research, one-third of all users will abandon a website after waiting 5 seconds for it to load. After 10 seconds, more than half of all visitors will leave. Finally, more than two-thirds will leave a site if it hasn’t loaded within 20 seconds.

Luckily, there are several things you can do to quickly improve the speed of your mobile site:

• Eliminate large files, such as graphics, to reduce the load on mobile browsers;
• Rather than using full-size HD images, compress images so that they will load faster;
• Remove animations and keep things simple;
• Minify website code so browsers have less information to interpret while loading.

4. DON’T Create Clutter

When a mobile website is loaded with excessive content, it can appear as a huge mess where users have a hard time finding their way around. Some will probably give up before even trying and leave to a competitor’s site that offers a more streamlined experience.

To prevent this problem, it is best to keep your site elegant, clean, and easy to use. One of the first things to think about is streamlining your content. First of all, you will need to analyze each page of your mobile website to define its unique goal. When you’ve done that, include only the content that contributes to achieving that particular goal and filter everything else out.

5. DON’T Make Your Mobile Site Too Light

During the mobile optimization process, you might feel tempted to eliminate some of the features that are normally available in the desktop version of your site. But even though you should definitely do everything you can to shorten the site loading time and improve its usability, the absence of some of the essential features could disappoint your visitors and render the website useless.

Here is an example of a business that does a great job with their mobile website in terms of the features it offers:

Starwood Preferred Guest is a hotel and accommodation booking service that cooperates with some of the biggest names in the industry. In the desktop version of their site, they offer users the possibility to explore, book and track their trips.

starwood_preferred_guest_screenshot

If you take a look at their mobile website, you will notice that the same features are available there. Users can browse hotels, watch photos and videos, check room specifications and hotel features, read guest reviews, get directions, book a room, track their trip and more. In other words, they can access all the information they could possibly need – through a simple user interface and at a great loading speed.

starwood_mobile3 starwood_mobile2 starwood_mobile1

Wrapping Up

The specificity of mobile web requires website owners to go out of their way to make sure people can have a satisfying and beneficial experience when they visit a website from their smartphone or tablet. By making the user experience fast, friendly and functional following the do’s and don’ts you’ve just read, you can keep the attention of visitors and make mobile work for you.

Guest article written by: Taylor Moore is a freelance copywriter with a passion for small business and retail marketing. For more talk on content marketing, conversion optimization, branding and customer service, follow her @taylormtweets.

Leave a Comment