Free Landing Page Optimization Checklist
It’s a pretty obvious trend that we’re all becoming more addicted to our mobile devices. Here are some stats if you don’t already feel clued in:
Ever notice how some mobile experiences are so seamless you don’t have to think twice about making a conversion?
These are the experiences that lead to high mobile conversions.
Trying to master the craft of creating a high converting mobile landing page can be quite the mission. It’s a feat that deserves its own set of attention, completely separate from building your standard landing pages.
We’ve put together some ideas for you, so you can conquer the skill of creating high converting mobile landing pages and smooth mobile landing pages experiences… to fly higher than your competition with more conversions, leads and sales.
Be cautious of shorter attention spans on mobile devices, and take the effort to decrease loading time and increase site speeds.
According the Kinsta, 74% of mobile user abandon mobile sites if they don’t load within 5 seconds:
You can build your mobile landing pages for users with limited data by decreasing your load time and following some principles, like these Unbounce tips:
You can turn your CTA into a click-to-call button and make it easy for your mobile users to call in to opt-in to your offer or request more info.
According to Search Marketing Expo’s John Busby, click-to-call commerce is projected to reach nearly $2 trillion in 2019:
“Research shows that 70% of mobile searchers call a business directly from search results.”
They also found that consumers use calls to research and transact:
“We found that calling is most important during the research and purchase phases, where 52% and 61% of mobile searchers respectively say it’s important to have the ability to call. This means that a large number of calls happen when someone is ready to buy or helps a consumer move closer in purchase consideration.”
Testing Tip: Try testing your click-to-call CTA above the fold on your mobile landing page to see if that brings in more phone leads.
You can use HTML5 to use the Geolocation API, which’ll give your visitors a local option. Having a nearby choice can add relevancy to your visitor’s mobile experience.
Geolocation takes your visitors location in through the GPS receiver.
Permission needs to be granted by your visitor and looks something like this:
“50% of all mobile searches are conducted in hopes of finding local results, and 61% of those searches result in a purchase.”
And according to Business 2 Community, consumers act quickly after their local search and 47% more mobile visitors vs computer/tablet will visit a physical store within a day of their local search:
Use Google Analytics to determine the most prevalent mobile devices your customers and visitors are using and use that data to test out various mobile landing page design elements, like screen resolution and site performance.
You can first navigate to a device-specific custom report in your Google Analytics dashboard by navigating to Audience > Mobile > Overview. The report will look something like this:
Using a tool like Varvy can help you pinpoint any mobile SEO issues you might have. Simply type in your mobile landing page domain and click test to receive a report.
Here’s what the front end of the tool looks like:
These points can help out with your mobile user experience, which can in turn, help boost your mobile landing page conversion rates.
This concept can be carried over from standard desktop and laptop landing pages. According to Unbounce’s Oli Gardner:
“Shoppers who add items to the cart are more likely to make a purchase than those who do not.”
To make sure your visitor’s mobile user experience is just as convenient, be sure to include the Shop Later or Add to Cart or Add to Wish List features on your mobile landing pages. This is especially relevant to ecommerce businesses.
Magento calls these persistent shopping carts and defines them as:
“A persistent shopping cart keeps track of unpurchased items which are left in the cart, and saves the information for the customer’s next visit. Customers who are “remembered” can have the contents of their shopping carts restored the next time they visit your store.”
Here’s some cookie info about how persistent shopping carts are used:
When placing your buttons be cognizant of where the user’s thumb is naturally placed and tailor your mobile landing page to that layout.
According to UXmatters, here’s how people hold and interact with mobile phones:
Test user interface (UI) on your mobile landing pages with tools like Mobile Phone Emulator. You can test in landscape and portrait mode and also determine how mobile accessible your pages are.
You have the option of emulating the mobile landing page experience down to the device and screen resolution size.
The initial interface looks like this:
Some additional tips for you here…
Do This: Using HTML5, jQuery, JPG and GIF are recommended on mobile.
Don’t Do This: Frames, Flash, old plugins and pinch and zoom are typically things that you’ll want to stay away from.
If a visitor gets as far as completing fields in your form, a way to make the process as easy as possible is to adjust the keyboard for each form field.
If you’re requesting a zip code, quantity or phone number use the numerical keyboard. If you’re requesting info based on words use the alpha keyboard.
Here’s an example of the ideal adjusted keyboard matching the form field type:
Reflect your visitor’s identity by personalizing your message. A tried and true way to do this is to understand your visitor’s goals and to find out where they are in the conversion cycle.
Here’s our version of the conversion cycle:
This one takes it a step further where you analyze your PPC traffic on mobile. Consider the differences in your customer journey and decipher between different traffic channels that your visitors came to your mobile landing page from.
If you’ve been following our blog, you’re likely to recall this:
This is especially relevant for ecommerce businesses since people have historically preferred to checkout on desktops over mobile devices.
A way to lessen the checkout or conversion friction is to offer something special to your visitors on mobile. Exclusivity in your offer can help create a sense of urgency and fear of missing out (FOMO), something that can help nurture the visitor’s mobile conversion experience.
Here’s how Kohl’s offers a mobile exclusive deal:
In the same way that you want to be succinct while copywriting your offer, be super clear about your offer’s customer benefits on your mobile landing page.
What exactly is your unique value proposition (UVP) and again, how will it change your visitor’s life for the better?
Here’s an example of an unclear vs clear value on mobile landing page:
There’s not much real estate on the mobile screen, so every word counts even more vs other devices. You’ve heard this before but get to the point, be clear and use succinct actionable verbiage.
To clearly communicate, get to the point with fewer words and be clear about outcome of your offer.
Answer the question for your visitors as succinctly as possible: How will my life improve with this offer?
Here’s a test that compares succinct vs a plethora of options:
The version on the right is not only challenging to visually navigate through, but it also doesn’t show off the UVP very clearly at all. The offer gets lost in the clutter of excess content.
Headlines and titles are the first thing to stand out on mobile landing pages as well, so be clear, brief and action-oriented in your headline.
A Conductor study showed that the more explicit headlines that include facts and numbers, resonated more with readers:
A way to avoid taking up too much precious mobile landing page space to avoid using superfluous fluffy words that serve as intensifiers or superlatives.
Steering clear of words like “ultimate,” “totally,” “smartest” and “best ever,” can help you minimize text.
Not only do they take up too much space, but they tend to come off as hard-to-believe also.
In Conductor’s study of headline superlative preferences, they discovered that respondents prefered the understated headline:
Having a landing page design dedicated specifically to mobile is ideal vs a responsive page design.
The reason being responsive landing pages may not always translate properly to mobile screens, so having a full-proof dedicated design may be the better option.
Too often we witness people thinking that a responsive variation of a desktop landing page is all you need to have optimal mobile performance… which is so not the case.
Most of the time, a unique mobile experience is what your visitors need, and not just a responsive version of another device’s landing page.
Here’s an example of how effective a single-column dedicated mobile landing page appears in contrast with one that’s not so optimized:
I’ve touted this one many times, especially in 47 Mammoth Landing Page Mistakes, and the idea is even more applicable to mobile landing pages.
Basically, when it comes to mobile landing pages, do everything in your power to keep your visitor distraction-free and focused on your one CTA goal.
This can mean many things. Here are some tips:
Also known as fixed headers and footers, these sticky elements can assist with mobile usability and user experience especially when you have longer landing pages with scrolling or click-to-scroll options.
If your visitor should make their way down to explorative territory beyond the first fold, sticky headers and footers can make it super easy for them to find their way to your conversion.
Smashing Magazine conducted a usability study where participants found sticky menus to be 22% quicker to navigate.
Here’s a format of a sticky header:
Similar to the effectiveness of sweet website popups on standard landing pages, offering enticing deals and opt-ins via mobile popups can also be worthwhile.
According to VentureBeat, MediaBrix conducted a study that found:
“Viewers were 2x as likely to have a negative emotional response to a full page interstitial ad than to a rewarded, opt-in ad.”
If that’s the case, then it might be worth testing out mobile popup offers based on rewarding opt-in experience.
Here’s an example mobile popup offer from Zulily:
An effective way to keep content compact yet still available to visitors that want to explore for more info on your mobile landing page is to use scrolling cues, like the click-to-scroll tactic.
Although Jakob Nielsen found in his scrolling and attention study that “web users spend 80% of their time looking at information above the fold,” on mobile devices you’ll want to give your visitors the opportunity to explore more information beyond the skeleton version of what’s on that first portion above the fold.
There’s not much room for additional exploratory content on the top portion of a mobile screen, so it can be beneficial to use scrolling cues to let your visitors know there is more info if they want it.
We’re big advocates of increasing the number of fields and using multi-step forms on your landing pages. Sure, there’s less attention span and less space on mobile devices, so do test out various form lengths.
Just keep in mind the advantages of increasing threat levels in your form fields as visitors progress through the form:
The proportions of your form fields on your mobile landing page vs desktop and other devices will vary, so adjust design elements for various reasons:
Even if it’s a minor space adjustment, a little space savings can go a long way in providing additional space on your mobile screen:
“Place the label closer to the associated text field than to the other text fields… Items near each other appear related.”
This concept taps into the Law of Proximity where the brain tends to group things that are near each other together in a category.
In terms of form fields: When the label is closer to the form field, the two will be grouped together in the brain, making it less confusing for the user.
The Nielsen Norman Group recommends the form design on the left:
Because people behave with shorter attention spans on mobile vs other devices, it’s important to create nurturing messages that encourage your visitors to complete your online forms.
The last thing you want is for someone to make an error in your form field and then ditch out on the form because they feel discouraged.
Here’s how MailChimp acts as cheerleader when a visitor makes comes across a form error:
We’ve written about cases where there’s higher conversions for offers both above and below the fold on standard landing pages. When it comes to mobile landing pages, however, due to the limited space, consider keeping your offer within the first fold.
In this mobile landing page test, conversions increased by 201% when moved above the fold:
What works on desktop doesn’t necessarily work on mobile, so make the proper image adjustments when designing your mobile landing page.
To get to the point more quickly, show (don’t tell) your product or service features.
Some tips on image optimization from Kinsta’s Speed Optimization Guide:
Another way to help speed things along in your opt-in forms is to have the information autocompleted for your visitors whenever possible.
Here’s an example of an autocompleted form when I went to download HubSpot’s How to Be More Productive ebook on my mobile:
You can avoid having your visitors scroll for days on your mobile landing page by including collapsible and dropdown menus.
By packing your form field options into nice and compact options, you can reduce the time spent completing your forms, which will increase the likelihood of your visitor completing your forms.
Here’s a form framework that uses both menus:
With a tiny screen mobile space in comparison to desktop, the type and size of your mobile landing page fonts matter.
Using legible landing page fonts means cleaner styles and larger sizes.
If you’re looking for font style ideas, CreativeBloq recommends the following 10 font types for mobile:
ClickLaboratory ran a study on two font sizes that looked like this:
Keeping a clean design with minimized distractions can be helpful in optimizing your mobile landing page screens. Some tips include keeping a single column layout with a decent amount of whitespace, to improve readability and a positive user experience.
Clean simple designs can help your visitors understand what the heck is happening on your page with much more ease.
Here’s a hotels4u test that compared performance between a cluttered vs clean single column mobile landing page:
Bullets make it super easy to consume content and they also save space on your screens. If you want to include extra info beyond bullet points, consider using expandable accordions.
When people want to access quick and immediate info, bullets can be the way to go.
Here’s a test that you can apply to mobile landing pages. Google compared bullet points vs a video format on a website optimizer page:
Now that you have 31 concepts under your belt, it’s your turn to go out and perfect your mobile landing page experience for each of your visitors.
Like everything, test each of these elements diligently… in case you come across an epic result that gives you mobile conversion magic.
When it comes to PPC, the first person I turn to is Johnathan Dane. He and his team cut through the bullshit and get straight to the point with the goal of making you more money. Work with him."