Mobile traffic has outshined desktop traffic since 2016.
Google has begun their rollout of the mobile-first index.
And that doesn’t mean just having a mobile-friendly landing page.
It means dedicating time and effort into mobile design and creating landing pages that are meant for mobile users rather than an afterthought to desktop.
Here are five of the best mobile landing page examples to spark creativity for the mobile era.
1. Drift: Highlight Your CTA (Without Being Annoying)
The goal of your landing pages is simple:
Get the user to convert on what you’ve got to sell.
But the process of actually getting someone to convert and fill out a form or sign up isn’t simple.
You could spend days, weeks, and months crafting call-to-action ideas. And then you’ve got to test them.
You think you have the greatest copy known to the human race until you check your conversion rate and find that it’s only moved up 0.05 percent.
What are they doing?
- 8 percent of that time is used in their web browser.
- 92 percent of their time is made up of mobile app usage.
Capturing their attention – and, more importantly, keeping it – is proving to be a difficult task.
Just getting users to your page on mobile is tough enough when apps dominate the scene. Keeping them there requires a strong CTA that grabs attention fast.
And perhaps there are none better than Drift:
Drift’s mobile landing pages provide instant visual appeal with a simplistic design that immediately draws your attention to the meat and potatoes: create free account.
With a standard, simple black-and-white design, the color-changing CTA stands out subtly without annoying users with arrows and popups.
Scroll down below the fold and you’ll notice the same design that carries throughout the landing page:
Mobile users are more distracted than ever before with billions of apps. Keeping them around and converting requires highlighting your CTAs without over-doing it. And Drift masters this by contrasting dynamically changing colors with a simplistic design.
2. Hulu: Keep the Best Content Above the Fold
We’ve all heard it before: when it comes to mobile, you have to keep content above the fold.
While this principle is common, what does the data really say? Is it really that important?
A 2014 study from Google on viewability insights found that content above the fold had 73 percent viewability, whereas content just below the fold saw a 30 percent drop in viewability instantly.
More recently, Nielsen analyzed page fold impact on viewability and conversions, stating that “evidence is abundantly available in the case of the page fold…84 percent is the average difference in how users treat info above vs. below the fold.”
Keeping your best content above the fold is key. But that doesn’t mean you can’t have a longer landing page.
Nielsen noted that your above-the-fold content has to be your top-of-the-line selling point and should encourage scrolling.
If your content above the fold isn’t up to snuff, you can’t expect someone to scroll.
Hulu is a prime example of keeping their top content above the fold:
In the background of their free trial landing page, the most popular current TV shows are on display, instantly compelling users to sign up to get access.
With a strong value proposition of “Watch Shows and Movies Anytime, Anywhere” you can’t help but start a free trial.
Using a gradient CTA that stands out is just the icing on the cake.
Scrolling further you can get more information on terms and conditions, but it quickly becomes clear that this information is secondary to the importance of the fold:
It doesn’t showcase popular shows and movies or any CTAs and value propositions.
The importance is fully placed above the fold with a secondary focus below the fold.
Hulu masters the technique of hooking mobile users right out of the gate.
3. PayPal: Skip the Small Talk & Get People to Sign Up
One of the biggest difficulties of a mobile landing page is deciding how to get someone to convert.
Distractions are plentiful. Not to mention the fact that form submission on mobile is half of what it is on desktop.
Mobile users don’t like to fill out long forms or type in information.
Don’t give mobile users yet another reason to bounce without completing the desired actions of your landing page.
PayPal knows this and takes advantage of it by jumping past any pleasantries or value propositions:
Clicking on a landing page for PayPal, you instantly get directed to choosing between two types of accounts based on your needs.
You don’t get the wine-and-dine value proposition of why PayPal is the best.
Instead, you dive directly into account creation.
PayPal uses a simple design where all you have to do is keep pressing continue and making simple selections.
To provide extra incentive to continue, they assure users that “It’s a secure, easy way to pay and get paid.”
If you can simplify the process and eliminate forms with creative alternatives, you can expect big wins on mobile as 50 percent fewer submissions are common.
4. Buffer: Seamlessly Integrate Video Content
Video content isn’t the wave of the future anymore. It’s currently dominating online:
YouTube alone has over 1.5 billion monthly active users. And those users are watching over one hour of video content every single day. On just mobile alone, not including desktop.
According to a Cisco report, by 2021 global IP traffic online will be 82 percent video-based. According to the same report, currently, 73 percent of online traffic is video.
But integrating video on a mobile landing page isn’t easy. Not when single second differences in your landing page speed result in 90 percent increases in bounce rate. According to Google, most landing pages in every single industry are far too slow already, missing the three-second load time best practice.
So adding video content to an already slow page seems like a disaster.
But it’s not:
Implementing video content on a mobile landing page means you can eliminate tons of other content and page elements that the video covers.
Buffer is a prime example of this tactic, integrating video for mobile without impacting the user experience:
Seamlessly integrating, you can watch without leaving the page or even full-screening the video.
Meaning you can multi-task: read the value proposition and consume video content.
And since mobile users are consuming more video content than ever before, it’s a match made in heaven.
Want better results on your mobile landing page? Convert your long-form text content into a concise video that can be viewed directly on your landing page.
5. Trello: Static/Sticky Header CTAs
Scrolling a long-form landing page on mobile isn’t the most enjoyable experience.
When you’re on-the-go or using a small screen, scrolling a relatively small page takes time and effort.
And, more often than not, scrolling down means you have to scroll all the way back up to find the CTA you saw above the fold.
Unless the same exact CTA is at the bottom of your page, users are often forced to scroll back up.
But Trello implements a tactic that shifts from the norm of mobile landing pages: sticky headers with a static CTA:
No matter how far you scroll, Trello’s header with logo and a “Sign Up” CTA will always be at the top allowing the user to convert whenever they feel ready. Meaning if they don’t make it to the bottom of your page for another CTA, they can still convert.
You aren’t depending on an intro CTA and a final CTA to do the work. Users can convert at any moment.
And this tactic works.
One study found that floating headers helped users find info 22 percent quicker. The study also found that 100 percent of users surveyed preferred it. Meaning not a single person wanted a site without it.
The truth is, limiting your CTA conversion opportunities to just the top and bottom of your landing pages doesn’t maximize your potential.
Allowing users to convert when they want to is only possible with a static or floating header and a simplified CTA.
With the surge of mobile traffic and a mobile-first tidal wave set to reach the shore, now is the time to invest more time and effort into your mobile landing pages.
Follow in the footsteps of these five companies with killer mobile landing pages.
- Highlight your CTAs to make them stand out without annoying users or seeming desperate.
- Keep your best content above the fold to hook users in and encourage further scrolling.
- Skip the traditional landing page method like PayPal and jump straight into business.
- Integrate video content to reduce landing page length and utilize the most popular medium for mobile users.
- Use sticky headers to help users convert at any moment.
Follow these mobile landing page experts and you’ll be converting users in no-time.
More Mobile Search Resources:
- Google to Advertisers: Get Your Mobile Landing Pages Ready
- 10 Best Ways to Optimize Mobile Landing Pages
- How to Optimize a Small Website: On-Page & Mobile Factors
Subscribe to SEJ
Get our weekly newsletter from SEJ's Founder Loren Baker about the latest news in the industry!