By Lakshmi Harikumar published June 27, 2012

7 Tips for Creating the Right Mobile Experience for Your Website

creating the right mobile experience, CMINearly 50 percent of your audiences already use mobile as the primary internet access device. In other words, you are losing nearly half your audience if you do not make your website mobile-friendly.

But does mobile optimization mean creating a miniature version of your website to fit the smaller mobile screen?

Not at all.

When creating a mobile website, you need to keep the mobile visitor in mind as your primary target audience. To help you do this, I have laid out the following best practices for providing the best possible experience to your mobile visitors.

1. Keep it simple

Your mobile website home page should only display the most relevant information. (With a well-defined navigation structure, you’ll be able to add more details later.) Do not try to cram all the information you provide on your website into your mobile site. Instead, include a link to the desktop version from the mobile site, for users who want to dig deeper into your content offerings or need additional information.

Include information like phone numbers, addresses and maps which would be useful to people on the move. Instead of giving a detailed description about your organization, provide a one-liner which is good enough to entice your mobile audience.

A good example of this strategy would be the New York Times’ mobile site, which has a clear layout that displays the most important headlines on top and shows other sections of interest as users scroll down.

new york times for mobile, CMI

 

new york times for desktop, CMI

This example also demonstrates the efficient use of white space — this will give your mobile home page a simple, yet organized look.

2. Don’t make ‘em wait

To retain your mobile visitors’ attention, your mobile website has to load in less than 5 seconds. It’s been found that 58 percent of mobile phone users expect websites to load as quickly, or faster, on their mobile devices as they load on their desktop computers. For this, avoid heavy graphics that increases the page load time.

It’s also important that your web developer load only the minimum set of JavaScript and CSS files, and for modern mobile browsers use HTML5 and its rich feature set.

3. Avoid “heavy” graphics

Avoid using large, Flash-based video files on your mobile site, as most smartphone browsers do not support Flash. Instead, use simple images to improve the look and feel of your mobile website — but make sure all images used on the desktop are set to resize automatically to fit a mobile device’s smaller screen sizes.

4. “Touch” is the new “click”

With the rapid evolution of touch-based smartphones and tablets, touch has taken over typing. When designing your mobile site, use drop down menus, check boxes, and pre-populated fields whenever possible, so that your mobile visitors can navigate and input information easily rather than having to fill in long forms.

lufthansa for mobile, CMI

lufthansa for desktop, CMI

Consider Lufthansa’s mobile site, which lets users book air tickets, check in to flights, and much more. Despite the fact that booking an air ticket needs a lot of text-based input from the user, the homepage does not have any text boxes. Instead, all the important information is categorically arranged into buttons or tabs, which the user can click on to learn more.

5. Every device is important

When building a mobile site, remember that you are not just catering to iPhone and smartphone users — keep visitors with feature phones in mind, as well. Your mobile website should work flawlessly on devices with various screen sizes and on various mobile platforms and operating systems, including iPhone’s iOS, Android, Blackberry, Nokia, and even feature phones that use Opera browsers.

We recommend an approach where you use device detection to determine what the end user uses and serve an appropriate version of the mobile website based on that. A good example would be Facebook, which detects devices automatically and renders a compliant version.

6. Redirect your mobile visitors automatically 

Do not forget to redirect your mobile visitors automatically to your mobile website. Your webmaster can do this by creating a subdomain of your main website (typically m.yoursite.com or mobile.yoursite.com), which will serve as your mobile website. 

7. Track your mobile visitors

For all you know, your mobile website traffic might have surpassed your desktop website’s traffic. If you have an analytics system in place, such as Google Analytics, create a separate profile for your mobile website. This will help you track your mobile traffic and desktop traffic independently, which will, in turn, help you understand how your visitors behave differently on your mobile website as compared to the desktop website.

Want more content marketing inspiration? Download our ultimate eBook with 100 content marketing examples.

Author: Lakshmi Harikumar

Lakshmi Harikumar anchors the content marketing efforts of MobStac Inc. MobStac is an HTML5-enabled mobile cloud publishing platform that seamlessly integrates with your existing website and makes your content accessible to mobile and tablet devices through mobile sites and apps. MobStac lets you publish content once and manage sites across all mobile and tablet devices through a unified dashboard.

Other posts by Lakshmi Harikumar