How to Create Websites Optimized for Mobile

mobile-phone2Mobile Internet is on the rise all over the world. Many commentators have predicted that mobile search will overtake desktop by 2015 and in some countries, including China and India, this is already the case.

If you’re not tapping into this market on the move you’re missing out. And the “expectation gap” for mobile performance is also growing quickly, with mobile users expecting faster load times and sites optimized for handheld devices. A survey by mobile and web performance management firm Keynote Systems Inc. found that 64 percent of smartphone users in the U.S. wanted a site to load within four seconds, with 16 percent of respondents saying they would not return or wait for a site to load if it takes too long. After loading times, non-optimized sites were the second biggest gripe.

Clearly it’s not always enough to have a single website that can be accessed from mobile and desktop browsers alike. Mobile users expect a different experience from the one they’ll get on your standard website. There are some relatively simple steps to help ensure they get what they want.

Simplify Your Design

The small screen size of mobile browsers demands a different approach to desktop website design. Clear, simple designs work best, preferably in a single column, as most users don’t want to be scrolling sideways across a page as well as up and down. Pages should not be cluttered or crammed with too much information. The use of white space can help achieve a clean, unfussy look and make your mobile-optimized site clearer and more navigable.

Optimize Your Content

Before adapting your content you should consider what visitors actually want from your site. Most people do not casually surf the web on mobile devices the way they do on desktop. Instead, they tend to visit sites with a particular aim in mind. This may be to check the prices of your products, to find directions to your store, or to find a specific piece of information depending on the nature of your business and site.

Almost invariably, they don’t want to read a lengthy mission statement, detailed staff biographies, or learn that you’re a great equal opportunities employer. By all means include links to the full version of your website where you can cram in as much information as you like. When thinking of mobile usage, however, think primarily of functionality.

Make Navigation Easier

Users do not want to be clicking through numerous pages and it’s usually best to put the most important information and functions on the opening page where possible.

When other pages do have to be accessed you should make the process of navigation as simple as possible. Don’t forget that the small screen size of mobile browsers is not ideally suited for clicking on small items. Many mobile devices use a finger as the primary input device and this can be considerably less accurate than a mouse cursor when it comes to clicking the correct button or link. Clearly marked, reasonably large buttons are generally far better than tiny hotspots, clickable images, or embedded text links.

Similarly, it can be useful if you minimize the amount of text a visitor has to enter in order to achieve her goal. Using dropdown menus, checklists, and pre-populated fields as a means of data entry can all help minimize the amount of typing a visitor has to do on a small handheld keyboard and streamline the visit.

Minimize Load Times

If you’ve already simplified your design, that will also reduce load times. But there are a number of additional things to bear in mind. Flash might be great for regular websites, but too much animation can have a major effect on load times. Not to mention the fact that Apple products do not support Flash at all – a big deal considering the iPhone is 30 percent of the smartphone market. Java can also be a huge drag on load times. It’s often better to simply do away with animations and automatically-starting video and audio effects altogether.

Large, high-resolution images can also affect load times. Consider whether all your images are necessary. Do they add anything essential or are they just decorative? Ensure any images you do use are sized and optimized for the mobile format.

Make Your Brand Recognizable

Your mobile-optimized site is likely to be considerably different to your regular site, but a customer who visits both should still feel they stem from the same source. Logos, tone of content, and other branding elements should carry over from one site to the other. This will help to make a strong impression on new visitors and add a sense of familiarity to repeat customers – the single most important asset a business can have.

Related reading

top trends to increase value from paid search spend
what can we learn from voice search in 2018?
Google Ads 2019: What to look out for
mobile search and video in 2019: how visible are you?