Mobile friendly website

How to Create a Mobile Friendly Website that Converts

Talia Wolf Conversion Optimization 4 Comments

Talia Wolf

Talia teaches businesses how to plan and execute conversion optimization programs. She runs thousands of AB tests using emotional targeting, real time data and consumer psychology to increase online revenues, engagements and sales.

Talia is a frequent keynote speaker at marketing conferences, teaching conversion optimization and growth on stages such as Google, Unbounce, MozCon, GMIC, CXL live, Search Love, Learn Inbound and many more.

She is the Co-founder & CMO at Banana Splash and was recently listed as one of the most influential voices in conversion optimization.
Read Time: 10 minutes

In 2016, many of my conversations with marketers were about their lower conversion rates on their mobile landing pages. Most times, I tried to steer these conversations towards a ‘mobile-specific’ optimization strategy however, there are always a few others who drop the mic at ‘mobile responsive design’ or a ‘mobile friendly website’.

The common answer is: “What’s the need for a separate mobile-specific optimization strategy anyway? We are already responsive!”.

There’s nothing that frustrates me more than this argument (ok, there are a few other things that frustrate me more, but this is definitely tops of the list), for two main reasons:

Reason #1

For starters, out-of-the-box mobile responsive design doesn’t give much (or any) preference to a mobile user’s state of mind.

People using mobile devices have a different state of mind – they almost always access content on the go and are also known to multitask more than their desktop counterparts. We don’t use our mobile devices as a replacement for desktop, we use them in a whole different way, for different intents and tasks. Count the number of times you’ve:

  • Read your emails on the phone vs. a desktop
  • Changed songs on your playlist while driving
  • Answered a text message during a meeting
  • Or ordered food while watching TV

Countless, right? We are increasingly doing more things than ever on mobile rather than on desktop.

Because people search for different things, need different things and act differently on mobile – they need a different experience and not the one that was built for a desktop person and simply made to look nice on mobile (AKA ‘responsive design’). 

#Mobile website visitors search and act differently. #Responsive #design doesn't allow that. Click to Tweet

Reason #2:

The trends in the mobile ecosystem are changing drastically and we need a better assessment of data to make sense of it all. Let’s look at a few vital numbers and trends that are happening to your customers right now:

A report published by Similar Web on the State of Mobile Web, states that roughly 56% of consumer traffic to the leading US websites (across categories) comes via mobile devices.

However, even though mobile sites drove more traffic, the engagement rate was higher on desktop sites overall. Desktop sites saw more ‘time on site’ and more ‘pages per visit’ on average and mobile bounce rates were higher.

Source: Similar Web

Mobile traffic isn’t performing even closely to what it should.

And here’s another one……

The KPCB Mobile Trends Report states that mobile digital media time is now greater in comparison to desktop and other media. While the former is leveled at 51%, the desktop media time is placed at 42%.

Ideally, this change in trend should bring in higher sales conversions via a mobile landing page. Yet most smartphone carts see only a 16% success rate when compared to desktops carts which close at 26% success rate (Adobe).

mobile internet trends

Adobe’s Mobile Retail Report (2016) states that if the trends as mentioned above continue on the same path, E-commerce retailers stand to lose 11% of their potential revenue by Christmas, 2017.

This mistake is about to cost #ecommerce retailers 11% of their revenue by Christmas 2017: Click to Tweet

What does all this data reflect?

Quite simply, there’s a HUGE gap that isn’t being dealt with using mobile responsive design (which is the go-to solution for the vast majority of businesses today). Not only do we need a change in our mindset towards mobile optimization, we also need to start optimizing for a better mobile friendly website.

This train left the station ages ago, so it’s NOW or NEVER people – either you’re in or you’re out.

Understanding Your Visitor’s Behavior on Mobile

Browsing on a mobile device is different, however marketers tend to overlook physical and psychological limitations at the user’s end while designing for mobile (well, realistically most don’t design for mobile, they design for desktop and make it look “nice” on mobile).

The first step towards increasing conversions on a mobile landing page begins by understanding user behavior and how it impacts a user’s interaction on mobile sites.

The Backlash of Friction on Mobile Sites

Anything that gets in the way of a conversion is friction. 

mobile responsive design

Source: Neurosciencemarketing

While friction can manifest itself in many different ways on a mobile landing page, it can be broadly categorized as ‘perceived’ or ‘real.’

Perceived Friction

If a visitor leaves a mobile landing page due to unreadable text, long forms, an unappealing offer or over-complicated interfaces, it’s because of perceived friction.

If you observe the example below closely, you’ll see that there are 3 calls to action (!!) all inviting me to login, signup and request a demo.They’re all placed in one spot making it hard to see the site’s content and, there’s another call to action at the bottom of the page inviting me to subscribe to their newsletter. Ughhh.

So if you arrived on this page to read about “Ecommerce Emails”, the road to doing so is filled with annoying obstacles → Friction.

mobile responsive design

These kinds of friction create a mental block in the visitor’s mind and prevents them from taking any action.

HubSpot experienced the ill effects of perceived friction when the conversion rate of their mobile landing pages was 20-30% lower compared to its desktop variant.  

Their forms on the mobile landing pages were too long, the design wasn’t formatted, and there was too much text on the page which prevented users from taking action.

hubspot mobile landing page

To fix this issue, the team shortened the content and formatted its images for mobile.

mobile responsive landing page

Once that was completed they went ahead and shortened the form as well.

By optimizing its mobile landing pages, HubSpot brought down their bounce rate by 20%-50% for their forms and 10.7% for their other content.

Real Friction

Real friction’ is the second category of friction which influences user behavior and conversions.

Users often struggle to fill in numerous fields with their thumb or are unable to click the call to action button because it’s too small or placed at a position that doesn’t complement their natural hand movement, thereby posing a physical barrier to the user who’s trying to access your mobile landing pages.

A quick look at Headspace’s mobile friendly website gives you a live example of ‘real friction’ on mobile:

mobile landing page

#1 Call to action placement:

The ‘Buy Now’ button on their mobile landing page is placed on the right side of the screen as opposed to the center of the screen. Given that we are wired to see things differently on mobile sites, the above CTA arrangement poses two challenges for visitors: Not only does it interrupt their free thumb movement, but also creates confusion  in their mind. Our frequent interactions on mobile devices has impacted the way our brain analyzes information on day to day basis. With a small screen to focus onto, it is likely that a visitor’s natural reaction would be to take action in a manner that they are accustomed to.

The same is true for physical movements as well. We are used to holding a mobile device in one hand and using mostly a thumb to navigate. Any navigation element on a mobile site that doesn’t complement the ‘mobile thumb zone’ is bound to put off a user, costing a conversion decline.

Image Source: Apptentive Blog

Any element on a mobile page that doesn’t appear in the ‘mobile thumb zone’ will decrease conversions Click to Tweet

#2 Competing calls to action:

The video placed just beneath the call to action may distract the visitors attention. Given its placement, there’s a high chance that visitors are bound to click on the video first rather than click the CTA placed on the side.

#3 Conversion “death” by colors:

It’s imperative you guide visitors towards their next step, colors are a huge factor for site navigation as they notify visitors what to pay attention to and when. The amount of colors on this page form yet another distraction and confusing experience for visitors.

#4 Irrelevant calls to action:

Another issue here is the CTA overload – 4 calls to action!  Headspace should attempt to remove this “analysis paralysis” issue by identifying what phone the visitor is using and offering the right CTA.

#5 CTA too early

Their main homepage offers to download their app immediately before visitors have had a chance to check it out. Many AB tests I’ve ran proved that asking people to download the app only once they’re more engaged with the site (more time on site, more pages, or scrolled a certain percent of the page) provides more qualified downloads that have a higher in-app engagement.

mobile optimization

#6 Carousel images

Images that auto rotate add a lot of movement and distraction to the page, this is yet another ‘real friction’ that interrupts natural human behavior on mobile devices.

There were just a few example of a poor designed experience on mobile. The path to an optimum experience on a mobile landing page is crooked, which is why we must better understand what customer journey our mobile visitor is expecting, what they need physically and provide it to them.

4 Strategies for Creating a Mobile Friendly Website that Converts

Responsive design is killing two-thirds of your conversion.

There is a 170% gap in conversions between desktop and mobile. Here's how to fix it: Click to Tweet

The biggest issue is our overconfidence and fixation with responsive design.

Yes, responsive design can be great, but only when it’s created with a mobile visitor’s experience at heart, rather than the mere intention of setting up a desktop design and transferring it to a mobile screen.

Now that we’re on the same page → Responsive is NOT enough.

Let’s take a look at a few tips and examples that will help you address unique mobile behavior and increase your conversion rate.

#1 Reduce Cognitive Load and Distractions

A good mobile experience is the one that understands the mobile visitor’s intent and addresses issues that may act as a barrier to a great experience.

A mobile friendly website that doesn’t offer immediate personalized information and value to its visitors will almost always see a decline in their conversion. The key reason behind this is linked to lack of user attention and an increase in cognitive load  (amount of mental processing power needed to use your site)  in today’s fast paced world.

Our brains are extremely tired from experiencing an overload of information 24/7. Our capacity to filter through the important and unimportant is near to ‘0’, which means that  if we don’t get the information we expect within a certain amount of time, we bounce.

The best way to reduce overload of information and reduce cognitive load is by investing in your customer’s emotional triggers. Emotional targeting helps in identifying the true intent of your customer and providing them with that experience they want. While Google Analytics will help understand what people are searching for on your site, what pages they land on and how long they stay, emotional targeting will help identify what content customers expect, what emotions they experience and how to persuade them using the right images, colors and copy.  The combination of the two will ensure you’re showing customers what they want → reducing cognitive load.

Here’s the complete guide to getting started with emotional targeting.

#2 Design for Specific Mobile Behavior

“When you work on a project for a long time the problem is you don’t see it the same way like someone else when they see it for the first time. You know where that information is located on the screen, you know what that item on the menu means. You know that in order to fill out the form you need to do this, this, this and this. It’s very easy to forget what it’s like to be new to it.” Susan Weinschenk

This is very true for mobile too, we must work hard to transform our strategy to a small screen in terms of not just designing a better user experience, but writing and creating dedicated mobile content and optimizing navigation.

I cannot count the number of times I’ve navigated away from a landing page because I couldn’t find the information I was looking for on the first go, or I had to constantly scroll up and down to make sense of it all.

A deep-dive into your Google Analytics dashboard will give you a basic understanding of what mobile visitors are doing on your mobile site.

The critical metrics that need attention here are:

  • Your mobile audience
  • Mobile Landing pages
  • Keywords
  • Mobile device report
  • Exit Pages
  • Funnel Visualization
  • Site Behavior

A thorough evaluation of these metrics will give you a broader sense of the specific behavior of mobile visitors on your site.

Find out:

  1. What are the main landing pages that mobile visitors land on?
  2. What are they searching for?

A mobile landing page that converts, takes into account the mobile visitor’s experience on two levels:

  1. Design placement: headlines, images, CTA’s and forms. How easy it for the customer to physically find what they’re looking for and identify the important elements on the page.
  2. Content Strategy: The effort taken by the user to consume the content and understand the next step they need to take.

A user experience that doesn’t consider the unique behavior of mobile visitors impacts comprehension of content, increases frustration and negatively affects conversions.

#3 Adopt Mobile Driven Features

According to Adobe, mobile-optimized sites triple their chances of increasing mobile conversation rate by 5% or above. Using and prioritizing mobile driven features on your landing page will help you optimize the experience and increase conversions. Features such as:

Getting to the bottom of these question via an analytics-driven route will not only explain what content they are looking for but also help in creating a better user journey.

  1. Click to call button – Allow customer to quickly contact you where ever they are on your site: mobile landing page
  2. Click to scroll – allow people to quickly scroll back to top with a tap of a finger.
  3. Video optimization – Make sure your videos work well on mobile, you’d be surprised with the amount of videos that are not enabled on mobile or don’t fit the mobile screen.
  4. Links – To reduce friction and make sure people don’t lose their place, make sure to open all external links in new tabs.
  5. Prioritize content – Place the most relevant and important content in a prominent place on the page. For example: your phone number, address or contact details. GrowthHackers’ main goal is to get you to comment on their discussion, so when you scroll the comment feature scrolls with you: mobile design
  6. Reduce noise and an overload of information on your page by adding whitespace to the page.
  7. Hide unimportant content in tabs or a collapse feature like Slack does: responsive design
  8. Break forms into sections: Filling in a mobile form isn’t as easy as on desktop. Many times visitors may get frustrated before they get started or quit midway. A great way to increase form submissions is by breaking your forms into sections and allowing people to complete fewer steps as they go.

#4 AB Testing

All these suggestions are worth AB testing to determine which strategy works best for your audience and which don’t.

Other elements worth testing on mobile:

  1. Strategy: Value proposition, hero shot, content strategy, images, colors psychology and persuasion.
  2. Usability: Forms- content, length, placement and form field. Call to Action- color, placement, size, and content.

For those of you who don’t have enough traffic to test, this article offers a step-by-step guide to optimize a low traffic site, without AB testing.

Your Up

No matter what way you look at it or how much you try to avoid it, if you wish to deliver value to your mobile visitors and ensure a consistent flow of revenue, you’re going to have to move out of your comfort zone and adopt a mobile-driven approach.

I know, not all businesses have the resources and budget to create a new mobile friendly website, however by looking into the metrics and understanding the emotional triggers of your customers you can easily prioritize content, change it around and highlight what really matters to the visitor.

 

Facebook Comments

comments

Powered by Facebook Comments

Comments 4

  1. We ignore the fact that most of our visitors are coming from mobile phones. So we have to optimize the content for such devices for better reading experience. But unfortunately most of us neglect this part and simply concentrating on desktop designs.

    I am sure that bloggers will get more traffic if they opted for mobile friendly design. I agree with your points and suggestions.

    Thanks a lot for the writing.

    Take care,

  2. That was a thorough article. I guess the thumb zone is the perceived way in which people peck on their mobile device. I’m wondering if there are any stats on how people text on their phone. I find my thumbs are too fat and so I use the index finger to peck my words out. And what about voice. Is there a way to to make a button voice activated? That would be cool.

  3. Nice Article. You can choose CMSes are a great platform that can manage any complex business situations. It provides support for creating mobile friendly websites and even help CMS developers to manage the website through a mobile device. Use the CMS that helps fulfils the business requirements. Search and include plugins to that helps to build a responsive mobile website.

  4. Very good article you have here. It is very well detailed. It is worth mentioning that a big difference of a site for Desktop vs mobil is the navigation, as they mentioned with the mobile driven features, it is important to increase the accessibility like providing buttons so that the reader jumps from one Headline to another, or is able to return at the beginning. Like the links. It is a key point to show the visitor that the link that we are showing will open in a new tab and be consistent with it, using an icon, but only in a specific place of the content because we don’t want to lose or cause a friction to the reader.

Leave a Reply

Your email address will not be published. Required fields are marked *