m.CRO: Conversion Optimization on Mobile Sites

Gone are the days when everyone accessed websites from a desktop or laptop computer. Many people now browse the web from their smartphone or tablet daily, and some have even completely replaced their computer with these more portable devices. Businesses that plan to stay competitive have got to optimize their sites for mobile. I’m not talking about making an app – apps require downloads and challenge users’ normal routine. Let’s face it: when people are looking for something on the web, they still rely on search – not apps – to find what they need. So to succeed in the mobile environment, you’ve got to have a site that allows people to quickly find what they’re looking for and/or do what they came to do.

Read on for some of the more important considerations:

First Things First: Consider the Context

The absolute worst thing you can do when creating your mobile site is to assume that people will visit the same pages and try to navigate the site in the same way they do when sitting at a computer. In fact, there’s probably only a fraction of your total content that needs to be included on your mobile site. Think about what your visitors might need out of your site when they’re on the go: your phone number, directions, a quick price check. Make this information easy to find with just a couple clicks.

You can probably take a good educated guess at what would be most important to a mobile user, but don’t forget to validate that by checking your analytics. Most suites today make it easy to separate data based on browser and device. Take a look at entry pages, search terms, and pathing data of your mobile users to be sure your gut instinct is correct.

Keep It Simple

As important as it is to strip extraneous content from your mobile site, it’s equally critical to simplify your overall design and layout. Consider removing all graphics and streamlining your navigation. In many cases, the optimal mobile home page contains nothing more than a short menu that allows people to quickly navigate to the content they need. Forget about drop-down menus or even second-level navigation – they just don’t work well with touch screen and they take up valuable screen real estate.

The wording that you use on your menus is extremely important in a mobile environment. Remember, there is no hover tool tip here so your words need to be concise and easily understood. There is no room to be clever on a mobile site.

Also resist the urge to have a consistent header on each page of your mobile site, although this is considered a best practice on a desktop site. With mobile, you\’re better off using a streamlined breadcrumb navigation to provide visitors context and help them navigate to other areas of the site. And don’t forget the search box – if possible, include it on the top of each page of your mobile site so visitors can easily jump to another section.

But keeping things simple doesn’t mean you should abandon all of your company’s normal brand requirements. Your mobile site has to have visual similarities to your full site that immediately assure visitors they’re in the right place. Including your company logo and primary web colors is the bare minimum – if possible, also try to adapt your button style, fonts, and other elements (if they translate well to the small screen).

Be Narrow-Minded

After years of thinking about website design in terms of a horizontal configuration, you’ve now got to think narrow. On traditional web designs, designers go to great extents to reduce vertical scrolling, but in mobile, this is acceptable and users are quite accustomed to the vertical scrolling action. However, avoid at all costs having any images in your design that extend beyond the width of the design and require horizontal scrolling. The experience of scrolling horizontally on a smartphone is unnatural and most users won’t bother. Keep your layout to one column and check your code to make sure you don’t have any tables or images with widths set larger than your mobile page width.

Know the Technology

There’s a lot that can be done to make your website friendly to mobile browsers. First and foremost is to set up your server to detect mobile users and automatically redirect them to the mobile version of your site. This needs to be done at the page level; don’t take the easy way and route all mobile traffic to your m.home page. Set your redirects to send visitors to the specific page they requested, in mobile form. But also include a link that allows people to easily go to the full site if they’d like.

Another basic requirement is a fast load time. Most mobile website visitors are on the go, meaning they have limited time to wait for pages to load. If you want your site to be useful to readers, it needs to be blazing fast. Smartphones don’t have the same bandwidth as computers, so eliminate large file downloads and keep images to a minimum.

For now and the foreseeable future, there is no standard screen size and resolution in mobile. This makes your job a little harder, because you’ve got to test your site to make sure it works (and looks good) on a wide range of devices and on multiple mobile browsers. And each time a new device gains popularity, you’ll need to be vigilant about testing your site for compatibility. Remember that phones and tablets vary widely in their support of common desktop programs and plug-ins like Adobe Flash or JavaScript. If your site doesn’t render correctly on a mobile visitor’s device, it’s doubtful that she’ll muddle through. Mobile users are very quick to hit the back button, so think about all the technical specifications (and limitations) before creating your mobile site.

Make It Easy for Visitors to Act

Mobile site visitors are looking to take action, usually by making a purchase online, locating a map or phone number, or even filling out a request form. Make it easy for them to accomplish their goals with just a couple of clicks. Use large icons and bolded text for important information about products, and make any helpful links large. Don’t miss out on sales because your text is too small to read or the links are too small to click.

If one of the main goals of your mobile users is to contact you, prominently display a click-to-call phone number and make sure your address links to a map with driving directions. And any time you require a visitor to fill out a form, whether it’s a simple log-in form or a longer purchase form, make sure you have optimized your form to reduce frustration and errors. Use the absolute minimum number of fields required to complete the transaction and don’t require your visitors to type any more than necessary.

It’s a Never-Ending Cycle

The term “continuous quality improvement” has never had more relevance than in the mobile website arena. It’s impossible to simply build your mobile site and forget about it. You’ve got to test it constantly, on multiple devices with multiple browsers, update it as technology and devices evolve, and tweak the content and navigation based on user feedback. Even your most loyal customers will refuse to use your mobile site if it doesn’t meet their needs.

This article originally appeared in Tim’s ClickZ column March 20, 2012