← Back to Blog

Follow These 9 Mobile Landing Page Best Practices to Convert More Leads

  • Conversion Rate Optimization

As of 2019, mobile devices accounted for 63.4 percent of internet traffic, making them the clear majority over desktop users.

Given the trajectory of this graph, that number is likely to increase even more in the coming years.

And there’s a very similar trend when it comes to using mobile for e-commerce shopping.

As of 2019, 44.7 percent of US e-commerce sales came from mobile.

That number, however, is expected to increase to 53.9 percent by 2021, which is the official tipping point.

This means one thing: Creating a seamless experience for mobile e-commerce users has never been more important.

You want to make the digital shopping experience as smooth and painless as possible so customers can easily find what they need, make their way to your checkout and ultimately make a purchase.

One of the more critical aspects of enhancing that experience is following good mobile landing page best practices.

And that’s what I’m going to discuss in detail in this post. I’ll go over the most important strategies to make a great first impression and persuade shoppers to buy your products.

So let’s get right down to it.

Free Downloadable Bonus

Want More Conversion Rate Optimization Strategies?

Get access to our free CRO toolkit and skyrocket your organic traffic, on-page conversion rate and more (includes resources not found in the blog post).

1. Start with Lighting Fast Speed

I’m sure you know about the importance of having a fast loading site. It’s obviously a big part of preventing user frustration. But it’s also a factor Google takes into account in their mobile search rankings.

The speed update,” which rolled out in mid-2018, was specifically geared toward mobile page speed where slow loading pages officially became penalized.

Although it “will only affect pages that deliver the slowest experience to users and will only affect a small percentage of queries,” it’s clear that a fast loading mobile site is of the utmost importance—both for appeasing users, as well as search engines.

Google also identified how the odds of a bounce increase with each additional second it takes a mobile site to load.

Here’s how that breaks down.

I personally find these numbers pretty alarming, and if a page takes any longer than five seconds to load, you’re basically dead in the water.

So this is something you definitely need to stay on top of.

To get an idea of how well your mobile landing page is currently performing, I suggest using a tool like Uptrends free mobile website speed test.

Just plugin in your URL, and you’ll receive a ton of information on your mobile site performance.

You’ll also get specific suggestions for performance improvement.

Just click “Show how to fix” for instructions on how to fix issues.

Improving the page speed of your mobile landing page is a prerequisite for everything else.

So I recommend tackling that first.

2. Use Short, Clean Copy

Needless to say, the screen size of a smartphone is much smaller than a desktop.

So it’s easy for the copy to feel cluttered and jumbled up when there’s less real estate.

The solution?

Be super lean with your copy and make it look crisp and clean.

Here’s a good example from men and women’s fashion company, Express.

They use very minimal black copy on a white background. But more importantly, it’s very concise so you can quickly find what you’re looking for without having to think too much.

For example, the “Shop Now,” “Find a Store” and “See Her Style” links help quickly direct shoppers to where they need to go.

And if you scroll down a bit more, you can find links to different clothing categories like tops, shorts, dress pants, shirts, and more.

It’s all about keeping it brief without sacrificing clarity.

3. Ensure Text and Other Vital Elements Are Adequately Sized

The last thing you want is for shoppers to squint to read important text or other key elements like a call-to-action and navigational links.

That’s going to upset the flow and create unnecessary friction.

A common reason for small text is when sites use responsive themes on platforms like WordPress where the same text from the desktop page is used but is just shrunken.

While it’s a heck of a lot more convenient than building a separate mobile landing page, it can cost you in the long run if the UX is adversely affected.

Mobile landing page best practices dictate that you ensure all text and other vital elements are large enough for shoppers to see and tap without any drama.

Italian eyewear designer, Zanzan, does this well on their landing page where they feature women’s and men’s glasses. I love the simplicity of it.

Here you see a clearly labeled section for women’s glasses where a single tap on the image brings you to that section.

And it’s the same thing with the men’s section just below that.

There’s very little effort involved, and you can quickly find the specific type of glasses you’re looking for with extremely intuitive navigation.

4. Trim Back on Visuals

Beautiful images are an integral part of wowing e-commerce shoppers and grabbing their attention.

So I definitely recommend using them on a mobile landing page.

But at the same time, it’s important to be smart about it and not overload the design with excessive visuals.

Why?

Two reasons.

First, images take data. While this isn’t a problem for shoppers who are browsing your site on a Wi-Fi connection, it certainly can be for those who are using their cellular data.

Second, like excessive copy, using too many images can make your landing page feel cluttered and overwhelm shoppers with visual stimuli.

In turn, this can create confusion when they’re trying to browse your store, which diminishes the overall UX.

One brand I think finds the perfect balance of images is Victoire Boutique—a Canadian vintage-chic clothing company.

Here’s what you see after first arriving on their landing page.

It’s got a nice fresh feel with the floral design on the right creating just a bit of eye candy. But it’s by no means overwhelming.

Scroll down a bit, and you find images of some of their featured products including pants, a blazer, and a jumper.

The images are presented nicely and give you a good idea of the specific types of products they offer. But they do it without saturating the landing page with too many visuals.

5. Avoid Videos Altogether

People have different opinions as to whether or not it’s a good idea to feature videos on a mobile landing page.

I personally suggest staying away from it for the simple fact that they’re too demanding on mobile connections and data.

Besides that, a video can be distracting if a visitor has to click to play it.

And if you set it to autoplay, many visitors will find it annoying.

Just imagine if they’re sitting at their desk at work and get blasted with a video hyping up your products. It can be a definite deal breaker and take a toll on conversions.

While I’m usually all for a brief explainer on a desktop site where there’s more screen real estate, it’s something I feel should be avoided on mobile because of the diminished UX.

But here’s the deal.

You can still get your message across and let shoppers know exactly what you’re selling without using a video.

Pura Vida Bracelets—an e-commerce brand selling artisan bracelets and jewelry—manages to do this quite well on their landing page by including links to different product categories at the very top.

One quick glance, and shoppers can be directed to wherever they need to go.

6. Use Plenty of Contrast and Negative Space

One of the most essential components of great mobile design is contrast.

A clear contrast between text or images and the background makes your page “pop” for users and makes the design more eye-catching.

But there’s another purpose, and that’s making it easier for shoppers to view your page if they happen to be outdoors.

If you’ve ever tried to browse through your phone in natural outdoor light—especially with the sun glaring—you know how tricky it can be.

Using high contrast makes it much easier on the eyes and generally creates a nice looking aesthetic.

On top of that, using adequate negative space (space around text and images) can improve your design for mobile users by letting it “breathe.”

One brand that pulls this off really well is The Horse—an Australian company selling leather goods and watches.

Just look at the beautiful contrast they create here with the images and copy for their black and red crossbody bags on a white background.

And the ample spacing between the text makes it super easy to read on a smartphone.

7. Use Mobile-Specific Popups

Popups are ugly, intrusive and above all, worse of all, hurt the user experience…

…But NOT if you follow best practices (and ignore what everyone else is doing).

In truth, mobile-friendly popups CAN convert users into leads IF they’re shown to the right user at the right time.

Take exit-intent, for instance.

You want to capitalize on your mobile traffic. But you also want to give users a good website experience and meet Google’s interstitials guidelines.

One compromise is to offer free shipping to users that exceed a certain basket value. Doing so give shoppers the nudge they need to complete their order, but hides from those who aren’t ready to buy.

Here’s an example using Sleeknote’s SiteData condition:

Mobile traffic is a goldmine waiting to be tapped. Don’t leave it to chance.

8. Reduce Taps

Say that a shopper is searching for a particular type of product. Their goal is to narrow the selection down as quickly as possible to find exactly what they’re looking for.

Mobile landing page best practices mandate that you help facilitate that process and allow them to seamlessly narrow their search.

In other words, you want to reduce the number of taps they have to make.

This is something else Zanzan does well with their mobile page.

Once arriving on the men’s sunglasses section, I can quickly filter the product selection by type, color, frame style, etc.

Here’s the list of their filters.

After tapping on “Frame Style,” I can instantly choose between rectangular, round, rectangle and wayfarer.

It’s all very smooth and seamless.

9. Use Mobile-Optimized Forms

You probably already know most people aren’t too keen on filling out long-winded forms on desktop.

But that disdain runs even deeper on mobile devices.

It can be a serious hassle where an alarming percentage of visitors end up leaving before a form is ever filled out.

So you need to take measures to streamline the process for mobile users.

One way is to simply include the fewest amount of fields possible.

Here’s an example of an ultra-simple contact section from Soul Chocolate—a Canadian-based, small-batch chocolate company.

You literally just tap on their email address “hello@soulroasters.com,” and it will open your email where you can send them a message.

On the other end of the spectrum, here’s an example of a contact form that’s a bit more involved.

While filling out this form could be done fairly quickly on a desktop with a keyboard, it’s going to be a struggle on mobile, which could cause some friction with some users.

So this is a good lesson in keeping it as simple as possible.

Or if you need to get a lot of information, set it up so mobile users can conveniently tap their way through a form rather than typing in the information manually.

That’s something that men’s grooming company Beardbrand does well on their mobile page.

They have a quiz called “What’s the Best Beard Style for You” where visitors determine what type of beard would be best for them based on their style preferences and lifestyle.

And it’s super simple to fill out.

You just tap on the option that best fits what you’re going for, and you’re quickly moved to the next question.

No sweat.

Free Downloadable Bonus

Want More Conversion Rate Optimization Strategies?

Get access to our free CRO toolkit and skyrocket your organic traffic, on-page conversion rate and more (includes resources not found in the blog post).

Conclusion

Mobile users already account for the majority of internet traffic.

And it won’t be long before they make up the majority of e-commerce shoppers as well.

So it’s a no brainer that you should be following mobile landing page best practices.

The ones I mentioned here are especially important and should ensure you cover all of the bases.

That way you can make the most out of your mobile traffic, lower your bounce rate, increase the time spent on site and boost conversions.

Which mobile landing page design mistakes do you find most frustrating?

Like what you read? Leave a comment