This blog is a guest post written by Brian Massey, Founder of Conversion Sciences, a turnkey website optimization company. He is an in-demand speaker, writer and author of the Amazon Marketing best-seller 'Your Customer Creation Equation'. Visit the Conversion Scientist blog for more education on mobile conversion optimization.
Do you remember the first websites from the early days of the web, circa 1994-95? We laugh at them now, but back then they were all we had, no matter how funny looking or awkward the experience.
When it comes to mobile we're there again. Years from now we’ll be looking back at today’s mobile websites and laughing. Today we have to have to deal with inconsistent and sometimes awkward mobile experiences.
So what are we to do? Do we have to suffer through years of bad mobile websites, or are things different this time?
Read on and I’ll show you how to turn your firm’s mobile experience into a high-converting money-making machine.
The mobile marketplace
First let’s look at where are we today with mobile.
We've all seen the ‘mobile traffic is growing more than desktop and is going to eat the world’ graph. At some point during the last year or so mobile traffic overtook desktop traffic, never to be surpassed again.
But the conventional wisdom says that across almost every industry mobile traffic doesn't convert at the same rate desktop websites do. I take the opposite point of view. I believe the best mobile websites will crush desktop conversion rates. I actually have clients experiencing these kinds of results.
And it won’t take us ten years to get there like Web 2.0. Why? Because of the tools available. Today we have access to better, cheaper and faster tools than our younger selves did in the ‘90s.
Your mobile web 2.0 will be different from mine
When looking at the mobile web, you must consider your audience. There are vastly different mobile experiences across a variety of audience segments.
Looking at a graph of high school students checking out colleges, you can clearly see the growth of mobile compared to desktop. These are the youngest of the millennials (or are we calling today’s teens something else now?).
Growth of mobile traffic relative to desktop traffic for an audience of high school students.
Even an older, more sophisticated audience with money to burn shows a marked growth in mobile adoption rates. See the relative growth of mobile usage for a high-end website frequented primarily by women over 45 years old. The red dotted line shows a nice upward march for mobile traffic.
Older shoppers are using mobile devices at a growing rate relative to their desktop use.
When you look at visitors to an addiction treatment center, you’ll notice mobile growth is less predictable.
Use of mobile devices is unpredictable for an addiction treatment center website.
Each mobile web experience is different, depending on the audience, but we’re finding that mobile adoption rates are outpacing desktop across most industries.
Understanding your mobile websites
Making things a little more complicated are mobile screen resolutions. Specifically, the staggering number of screen resolutions.
What does this mean for you? It means you're not really running one website, you have 10 or 20 or 30 websites to worry about.
Google Analytics Technology reports reveal the variety of websites you're actually managing.
You can check this out for yourself. Look at your own analytics technology reports. Notice the operating systems people are coming in on, the browsers they’re using, and the screen resolutions.
Can you be sure all of your websites work properly?
And I guarantee you, on at least one of those 10, 20 or 30 screens, your site is going to break. Don’t get disheartened. In fact, this may be good news: your broken site might be the key to finding your first wins on your journey to mobile optimization nirvana.
Whether you're going with a responsive design, or a mobile-specific design, you can find out what’s broken, make an improvement, and test it using conversion tools.
In our QA lab we test sites on a variety of old devices, platforms and browsers. We can test any site on IE 6 running on Windows XP if we have to. It takes quite an effort, but it’s worth it.
Remember what I said about free tools? Yes, there are tools that can replicate what your site looks like on a variety of devices, browsers, operating systems and screens.
So we’ve established that mobile is growing; that the experiences differ across audiences; that you’re dealing with not one but multiple websites; that there are sophisticated tools available to help you improve, and that you need to set up your conversion lab. Let’s get into specifics.
Deliver a dedicated mobile website, not a responsive site
There’s been a huge rush over the last few years to build responsive sites, and you may already be fully committed to this path. But here’s the ugly truth about responsive: responsive templates make decisions for you, and not all those decisions are good.
Examples of bad rendering decisions of responsive web designs.
This is an example of a responsive website we tested. Look at the map. How many times have you scrolled down and the map fills your screen, and then every gesture simple scrolls the map? Then there are the popover windows that take over the small screen, placing the close button somewhere off-screen where it can’t be reached.
Removing the company logo was not a good responsive result for this site.
The Benfield Pet Hospital experience is an example of a loss of trust. When we get to the mobile rendering, the company's logo goes away, resulting in the loss of an important trust-builder. The irony of the headline, “We haven’t been properly introduced,” is perfect. Let’s fix that.
These are some of the decisions responsive web design (RWD) imposes on us that we don’t have control over.
Honey, I just Shrunk the Website
Responsive sites are essentially a miniaturization of desktop websites, with certain display rules depending on screen resolution. Responsive designers think they can be like Rick Moranis in the movie Honey I Shrunk the Kids by applying a shrink ray to a website. As Mr. Moranis discovered, things don’t necessarily go as planned.
By stuffing a desktop site through a 3G or 4G pipeline and onto a small screen, we’re significantly slowing down our mobile sites. This is devastating to our mobile conversion rates.
A recent study of an internet retailer showed that load times on their new responsive site took a staggering 18.24 seconds to load on 3G and 4G mobile devices. A slow website can mean death for an e-commerce site.
Mobile visitors want something, well, mobile!
When mobile visitors visit your website, they’re in a mobile context. They want something mobile. But responsive design requires too many compromises on the mobile-only experience. We believe that only a dedicated mobile site can deliver the mobile experience users want.
A little while ago I was a judge in a contest of Wordpress themes. I evaluated forty-seven different themes, tasked with finding the best “conversion-centered” of the bunch. Most of these theme were responsive.
The theme I chose as a winner had a separate, dedicated mobile theme that I thought did a good job of offering a mobile-specific experience.
A mobile experience requires different calls to ac tion, addition of mobile features, like maps, and fewer bandwidth-hogging elements.
The desktop theme is shown on the left in Figure 9 and the mobile site on the right. The mobile version dropped certain images that weren't important, which of course you can do with some responsive templates. Of key importance here is the call-to-action at the top of the page. It went from “fill out this form” on the desktop, to “call us” with a click-to-call on the mobile version.
The creators of this template made an amazing discovery: mobile devices have actual phones on them. This is one way to achieve higher conversion rates on mobile than on the desktop. Desktops computers generally don’t have phones built in.
Responsive mobile sites require a redesign of the desktop site
One of the greatest heartbreaks of RWD is that you have to redesign the desktop site just to get mobile support. Companies enjoying high desktop conversion rates are in for a sad surprise. They are putting their conversion rates at risk by redesigning.
For example, Finish Line lost $3 million after launching their responsive site because it fundamentally changed the design of their desktop site. But they were smart enough to keep their old site on a server so they could switch back.
British retailer Marks & Spencer invested £150 million on a two-year redesign going with a responsive approach, only to see an 8% decline in online sales. That’s significant.
Yet these high-profile examples are not the exception.
Provide app-like features
What will Mobile 2.0 look like? We’re getting hints from the mobile tests we’ve been performing for the past two years.
Based on our experiences, we believe that the mobile web will look like mobile apps. What do I mean by this? It means your mobile website should have app-like features.
Persistent calls-to-action are one example. We call these parachutes. Always having a call-to-action on the page, especially in somewhat complex situations, is proving very successful for us.
Persistent, or ‘sticky’ headers offer a persistent call to action to mobile visitors.
On the mobile website of one of our addiction treatment center clients you always have access to the menu and the all-important click-to-call link.
Persistent click-to-call opportunities increased calls by 9%, a significant win for sites that prize phone calls.
For another addiction center with a more traditional header bar, we again added sticky calls-to-action with click-to-call. This increased phone calls by 9%!
By the way, phone calls for addiction treatment centers are incredibly valuable. They represent a potential life saved, and each bed filled delivers between $30,000 and $80,000 in revenue. This rather simple change fits the mobile context.
Mobile Is Screen One
This is a big myth busted; more and more conversations are beginning on mobile. We call the mobile screen the ‘tip of the spear’. A prospects first experience with your brand is going to be on a small screen, even if the final conversion occurs on the desktop. It should be a good experience.
For one of our clients, this was a vexing problem. Their Flash-based design application simply wouldn’t work on a mobile device.
The analytics data showed only those reordering could convert on mobile.
Most sites will see a low conversion rate on mobile devices.
This was a Mobile Dead End
Our solution was to do what has come to be called a ‘screen hopper’.
By asking for an email address, we have a chance to catch visitors when they are back on their flash-compatible device.
We changed their mobile site to deliver a pop-over that essentially said, "Your mobile device isn't going to work here. Just enter your email address and we'll remind you to come back when you're at your desktop."
The result? We saw a 5.3% form completion rate on mobile devices. That’s pretty good in the lead-generation world.
We followed-up with an email and got a 26% click-through rate on the email.
And the result? Not that big a lift. It wasn’t much of a direct money-maker.
But there’s more to the story. With the popovers we were collecting a bunch of email addresses – and when they came in on their desktop, they had a nice conversion rate.
The real win came when we calculated the value of an email address. This client generates an average of $11 per year for each name on their extensive email list. We were collecting about 1300 new emails per month from this mobile lead generator. By our calculation the new email addresses generated an estimated $181,000 per year in additional revenue.
Even for an app that works exclusively on desktop, mobile is the first screen. But to make it work you have to understand how to leverage mobile to drive desktop conversions.
Android is not like iOS
I’m sorry to say this, but Android is not like iOS. This was a disappointing discovery, but it’s helped our clients design better experiences for their customers across both platforms.
Two mobile experiences that had different results on iOS and Android devices.
For North Central University, we added persistent calls-to-action, as I described earlier. In Figure 16, Android folks loved the one on the left. iOS people only mildly liked it. Yet, another version we tested was despised by iPhone users.
Different menu preferences by mobile OS.
In this jewelry e-commerce example, we tested two different types of menus. Android users preferred one, and iOS users preferred the other.
We’ve come a long way, and hopefully I’ve opened your eyes to the realities and the possibilities of mobile.
We’re in the early stages of the mobile web, like where we were with those cheesy mid-‘90s websites. But things are a little more complex now. We deal with multiple devices and different contexts.
The good news? It won’t take us ten years to figure this stuff out. We have the tools to make it happen.
So please keep a few things in mind:
- There are no best practices in mobile. There are no best practices on desktop either.
- Your best bet is to test your way out of Mobile 1.0. The tools are available, they’re awesome, and they’re affordable.
- Mobile Web 2.0 is going to look a lot like mobile apps. We may not be able to tell if we’re using a websites or an apps.
- Disresponsive mobile sites don't look like apps. ‘Disresponsive’ sites --my nick-name for responsive sites that don’t respect the user - are probably going to peter out at some point because they don’t act or look like apps. Responsive might get us there quickly, but in the long term it's not going to serve mobile customers because they want… a mobile experience.
- Android and iOS users are just totally different.
- Whoever figures this out in your marketplace first is going to be a huge winner. Even if you don't think mobile is important to your business right now, you need to learn this stuff, because it takes time and effort understanding what makes mobile work. It’s going to be so beneficial, and you’ll get a head start and possibly dominate your market.