10 Tips for an Awesome Mobile Landing Page
The last few years have been huge for mobile.
In 2014, the number of mobile users exceeded the number of desktop users worldwide. The same year, there were 7.2 billion mobile devices in the world, which was higher than the number of people living on planet Earth.
In 2015, Google announced the arrival of what many marketers dubbed "Mobilegeddon," a ranking algorithm that was created to give organic rankings boost to mobile friendly websites in mobile search results. In the wake of Google’s mobile update, marketers scrambled to create more conversion-worthy pages that Google couldn’t turn a blind eye to.
So, you might assume that things are working well for mobile marketing in general and mobile optimization in particular, right?
There is a 270% gap in conversions between desktop and mobile.
With such a large discrepancy, marketers everywhere find themselves asking: "Why?"
Because often, marketers forget that the mobile browsing experience is a world apart from the desktop browsing experience. Just because your visitors don’t have to "pinch and zoom" on your mobile landing page, doesn’t mean you’ve optimized the mobile experience for them.
There’s a difference between mobile responsive landing pages and mobile optimized landing pages. Before diving deeper into that, though, what is a landing page?
What is a landing page?
A landing page is a unique webpage created to promote a single offer. The type of page created depends on the offer you’re promoting. For example if you’re offering a free ebook to your small business customers, this short-form page is an excellent choice. If it’s a free trial you’re promoting — then a lead capture page is your best bet.
In order for your landing page to generate conversions in the mobile age*, *it’s important that the page is optimized for visitors. This means the combination design elements helps the visitor understand the offer on the page and makes it easy for them to redeem it.
One major hurdle standing in the way of mobile landing page optimization is that it’s confused with mobile responsiveness.
Mobile Responsiveness versus Mobile Optimized
Responsive design is a development technique that detects the device type and dynamically adjusts the layout of the page according to the device screen.
For example, this is what a responsive design looks like on a tablet and a phone:
Mobile responsive landing pages always have consistent elements regardless of the device they're viewed on. This means the page has the same headline, copy and CTA button whether you view it on your desktop, tablet, or smartphone.
Marketo has a mobile responsive landing page, as seen below on desktop and mobile devices, respectively:
The page elements are the same for both versions, and even though the page is legible on mobile, the sequence of the elements doesn’t make much sense. The premature location of the lead capture form directly after the headline isn’t ideal for conversions.
Mobile optimized landing pages on the other hand offer a dedicated experience for mobile users. Desktop pages and mobile optimized pages, don’t necessarily have the same elements because they’re created keeping in mind how visitors interact with the elements on mobile.
HubSpot also has a mobile optimized page. Here’s what the page looks like on desktop:
The mobile optimized HubSpot page has less copy than the desktop version and the lead capture form is also shorter.
To create an optimized landing page experience, implement the following ten optimization techniques because once you do, you’ll be on your way to more conversions.
1. Use Large, Legible Fonts
The font you use should be legible on a smaller screen; Google recommends using a base font of 16 CSS pixels. You can then use sizes relative to the base size for defining typographic scale — such as subhead, body copy and CTA button copy.
It is acceptable to use different font sizes on landing pages to maintain a visual hierarchy, but be sure that all the fonts are legible on a smaller screen.
I don’t recommend you do what AdBasis does with their page:
Yes, the headline font size is larger than the body copy. However, all fonts used aren’t readable.
In contrast, the Outbrain landing page, maintains a visual hierarchy and takes care of font size:
2. Optimize Images for Mobile
If you’ve created a responsive mobile landing page, all images will scale down from their actual size when viewed on mobile. However, this doesn’t mean that an image that looks great on a bigger desktop screen, or will have the same visual appeal on a smaller screen.
So, when it comes to adding images on your mobile landing pages consider answering the following questions:
Does the image appear too early on the page (e.g. above the fold)?
Does the image help explain your conversion goal on the mobile page?
Does it distract visitors from seeing the CTA button?
What is the image-to-copy ratio of the page?
Got it ditches the background image of a woman on their mobile page, to reduce clutter and keep the attention on the headline and CTA buttons. This is the desktop version:
This is the mobile version:
3. Simplify Navigation
On a desktop landing page you can have these links neatly placed on the page footer. For a mobile landing page, however, it’s best to put every element accessible to the visitors at first glance. This is where a hamburger menu comes in.
Putting the links in a collapsible menu, helps de-clutter the page and gives visitors the freedom to see the links whenever they want to.
4. Avoid Full Screen Pop-ups
Using a tasteful pop-up on your mobile landing pages helps you get another shot at a conversion. However, make sure the pop-up doesn’t take up the entire screen and annoy visitors who want to take another look at your offer’s description.
In fact, Google is punishing mobile pages that use interstitials. The same goes for any pop-ups you might use on your landing page.
The image below shows examples of a pop-up and interstitials that could incur a penalty from Google for making content less accessible. :
5. Simplify Page Copy
Mobile visitors are on the go, so they don’t generally have the luxury to read through a bunch of copy. To avoid clutter and not crowd your mobile landing page, it’s best to keep mobile copy brief and to the point.
Simply take the copy you have on your desktop and rearrange, reformat and rewrite the headlines, sub-headlines and page copy to keep only the most valuable stuff on the mobile page.
6. Add a Click-to-Call Button
One advantage you get with a mobile landing page, is the fact that visitors can call you with a simple click of a button.
A click-to-call button on a mobile landing page enhances user experience, and has a positive impact on conversions. Add the button as a secondary CTA button, alongside your primary CTA button — to make it easier for visitors to locate it in case they need to make a call.
Colorado Technical University uses a click to call button on their landing page:
7. Use Plenty of Whitespace
A mobile landing page has less physical space than a desktop (and tablet devices for that matter), so the page can fill up pretty quickly, which leads to a cluttered page design. Whitespace is your friend when creating landing pages, especially on mobile landing pages, because it helps de-clutter the page and keep visitors’ focus on the conversion goal.
8. Keep the CTA Button above the Fold
CTA buttons are meant to be color contrasting and be written with personalized copy so that visitors are drawn to them. For visitors to notice your mobile landing page CTA button, it’s best to place the button above the fold so that visitors know from the start what they can expect to receive by converting.
Scrolling behavior differs on mobile so give your visitors your UVP (the headline) and the CTA button above the fold to persuade them to scroll below the fold.
9. Mobile Pages Should Load Quickly
Page speed is an important deciding factor in how many clicks you’ll get on the call to action button. This is because a 1-second delay in page response can result in a 7% reduction in conversions:
Graph courtesy of Kissmetrics
On a mobile landing page, page speed is critical to getting conversions. Mobile users won’t wait around long for your page to load because they’ll quickly back out without giving your page a second thought.
The secret to fast page load times is smaller image sizes, minimizing copy, and staying away from flash and page sliders.
10. A/B Test Your Mobile Landing Pages
Determining a winning page variation allows you to prove which page elements and layout design generate the most conversions. The testing process involves creating a variation of the page you wish to test, changing an element, splitting traffic between the two page variations, and measuring which variation received the most CTA button clicks.
With A/B testing, you can determine which element adds the most to your conversion goal. To demonstrate, when Rasmussen College tested a mobile page with a click-through menu they were able to improve conversions by 256%:
And that’s just one proof point that speaks to the power of A/B testing. There are countless other examples online that support A/B testing landing pages.
Optimize your Mobile Landing Pages for the Mobile Experience
The world has gone mobile, it’s about time your landing pages catch up, too. Promoting a mobile app isn’t the only reason why you should create a dedicated mobile experience for your visitors. Think about the mobile experience with every offer you’re promoting.
Optimizing mobile landing pages will come easy to you if you think about how visitors view pages on their mobile devices. "Less is more" here and it’s recommended that marketers eliminate all elements that won’t add value on a smaller screen. Keep these 10 mobile optimization tips in mind when you create the next landing page for your small business.