Disclosure: We sometimes use affiliate links which means that, at zero cost to you, we may earn a commission if you buy something through our links.
With mobile dominating search, more of your landing page traffic comes from the portable devices in people’s lives. Research by Wolfgang Digital reveals that 59% of all eCommerce sessions in 2016 were on mobile.
Which confirms what we already know: it’s vital that you optimise your pages for the best possible experience on mobile. But the standard approach of building a responsive website doesn’t always cut it when you’ve got specific marketing goals for each ladning page. So here are 18 mobile landing page optimisation ideas and best practices to help you get better results.
#1: Rethink your mobile goals
Source: Wolfgang Digital
While most searches are conducted on mobile, 63% of eCommerce revenue comes from desktop sessions – and it’s important we keep this in mind. Users clicking through to your landing page on mobile often come with different intentions, which means you might need to rethink your goals for these visitors.
Don’t assume one responsive landing page is the best option for all devices. A separate landing page with specific goals, content and CTAs might be the way to go for mobile campaigns.
#2: Go easy on the copy
Mobile screens are considerably smaller than desktop. Squeezing all that same content onto a smaller screen can kill the flow, layout and impact of your landing page copy. Shorter, punchier copy created with mobile screens and scrolling in mind is another good reason to consider separate mobile optimised landing pages.
#3: Go easy on the visuals
Visuals are important with landing pages but they’re also demanding on browsers, internet connection and device harder – all things that can be in short supply for mobile users.
So consider trimming back the visual content for mobile users and make sure you compress your files for mobile-friendly sizes.
#4: Ditch the videos
I’m not saying mobile landing pages should never have videos but be careful with these things. First of all, forget about any video backgrounds in the hero section. They distract from the main message of your page and ask too much of mobile connections and data.
As for embedding videos into the main body of the page, there’s also another issue. Autoplay videos are a no-no and getting users to click the play button can be problematic. Is that really the action you want users to take? Probably not. And getting them to hit play takes away the emphasis from the action you do want them to take.
#5: Speed matters
Speed is always important for any landing page but mobiles come with limited resources. In terms of hardware, the top smartphones are powerful machines these days but not everyone has the latest iPhone. Likewise, not everyone has access to endless WiFi or unlimited data. Ignore these restrictions at your peril.
#6: Nail the mobile optimisation essentials
Whether you go for a single responsive landing page or dedicated mobile designs, getting the optimisation essentials wrong is unforgivable. This means using font sizes that are scalable (em, %, etc.) and full-width, adaptive or responsive layouts. Keep server requests to a minimum and compress everything you can to reduce file sizes. And optimise your designs for touch, not keywords and mouse clicks.
#7: Don’t fall for the AMP sales pitch
You’ll hear a lot of press about Accelerated Mobile Pages (AMP) and the wonders it can do for loading times. Google is now pushing business owners to sign up for AMP landing pages but I recommend you research the downsides to AMP before signing up – there are plenty of them.
#8: Lose the hamburger navigation
In fact, you should probably ditch the navigation altogether when it comes to landing pages. But the “hamburger” menu solution (which has a number of UX issues at the best of times) has no place on mobile landing pages.
Take it out and focus on steering users toward the action they’re supposed to be taking on your page.
#9: Make sure all text, elements are large enough
One of the most common mistakes you’ll see when visiting landing page son mobile is that certain pieces of text or other elements aren’t large enough. This is particularly common with responsive designs and especially so with responsive themes on CMS platforms like WordPress.
Keep an eye out for this and make sure every element on your page is large enough on smaller screen sizes.
#10: Stick to default scrolling behaviour
Scroll hijacking became something of a trend in 2014 and it’s probably one of the worst we’ve seen in the mobile age. Overriding the default scroll behaviour of web browsers takes users out of the experience they know and trust. It distracts their attention away from your content and there’s a good chance they’ll get frustrated and leave before you get a chance to make your point.
#11: Mobile optimise your forms
The vast majority of brands fail miserably when it comes to optimising forms for mobile. At the most basic, you should use the latest HTML5 form elements to make the typing experience better for mobile users.
In terms of layout, stick to single columns and large input fields to make using forms easier. Better yet, forget the bog-standard form design and try out something that genuinely caters for mobile users.
#12: Reduce clicks and typing
Multi-step forms are one design approach you should definitely check out. We’re seeing much better results than previously achieved with standard web forms and they’re just about the best mobile form experience we’ve seen.
With touch buttons, conditional logic and responsive designs, users don’t need to go through the usual pain of clicking and typing their way through your forms. Which means you can ask for considerably more information without killing conversion rates.
Using a form builder like Leadformly that supports responsive multi-step forms makes it quick and easy to start benefiting from an optimised multi-step form.
Start a 30-day Free Trial
Get an extended trial period!Try Leadformly Today
#13: Use click-to-call CTAs
Back in the old days, phones were used to make phone calls and little else. Believe it or not, modern smartphones still come with this capability and allowing users to call you directly from your landing page should be a standard feature.
Make sure your number is present and clickable so users can call you with one tap. Better yet, create click-to-call CTAs that entice users to get in touch. Finally, use call tracking to make sure the leads that come via phone calls don’t slip through your analytics and lead nurturing efforts.
#14: Use high-contrast
People tend to use their phones everywhere. Natural outdoor light makes it hard to see what’s on a screen and low-contrast designs will be almost impossible for users to see in harsh light. So go for high contrast designs on your mobile landing pages – and really make those CTAs stand out.
#15: Stick to single column layouts
Single column layouts are easier for users to navigate visually and much easier for you to design as well. Phone screens are essentially a single vertical column and breaking away from this can be awkward and distracting. That said, there are times when you want to jar people’s attention so the occasional section of columns or misaligned content can be powerful amongst an otherwise single-column design.
#16: Ditch the popups
Landing pages aren’t the best place for popups at the best of times but mobile users really don’t want to be seeing these things. If you find using exit popups makes a significant difference in tests the fair enough. Otherwise, ditch the popups altogether for mobile users on your landing pages.
#17: Know what to test
No matter how good your initial landing page designs are, sooner or later you’ll need to run tests to improve performance. The key is knowing what to tests (and what not to test). Pitch two different landing pages against each other or two separate CTA designs to see how your users respond. Don’t waste time testing different background colours that have no real impact on the user experience.
#18: Don’t lose sight of your brand
One danger with testing and refining your design is you might end up losing sight of your brand image. Take the Freelancer example above. This is a site primarily aimed at web designers and people looking to hire them. Yet the mobile version of its site does nothing to reassure them that quality design gigs or designers are associated with the brand.
Design for mobile users
With responsive design so widely adopted, most brands take the easy option of creating one landing page for all devices. The problem is mobile users search and visit sites with a different mentality than desktop users. People move from one device to another as they make their way along the buying process and the mobile/desktop sessions play different roles.
Which means your mobile landing pages need to provide the experience and encourage the right kind of actions along these different stages. Luckily, you can easily create advertising campaigns to target mobile users and create dedicated landing pages for them. So don’t settle for the same landing page for all devices. Map out the journey you want users to take, which devices they use along the way and optimise your landing pages accordingly.