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

  • 123netspeaksolutions

    I disagree with much in this article. You simply need to know the market you’re catering to and use responsive design (one URL) as much as possible. It’s already been shown that when you optimize search for the desktop but design for the smallest mobile device (on one URL) then you can win big in traffic and conversions.

    In addition, you can “hide” certain text from smartphones and tablets and also call various sized images for various devices (rather than cramming one large desktop image down in “x-y” size – but not kb size).

    Also, catering to feature phones is now a complete waste of time. They are disappearing at a faster rate than all mobile devices combined. Moreover, no user expects such a device to render a beautiful UX or a rapid load time. If they do then they’re likely not worth the time to try and convert them as a sale!

    Finally, who has time to maintain 3 different sites, let alone trying to do search and ad optimization for all of them?  

    • Lakshmi

      Responsive design is definitely a promising direction in mobile website design, but there are many situations in which it is not possible to adopt a responsive approach on an existing website. In addition, from the data we’ve gathered from the MobStac network, iPhone and Android devices add up to less than 50% of worldwide traffic: in most parts of the world outside the US, Blackberry, Nokia, and other devices that ship with a wide variety of browsers, it is simply not an option to rely on a pure responsive approach that makes use of CSS3 media queries.
      User experience is key on mobile devices because the user rarely has the time or the patience to engage in a lengthy exploration of the website in question, and in that context, speed of render and delivery of pages becomes critical, which is why we recommend paying attention to those details. 

  • MAW

    Agree with 123netspeaksolutions. Having a mobile version of a website is a very outdated concept. Have one site that’s optimised to be viewable on all devices.
     

  • MAW

    What do people think are the benefits of having a mobile version of a site? Unless you’re doing something transactional, there doesn’t seem to be any benefit. I for one always go to the ‘real’ site, as the mobile versions are poor relations in terms of information. 

  • Lakshmi Harikumar

    Responsive design is definitely a promising direction in mobile website design, but there are many situations in which it is not possible to adopt a responsive approach on an existing website. In addition, from the data we’ve gathered from the MobStac network, iPhone and Android devices add up to less than 50% of worldwide traffic: in most parts of the world outside the US, Blackberry, Nokia, and other devices that ship with a wide variety of browsers, it is simply not an option to rely on a pure responsive approach that makes use of CSS3 media queries.

    User experience is key on mobile devices because the user rarely has the time or the patience to engage in a lengthy exploration of the website in question, and in that context, speed of render and delivery of pages becomes critical, which is why we recommend paying attention to those details. 

  • http://twitter.com/kent_ong Kent

    Malaysians make most of the mistake. They love heavy image, flash here and there. Hard to navigate, etc. They should read your blog post. :)

    • Lakshmi

      Thanks Kent

  • http://twitter.com/MyMcart MymCart

    Wouldn’t you agree that “Nearly 50 percent of your audiences already use mobile as the primary internet access device” is far less important than the % of users of your own website that use mobile?

  • NowMobileME

    well written article on how to convert to mobile! http://www.nowmobile.me