Mobile Landing Page Examples That Seriously Set the Bar

We’ve all had frustrating experiences browsing the web on our phones: load times that seem to carry on forever; pages that are cluttered and difficult to navigate; long, rambling blocks of text that make it tough to understand what you’re even looking at.

Well, at Unbounce, we’re putting our foot down. We’re tired of junky mobile landing pages. We want to celebrate the pages that do mobile right, with easy-to-follow copy, super-sleek designs, and crazy-fast load times. And since it’s our blog, that’s what we’re going to do.

But before diving into the incredible, Unbounce-built examples, we’ll cover some tips for how to knock your next mobile landing page outta the park.

Mobile Landing Page Best Practices

(“Duh, I know how to make killer mobile pages. Show me the examples!”)

Mobile landing pages aren’t so different from their desktop counterparts, and standard best practices still apply. However, there are some additional considerations for on-the-go visitors, and it’s why you should really be building separate landing pages for mobile (or, at the bare minimum, ensuring that your page is mobile-responsive).

Here are some sure-fire ways to build great mobile landing pages:

• Be concise in your written copy
  Brevity might be the soul of wit, but it’s also the soul of mobile landing pages. (My high school literature teacher weeps.) Consider how visitors are going to be engaging with your content. Distill the information on your page to just the essentials, and make it easy for visitors to skim: bullet points, short sentences, obscure acronyms, ASOASF. (No, not ASOIAF, ya nerd.)
• Nail the content above the fold
  Above the fold content is crucial on any landing page, but it’s especially important for converting mobile users. We have a terrible attention span when we’re on our phones: we spend less time on sites than when we’re on desktop, and bounce rates are way higher. That means your content needs to hook visitors the moment they hit your page.
• Keep your design super simple
  This isn’t to say you can’t include awesome graphics or a catchy explainer video (although you need to be careful—more on that below). Rather, you want visitors to move naturally through your page without getting lost or overwhelmed. Use a single column layout, and strive to maintain a 1:1 attention ratio. If you’re using a lead gen form, keep the number of fields to a minimum and make sure visitors can autofill.

What does “attention ratio” mean? Attention ratio is the ratio of links on a landing page to the number of conversion goals. Since every campaign has one goal, the corresponding landing page should only have one call to action.

• Make use of sticky bars
  Landing pages are all about getting visitors to convert—but on smaller screens, it can be harder to draw their attention to the action you want them to take. Sticky bars can help keep your call to action (CTA) top-of-mind (or top-of-screen) by having it subtly follow your visitors as they scroll through your page.
• Be sure everything loads lightning-fast
  Quick load times are essential to converting with mobile landing pages. The bounce rate for mobile visitors gets crazy high after loading for just a few seconds—and considering most of the world is still browsing on 3G connections, any poorly-optimized images or videos on your page could be slashing your conversion rates. Keep things light.

Ready to boost your page speed?

Get Unbounce's landing page speed checklist and follow our step-by-step guide to improve your load times in a single afternoon.

Best Mobile Landing Page Examples

1. Western Rise

Image courtesy of Western Rise. (Click image to see the full page.)

Social media is a massive driver for ecommerce. Something like 54% of people active on social use the platforms to research products, and roughly a quarter click a promoted post in any given month. But driving conversions from social platforms requires a coherent, uniform experience—from the moment someone clicks an ad on their timeline to when they’re trying to remember their PayPal password at checkout. (Was it ‘12345’, or just ‘password’?)

Will Waters, Co-Founder and Creative Director at functional clothier Western Rise, described how the company turns mobile visitors into handsomely-dressed customers.

With a lot of our current traffic coming from Instagram, it’s imperative for us to have a seamless experience for our customers to learn more about the product.

We specifically chose to build this with Unbounce because we see that a potential customer can click or swipe to arrive at the landing page and learn about the product in detail without having to click through multiple pages.

Best Mobile Landing Page Takeaways:

• Maintain a unified experience from beginning to end. When you’re building a seamless social-to-storefront experience, you don’t want prospects jumping out of that pipeline. All of the information a visitor needs to make a purchase decision is right here on the page, so there’s no need to bounce and look for more details. Reinforcing that, every CTA on this landing page leads visitors to the same spot on Western Rise online store.
• If you’ve got an attractive product, show it off. People don’t buy clothing unless they believe it looks good. (The obvious exception being foam clogs—what’s the psychology behind that?) Western Rise includes bold photography to highlight their clothing in the context of use, demonstrating fit and function that would be great to show off on your social timeline.
• Optimize those images (seriously). This is an image-heavy page, which can be problematic for load times on mobile. Not here: Western Rise gets an impressive page speed grade from Google, which is like getting a thumbs up from Beyoncé or a backslap from Jeff Goldblum.

Bonus: Western Rise uses a popup on the linked store page to promote a giveaway contest and capture leads. (Hey, if they’re not gonna buy, you can at least try to snag their email address.)

2. Glints

Image courtesy of Glints. (Click image to see the full page.)

Marketers sometimes have a way of over-complicating things. (Who, us?) They’ll use a paragraph where a sentence will do. They’ll build an explainer video when all prospects want to see is a screenshot. On mobile, simplicity wins.

This landing page from talent recruitment platform Glints is an excellent example of how to do mobile right. The brand uses strong content above the fold that immediately communicates what the service is and why we should care: the copy is concise but descriptive, and there’s lots of white space that lets things breathe. It’s not longwinded or excessive—it’s compact and effective.

Best Mobile Landing Page Takeaways:

• Keep things straightforward. You don’t need to drown your visitors in content, as Glints demonstrates here. The company pares its copy down to just the essentials, then arranges the page in a way that doesn’t give visitors a claustrophobic panic attack.
• Use a hero image that reinforces your headline. Glints does a lot of messaging work above the fold. The top headline instantly identifies the target audience, which is backed up by the hero image. The supporting copy speaks to the promise of finding a dream career. Then, the second heading quickly shows off some of the significant brands hiring through the platform.
• Multiple CTAs all go to the same place. An attention ratio of 1:1 is ideal, but you can include additional calls to action if they all point in the same direction. Glints does that here, each with variant copy that prompts the visitor to convert. If the content above the fold doesn’t do it, maybe the logo spread of brands on the platform or the expanded benefits will.

3. Promo

Image courtesy of Promo. (Click image to see the full page.)

Promo are experts at using videos to drive conversions on their landing pages (as we highlighted in this post on high-converting pages). And they ought to be: the easy-to-use platform lets customers quickly build videos for sponsored social media posts. Promo not using videos in their marketing would be like Superman not using the power of flight in his marketing. (It’s a bird, it’s a plane? Ah, you’re too young.)

But video content can be a big problem for mobile visitors. Deployed carelessly, it can dramatically increase a landing page’s weight and create grueling on-the-go load times. Poor page speed can cancel out any conversions you hoped to gain by including a video in the first place.

Yael Miriam Klass, Promo’s Content Lead, described how the company uses video on mobile landing pages without sacrificing the overall experience:

The best way to grab attention and keep visitors on your mobile landing for more than half a second is with a simple video. Simplicity is key because it needs to load quickly or you’ve lost them.

Best Mobile Landing Page Takeaways:

• Create a lightweight experience. It’s not clear from just looking at the mobile version of this landing page, but Promo has done a lot to slim the content down from desktop. The full-sized page features an auto-play video in place of the hero shot and dynamic buttons overlaid on the sample videos. Instead, the mobile version uses static images that only play video once a visitor has interacted with them.
• Get the most from the space above the fold. The headline conveys Promo’s unique selling proposition for this targetted segment—that is, easily creating videos for social media. Coupled with a clickable explainer video and prominent call to action, Promo makes the most of the available real estate to deliver a wicked first impression above the fold.
• Build credibility with trusted brand logos. Promo includes Facebook and Instagram partner badges above the fold to immediately affirm that they’re trusted by major social media platforms—an important point when you’re trying to win with a social media use case. The page also features a spread of client brand logos and individual customer testimonials, further establishing credibility.

4. Country Chic Paint

Image courtesy of Country Chic Paint. (Click image to see the full page.)

Emotional marketing is a great tool regardless of medium, but it’s especially useful on mobile. People tend to participate most in social media on their phones, and they’re already being emotionally primed by videos of dogs cuddling with ducks, or whatever you people are into these days.

This landing page from Country Chic Paint—built by Webistry—includes an emotional element that makes it more likely to resonate with mobile visitors.

Best Mobile Landing Page Takeaways:

• Use sticky bars to keep your CTA in view. Country Chic keeps their call to action prominently displayed throughout the landing page by using a sticky bar, making it easy for visitors to convert the minute they’ve made the purchase decision.
• Reinforce your offer with a compelling cause. In addition to the sticky bar, this page features a number of inline CTAs that continue to prompt visitors as they read through Country Chic’s bulleted product differentiators: the low environmental impact, the company’s paint recycling program, and their charitable initiatives. Plus, we know this is supporting a great cause, and it’s a compelling reason to buy.
• Show visitors what your product or service looks like in action. Country Chic does a terrific job of picturing their product in the context of use. Rather than just showing off the paints included with the kit, the company demonstrates how they actually look on a piece of reclaimed furniture and other craft projects.

5. ClaimCompass

Image courtesy of ClaimCompass. (Click image to see the full page.)

Making your offer clear is key to winning conversions on mobile. That can be tough when you’ve got a complicated product or service that needs some ‘splainin’—especially when it seems too good to be true.

ClaimCompass was also featured in our high-converting landing page examples post, where Alex Sumin, the company’s Co-Founder and CMO, described the difficulty of getting people to buy into the promise of free cash. That hasn’t slowed Alex down, though: in addition to turning one of every three visitors into conversions, this Unbounce-built landing page does a great job of distilling a complex regulatory measure into the tangible benefits for consumers.

When you look at the mobile experience from a contextual point of view, then not only are we limited by the real estate on the device, but also by the environment in which that content is consumed.

I think it’s important to acknowledge the micro-moments in which these mobile interactions occur and consider how they’ll impact our objectives, whether it’s content consumption, conversions, or other.

Best Mobile Landing Page Takeaways:

• Break complex ideas into understandable benefits. Free money sounds like a simple enough offer, but ClaimCompass is dealing with a ton of jargonistic legal and regulatory considerations. The company does an excellent job of grabbing visitor attention with brief copy above the fold, then quickly banging out the key benefits of the service with bullet points just below.
• Provide avenues to learn more (when appropriate). High-level explanations and benefit statements aren’t going to be enough to convince everyone. This page provides lots of secondary information that expands on the offer and outlines the ClaimCompass process, plus links to an in-depth blog post that gets into all of the nitty-gritty.
• Turn positive press and reviews into trust. Yeah, ‘no-strings cash’ sounds like fiction, but ClaimCompass builds credibility and trust by associating itself with the major news outlets its been featured in, highlighting the average customer review score, and pulling real testimonials straight from Facebook.

Bonus: The hero image speaks to anyone who has ever been on a delayed flight. Her face is my face. Her pain is my pain.

6. Helix

Image courtesy of Helix. (Click image to see the full page.)

Sleep is pretty popular these days, but archaeological evidence suggests that humans have actually been sleeping for thousands of years. Wild stuff.

Mattress company Helix capitalizes on sleep-mania with this landing page that really showcases what’s possible on mobile. Despite including a ton of information, this page never feels overwhelming thanks to some awesome design decisions that make each section feel fresh with a new visual style. What elevates the page to the next level, though, is Helix’s use of relevant testimonials and its smart lead generation tool.

Best Mobile Landing Page Takeaways:

• Make your landing page beautiful. This is a great-looking landing page, and it shows that you can build a visually-engaging experience for small screens. Each section seems to have its own texture—whether it’s unique iconography, eye-catching graphs, or the stylish video—and encourages visitors to keep scrolling.
• Provide social proof that speaks to your use case. Helix highlights customer testimonials from couples with different sleeping preferences, which is the audience this page is targeting. For example: “This mattress literally saved our marriage.” As a firm-mattress-lover currently stranded on 4 inches of memory foam, please send help.
• Generate leads by providing value. The landing page call to action drives visitors to Helix’s Sleep Quiz, which—after collecting their email address—asks prospects a series of questions to help them find their perfect mattress type. There’s value there, and it makes for a rich lead generation tool.

7. Boostability

Image courtesy of Boostability. (Click image to see the full page.)

Lead generation still typically comes down to filling out a form, which can make it a little tricky on mobile. Visitors aren’t eager to tap out all of their personal details on a small screen. And speaking from experience, people struggle to thumb-spell even simple words correctly. Good luck adding jimbo@gnail.cob to your email list.

If you’re going to use a lead gen form on your mobile landing page, you’d better make sure it’s autofill-enabled. That’s what the team at Boostability did, and—lo and behold—they’re currently rocking a conversion rate well above industry average.

Best Mobile Landing Page Takeaways:

• Be sure your form isn’t blocking conversions. Lead generation forms can be a barrier to conversion on phones, but that isn’t the case on this page. Boostability includes its short, autofill-enabled form above the fold, allowing visitors to easily register for their free website analysis.
• Show visitors what conversion gets them. Below the form, Boostability gives more details on what the website analysis actually includes, complete with screenshots from inside the product. This helps visitors understand what they’ll be getting when they give Boostability their personal details.
• Lots of content isn’t an excuse for a cluttered page. There’s a ton of information on this landing page, and Boostability manages to condense it all in a small space without making anything feel crowded. That’s because they’ve stuck to a single column that features loads of white space.

Not sure how your landing page performs on mobile? Run a test with the Unbounce Landing Page Analyzer, which ranks your page against nine specific performance categories including mobile responsiveness.

8. Good Eggs

Image courtesy of Good Eggs. (Click image to see the full page.)

Pitching your product or service to mobile visitors is tricky. People probably aren’t sitting down to read everything you’ve got to say. They’re usually on the move, half-glimpsing at their phone as wait in line for coffee or meander blindly into traffic. Even after you’ve got them on your page, you need to work hard to keep their attention.

That’s not the only challenge Good Eggs faced with this landing page. Grocery delivery is an increasingly crowded space, and the company needs to differentiate itself from its competitors. That means having an opportunity to explain why this service is different.

Heidi Hirvonen, Marketing Manager at Good Eggs, explained how the company builds landing pages that keep mobile visitors engaged:

We know that Good Eggs customers are incredibly busy—trying to optimize every moment in their lives—and looking for creative solutions to save time without compromising on their standards or values.

Unsurprisingly, about 50% of our traffic is mobile, which makes it vital for us to design mobile-friendly experiences for every step in the customer journey, from our marketplace, to our emails, to our Unbounce landing pages.

Best Mobile Landing Page Takeaways:

• Demand attention with compelling imagery. Good Eggs does a great job of breaking up their landing page copy with stylish photography, prompting visitors to pause just long enough to read about some of the company’s competitive differentiators. That’s especially important when you need to stand out in a crowded space.
• Make your offer immediately clear. This landing page is built around an offer promoting one of the brands of ice cream that Good Eggs carries, and everything above the fold reinforces that: the delicious hero-shot of the ice cream; the copy outlining the discount for the ice cream; the prompt to claim the ice cream. Give me the ice cream.

9. Ace

Image courtesy of Ace. (Click image to see the full page.)

Sometimes, a landing page is about more than just getting visitors to understand the tangible features and benefits of your offer. You might want to convey a feeling—make them understand what it’s like to have taken the plunge and experienced transformative results. When it works, it’s powerful.

Ace is a test preparation company that helps aspiring students with their Test of English as a Foreign Language (TOEFL) exam, which can make or break their academic and professional goals. Harnessing that emotional element to drive conversions, Ace’s landing page—built by DMR—evokes a sense of aspiration that encourages prospects to dream big.

Best Mobile Landing Page Takeaways:

• Connect with visitors on an emotional level. Rather than hitting visitors with a screenshot from the test platform or some grinning stock model, Ace uses the hero image and headline on this landing page to speak to the aspirational nature of their service. Education unlocks all kinds of new opportunities, and Ace concisely captures that above the fold.
• Back up big promises with proof. Ace includes a ton of detailed testimonials from students that have found success on the platform, which is vital for a service that pledges life-changing results.
• Maintain visitor attention with eye-catching visuals. The copy on this landing page is broken out into digestible bullets, each paired with colorful, eye-catching icons. That helps Ace keep visitors’ attention without being overwhelming.

10. GoBoat

Image courtesy of GoBoat. (Click image to see the full page.)

Like Ace in the previous example, GoBoat goes light on the description of its boat rental service and instead focuses on the experience of seeing Copenhagen from the water—how it feels. Sure, there’s less pirate imagery than we’d like for a company that says we can “be [our] own captain,” but GoBoat includes a ton of beautiful photographs that have already got me planning a summer trip to Denmark.

Best Mobile Landing Page Takeaways:

• Make sure visitors immediately understand the benefit. GoBoat succeeds in conveying the most essential information above the fold while also making clear the primary benefit: piloting the boat yourself. And while the company chose to exclude the auto-play video from the desktop version of this page, the static hero shot does a great job of capturing the experience that GoBoat is offering.
• Speak to the experience you’re offering. Most people aren’t renting with GoBoat to live out some childhood freebooter fantasy (shame)—they’re doing it to experience the beautiful sights of Copenhagen. The company plays to that with this landing page, giving lots of real estate to shots of the city’s most famous landmarks. Meanwhile, the page is concise in its copy and uses bullets to quickly address standard questions.

from Unbounce https://ift.tt/2UnWxzA