Editor’s Note: The following article was penned by Luke Heinecke, Founder & CEO of Linear Design, and Leadpages Guest Blogger. Interested in writing for the Leadpages blog? Hit us with your best shot!
Google knew it was coming. In 2010, Eric Schmidt (then CEO) unveiled the “mobile first” design initiative before the Mobile World Congress. It was time to ready the infrastructure for more web traffic via mobile.
An AdWeek survey found that consumers spend more than 5 hours per day on mobile devices. Statista projects that monthly mobile data traffic will increase by more than two fold by 2022. And as of 2019, mobile devices, excluding tablets, generated about half of all website traffic globally.
With such explosive growth in mobile usage, investing in the mobile user experience isn’t a nice-to-have—it’s a must.
Back in 2013 (we know—it’s an old case study. But the results and insights are just as relevant today), The CXL Institute ran a landing page conversion rate case study for their client TruckersReport, and publicly shared their landing page testing results. Their initial landing page was converting at 12.1%, but they knew they could do better.
Data from WordStream indicates that the average conversion rate for landing pages is 2.35%, with top landing page performers averaging conversion rates around just 11.45%. Though TruckersReport was already exceeding conversion rate expectations, CXL looked for areas to improve upon to obtain even better results.
Their research uncovered that the primary reason for the lack of conversions was because of the mobile landing page user experience. They understood that with truck drivers being on the road, having an optimized mobile user experience was important. Mobile visitors made up half of their audience. So they focused on mobile experience improvements.
Because of a smaller screen and functionality differences, what works on a desktop computer probably won’t work on a mobile device. The mobile version requires special attention.
Identified Areas of Improvement:
Headline: The headline didn’t address any pain points or call out any specific benefits.
Image: The original stock photo was too canned. It could be more relevant to the offer and the audience.
Design: The layout was “too basic and ametuer.”
Social proof: They recognized that truckers have a negative perception of trucking recruiters, and offering social proof is a way to remedy this.
In the testing phase they modified the headline, tweaked the page copy, swapped out the photo for something friendlier and changed the layout based on user heatmapping.
But what also made a significant improvement was simplifying the form. They focused on reducing incomplete submissions by minimizing the required fields and presenting the user with the easy tasks first.
Through tenacious trial and error, involving several design adjustments and form tweaks, this process increased their conversion rate from 12.1% to 21.7% conversion rate, which correlated to a 79.3% improvement from the original landing page.
Through several tests, they were able to uncover insights and apply these to the next iteration. Success is within reach if you’re willing to sort out what works and what does not.
How mobile traffic impacts lead generation conversions
Studies from the Statistic Brain Research Institute have found that the average person’s attention span has dropped by a staggering 33% since the year 2000, falling to an average of 8.25 seconds which, believe it or not, is actually less than the attention span of a goldfish. Let that sink in.
The attention span of the average mobile user must always stay top of mind when considering how to optimize for mobile traffic. On average, email campaigns achieve a 17% open rate, but only a 4% click-through rate. With only 4% of recipients even making it through the marketing email journey to your mobile landing page, it becomes crystal clear how imperative an optimized landing page is to closing a lead.
We should note that mobile users also act differently compared to their desktop counterparts, and there are a number of ways to approach the difference in mindset. HubSpot has a standard ebook download form that asks users 15 questions, but in an attempt to increase conversions for mobile users, began displaying a shorter version with fewer fields. The result? Their mobile prospects increased by five times in just two weeks. Mobile users are more likely to fill out a form and hit submit when it requires less effort - so get the main goodies first to reel your mobile lead in before attempting to collect more information.
A study in 2019 by Think Google reports that 60% of all smartphone users have directly contacted a business using the “click to call” option in search results. This indicates that one way to capture mobile leads more efficiently is by ensuring the phone number on your site is clickable.
Whether it’s due to instant gratification, an ability to assess information faster, or simply an abundance of information to process at any given time, the brain now shifts its focus faster than ever before. These statistics make it clear that content should be optimized in a way that understands that and gets visitors on your mobile landing page to the point of conversion quicker and easier.
Based on studies conducted by top marketers in the industry, we determined some of the best practices that have led to incredible increase in mobile landing page conversion rates. We’ll walk through how some of the top optimization principles for mobile landing pages can help you achieve better conversion rates.
5 mobile landing page best practices
Presenting mobile users with a landing page that was built for desktop use or using a rubber-stamped design for every campaign is not a best practice. It may be the wrong approach altogether.
You need to think about landing pages from a mobile-first point of view. That means:
Make your copy clear and concise
Optimize content above the fold
Use alert bars
Pages should load promptly
Encourage scrolling
1. Less is more—make your copy clear and concise
Content should be easy on the eyes and readily consumed.
The landing page headline states your offer in a way that resonates with your target audience. It should explain your unique value proposition and tell your prospect exactly how they’ll benefit by completing the call to action. (Want to learn more? Don’t miss this article on how to write landing page headlines that convert.)
Stripe’s headline is clear and concise; there’s zero confusion about what they offer on this mobile landing page.Â
Stripe’s headline is clear and concise; there’s zero confusion about what they offer on this mobile landing page.
Font size and word density should make the best use of the screen’s limited real estate. Google developer guidelines recommend around 70 or 80 characters per line.
For the reader’s comfort, fonts should be at least 16 pixels for body text which is about the comfortable reading size of words on print media.
Use benefit bullets reinforce your headline and clearly outline what the user stands to gain.
Why bullet points?
Content in this format is easy to read and consume.
Key features and benefits are itemized and clearly stated in an organized way.
“Checks off the boxes” your prospect is presumed to have.
Potential objections are addressed.
Helps “skimmers” cut to the chase.
Such a meta way to explain it, but see how it works?
Canva breaks down how their product works quickly and succinctly.
Canva breaks down how their product works quickly and succinctly.
Label your button. “Click here” is a call to action, but it’s pretty generic. Your button copy should be customized for your specific call to action.
The CTA button is a page element that’s often overlooked—probably due to the fact that they usually only contain a few words.
But, that’s exactly why they’re so important. They have a lot of work to do.
Your CTA button plays a big role in guiding page visitors through the process. It needs to tell them what to do, and what happens when they do it. It also needs to keep things simple and remove any perceived barriers to entry.
That’s a lot of work for 3-5 words to accomplish. It starts to be clear why writing a good CTA is just as important as a good headline.
Any forms should be minimal. Have no more than one form that collects just the essential information. Ideally, just a name and an email address. Additional fields will only create friction and hurt your conversion rate.
A split test, also called an A/B test, can be done to learn which tactics perform best. This test is performed by creating two different versions of your site and driving traffic to both to see which performs better. By making these small tweaks you can get a better idea of what features help your site more appealing to users. Which page has the better click-through rate and has users spending more time-on-page?
Applying the above fundamentals helps you create mobile landing pages that are easy for your user to digest.
2. Optimize content above the fold
It matters where things are placed on a website, and landing pages are no exception. When designing a page, we must take into account the scanning behavior of users.
Think of how newspapers are folded and stacked. The front page faces the consumer as a preview, but you only see half of the full page. “Above the fold” is the newspaper’s headline and pictures that compel the consumer to pick up a copy and continue reading.
This applies to landing page design as well. When a page loads, the top of the page is seen first. For this reason, the most important concepts are “above the fold.”
“Above the fold” is like the reception area of your page. Make it visually appealing and with images and colors that support your objectives. Write headlines that make the visitor say “I’m interested in this.”
Since your landing page is built around the action you want the user to take, the call to action should be included above the fold (in addition to the other places throughout your page).
Asana gets right to point above the fold with a quick way to sign up.Â
Asana gets right to point above the fold with a quick way to sign up.
3. Use alert bars—the friendly banner pop-up
Pop-ups are a nuisance to some users, but they do serve a purpose. They help announce limited time offers, present a form to snag an email address or anything you’d like visitors to see first.
For those who can’t stand pop-ups, the first thing they look for is how to shoo them away. Instead of blocking the page, sticky bars take up a small (yet conspicuous) amount of space. It doesn’t interfere with content consumption as a pop-up would.
Use this feature to highlight offers or to make announcements relevant to the purpose of the landing page. This is also a perfect place to provide your phone number.
If you have a local business, having your phone number in this area with click-to-call enabled is in itself a call to action. They can call you right then and there without having to copy your number down.
4. Pages should load promptly
What can really break the momentum of an engaged clickstream is a slow loading page.
With faster data speeds from mobile service providers, users expect things to load quickly. The longer a page takes to load, the sooner they start thinking about what else they should be doing.
With each fraction of a second they wait, the greater the risk of closing the page and moving on to something else.
Don’t let the success of your paid ad go to waste because of a slow-loading landing page.
5. Encourage scrolling
Some objectives can be accomplished in one tidy little box, however, some landing pages are fleshed out to fully support the call to action. For longer content, we encourage the user to keep reading. Here are some tips on how to keep users scrolling.
Single column design
Orient the content vertically. Think of how you use your thumbs or fingers when scrolling through content on your mobile device. Everything should fit between the left and right margins to align with the natural scrolling pattern.
Also, keep the page uncluttered and have plenty of “white space.” This doesn’t mean your background should be white in color, this means that more space is less distraction. You want your user focused on the offer at hand, so don’t confuse them with noise.
Cues
As you would follow signs on a road or in a building, you can use signs and symbols to direct users to proceed through the page.
Horizon
Does your mobile landing page have a “false bottom”? This happens when the page appears to stop at the bottom but the content continues. Having the start of the next element appear at the bottom of the screen signals that there is more to the page.
Verbal Cues
Perhaps this is not everyone’s style, but including a “teaser” or a direct statement like, “Scroll down for more!” does the job.
Symbols
Arrows tell your user that there is more below. Use them accordingly.
Navigation Buttons
These help users skip over the parts that are not relevant to them.
Storytelling
When you understand exactly how your offer will uniquely address the pain points of your prospects, a story drives the message home.
This narrative can be crafted by appealing to your prospect through empathy and showing them a clear path to a life-changing transformation.
Effective storytelling is engaging. A compelling story keeps users scrolling and builds interest in your offer.
Visual appeal
It’s all in the presentation.
We can tell an outdated website from a modern one as we’re now accustomed to new conventions of design and functionality.
Is your design clean and uncluttered? Does it appear to be professionally produced?
Visual assets are great as long as they are optimized to load quickly. Optimize any photos so they don't slow your user down.
The use of video can be tricky. Videos that play automatically are off-putting to some users. Also, video buffering interferes with the page consumption experience.
If you absolutely must have video content on your landing page, give your user the option of playing it when they are ready to listen.
There’s no one-size-fits-all solution; what works on one page may not on another. To determine how effective the above strategies are, use split testing.
Best mobile landing page examples
So, what do these mobile landing page best practices look like in action? We’ll review some mobile landing page designs that demonstrate these principles.
With its progressive, scalable, and value-driven software applications MojoTech is in the business of transformation.
This campaign evangelizes the importance of a digital transformation team.
This is a minimalist page built around a single offer. Its purpose is clearly stated—instant access to an informational guide.
The good stuff:
This one-step page is straightforward and user-friendly. It’s cut down to just one function with only three fields to fill out.
For some campaign purposes, a minimalist landing page is ideal.
Things to consider:
While a social media post or advertisement may have given details of what is included in the guide, it doesn’t hurt to briefly reiterate that in a brief summary (perhaps with bullet points). You can still have a minimalist page with a little more information.
Tovala is the meal subscription service for “insanely busy people.” It saves customers time on meal planning, grocery shopping, and prep. However, with so many other meal prep services out there, $130 off encourages prospective customers to give them a try.
This page is built around initiating a subscription service membership with an introductory offer.
The good stuff:
A sticky bar announcement lets users know ahead of time what to expect with orders.
Next, there is a navigation process bar that lets the user know precisely how many steps there is in signing up.
And the first step in this process is placed just below this. It’s a very simple form with the submission button below the horizontal to prompt scrolling down the rest of the page.
Things to consider:
Food is photogenic. Reminding users about the mouth-watering product they have to look forward to may encourage them to complete the transaction.
The Pantheon mission is to revolutionize the way businesses build websites as a WebOps platform for Drupal and Wordpress.
One way to connect with prospects is through an educational guide on agency growth and scale in the context of web design and development.
The good stuff:
The blue bar at the horizon line lets the user know that there is more to see after the fold.
Past the fold is a screenshot of the publication along with a simple contact form.
For those who aren’t yet convinced about entering their contact info, there is a summary of the purpose of the guide along with bullet points that outline the benefits.
Things to consider:
The font for the “About” paragraph is considerably smaller than the rest of the text. A slight bump in size and breaking it up into two or more smaller parts would increase readability.
Gusto is a virtual HR department offering automated payroll, benefits management, time tracking, onboarding forms, and more.
This concept may be completely new to a lot of business owners, so a quick questionnaire lets them know if the product would work for their specific needs.
The good stuff:
Like Tovala, this landing page is built around a click-through process for the purpose of driving new members to enroll.
The user takes a brief, multichoice questionnaire to determine if Gusto is right for their business.
This page is upfront about how many steps it takes, and the buttons are a good size and contrast for readability.
Having some of the quiz question space below the horizon line lets the user know there is more to read down the page.
Below this line, we get very clear and consumable details about the product, including price and bulleted benefits.
Things to consider:
This page is done quite nicely so there isn’t much to comment on for improvement.
It seems Gusto put effort into providing the information section below, so it might be worth it to add an arrow as a stronger nudge that there is more to see.
However, the way it now does not distract from the important task at hand which is to complete the quiz.
Not only is NOM NOM “the best way to go fresh”, but it also competes with its focus on superior pricing, portioning, and quality ingredients.
50% off the first order entices prospects to see for themselves what fresh dog food is all about.
The good stuff:
Right at the top, a sticky bar lets the user know that recent events have not interrupted operations.
This bold red is an effective use of color as it draws the eye to the offer as well as the important ad copy.
The horizon line cuts right through the middle of a line of copy to indicate there is more to see.
As you continue through this highly scrollable page, you pass bite-sized bits of content, including a graph that clearly compares the product to the competition. As the user progresses through the page, call to action buttons repeat many times so the user can claim the offer at the moment they are convinced.
This page also integrates some storytelling about how the product is manufactured.
Things to consider:
Several elements come together to make it attractive and easy to scroll through and there is not much to improve upon.
Again, food is photogenic. Integrating images of food or fresh ingredients above the fold would reinforce communications about product quality. Either way, it’s a solid landing page.
“Kineo Homes provide simple, affordable, smart home solutions to fit your lifestyle,” and this concept is amplified through a gallery of aesthetically pleasing lifestyle images.
The good stuff:
“Home on your terms,” sits right above the fold in bold all-caps header. This encourages the user to keep scrolling and find out more about what Kineo Homes has to offer.
More supporting sales copy followed by a series of high quality images support the campaign message of the landing page. This leads up to a final call to action - “Reserve Your Space.”
Things to consider:
This page says what they offer, but is not very specific on how they offer it. More specific benefits could be listed in bullet points.
“Reserve Your Space” could stand to have more informative copy to let the user know what exactly they are reserving. Also, the contact form could be on the same page to simplify the process.
With this guide, you can now create mobile landing pages that reinforce the efforts of your paid campaigns.
Ads and landing pages work together to seamlessly onboard your prospects. The goal of mobile landing page optimization is to reduce friction as much as possible so prospects convert by fulfilling your call to action.
Looking for the easiest way to get started? Leadpages already does most of the work for you. Our websites and landing pages are optimized for both desktop and mobile. So when a visitor lands on your page on their mobile device, everything looks and works exactly as it should.
And our 14-day free trial makes getting started a no-brainer.
Luke is the founder of Linear, a PPC/CRO agency focused on helping clients grow. If you like what you just read, you'll love getting your very own custom proposal.
