January 22nd, 2013

Mobile Landing Pages: A Step-by-Step Guide on What Works and What Doesn’t Work

Mobile Landing Pages

A landing page can be the marketing equivalent of a home run.  Most of the time, you hit singles and doubles, or even triples, but you always want to swing for the fences as part of your batting strategy.  Mobile is changing the game, the rules and techniques are different, and in this blog post we’ll help you to adjust your swing.

Mobile landing pages – versus “regular” (or desktop) landing pages – are different in that they are optimized for a mobile user experience, but their fundamental purpose is the same. The goal is to have a landing page that converts.

These mobile pages for SmartBear were designed to incorporate some of the techniques outlined in this article.

These mobile pages for SmartBear were designed to incorporate some of the techniques outlined in this article.

In order to do this, it is essential to maintain alignment between the keywords and messages you’re using to target visitors, the calls to action you’re displaying on the landing page, and the page content.  This may seem like it’s advice for the little leagues, but you’d be surprised how many landing pages don’t match the ad copy leading to the page.  If you can’t get past this step, stop reading now!

Adding to this formula for success, mobile comes into play simply by ensuring that this alignment isn’t sabotaged by a poor user experience.

If a visitor to a landing page is arriving via their smartphone rather than their PC, having them automatically directed to a mobile-optimized version of that page is a necessity. Otherwise, they are left to experience your desktop landing pages with their much-smaller screen and will undoubtedly run into difficulties trying to act on your calls to action, completing your forms, and perhaps even loading the page at a speed they’re satisfied with. Unless your landing page loads fast, your target user may abandon the request.

So, if you’re thinking of launching a campaign that utilizes landing pages, it’s essential to think not only about the traditional desktop audience, but also about the experience of a mobile user viewing your content. What’s her context? What are her needs? How are her needs different than a desktop user’s? Is she able to make a call? Is she being asked to fill out a long form with her thumbs? Where is she, and what is she doing when she lands on the page?

Next Steps: How do I get started with mobile landing pages?

Now that we’ve identified the need for mobile-optimized landing pages, I’d like to share some best practice techniques on how to make them most effective.

1. Make Your Mobile Landing Page Eye-Catching Mobile Landing Page Tips

The purpose of a landing page is to capture the attention of your audience and convince them to take some action. So, your first priority is to make your mobile landing page eye-catching.

Visuals are the best way to tell a story, and when it comes to landers, you want to use a visual image that will convey your value proposition or brand and create an emotional connection within the visitor’s mind. You have 2-3 seconds to build this connection and speak to her aspirations in terms of her needs or desires. You know you’ve succeeded at motivating her at an emotional level when she clicks to call, or fills in a form, or performs some other desired action.

Because incorporating images is so important for mobile landing pages, make sure to build these pages on a platform or mobile CMS that utilizes responsive techniques. This will ensure that the images will render nicely on a wide range of devices such as running IOS and Android.

2. Make Your Mobile Landing Page Load Fast

Using a platform that is highly optimized for quick load times is just as important as including compelling images. If you’re not careful, however, using a large number of high-resolution images can lead to unreasonably long load times.

If you do one thing right, make sure your mobile landing pages load fast (no longer than 5 seconds over a 3G network).

One way of ensuring a quick load time is adjusting the size of your images. Don’t just take an image directly off of your desktop homepage and make it fit into a mobile screen. The image you use might be 1.2 MB, but it really doesn’t need to be more than 320 KB. For more useful tips on the design of your mobile landing page, feel free to check out Bluetrain Mobile’s blog post: “Effective Mobile Landing Page Design.”

3. Provide a Clear Call-to-Action

You want to deepen the engagement with your users and convert qualified leads, correct? You have to get them involved. While you may ultimately want the relationship to lead to a purchase or conversion, a landing page doesn’t have to be a sale. Calls to action on your landing page can vary in degrees of engagement, for example: signing up with a form, watching a video (aim for a video less than 3 minutes), finding a nearby location, connecting via social media, hitting a click-to-call button, downloading an app, adding an event to their calendars, or taking a poll.

These calls to action are what will help build a connection between the audience and your brand. The following is a list of typical mobile landing page calls to action:

  • Watch Video (e.g. YouTube)
  • Search
  • Map It
  • Like Us (on Facebook)
  • Call Now
  • Download (app)
  • Share This
  • SMS
  • Add Event to My Calendar
  • Vote

Once the user has completed an action, always ask yourself the question “and then what?” What should they do next? You’re essentially paving the road for the customer on a landing page, so it’s important to make sure it doesn’t dead end once they complete an action. Provide them links to new resources, content, or other means of interaction – never let the engagement end with a simple “thank you.”

4. Consider Your Mobile Fonts and Buttons

Standard text size (i.e. 12pt font) isn’t going to be legible on a mobile device, so be sure to adjust font size for your mobile landing pages. Even though you’re dealing with less space, the font size needs to be bigger. Therefore, you may need less content on mobile to accommodate for this increase in text size and the decrease in screen size.

A typical mobile site will contain 70-100 words, whereas a desktop site may have 250-400. As a general rule of thumb, a landing page needs to use the least amount of text required to deliver your message.  If you can do it in 20-30 words, even better.

When designing a mobile landing page, it’s also important to understand the default functionality of the devices that you’re targeting. This comes into play when considering call-to-action button sizes as well as font sizes. We recommend button sizes no smaller than 40 pixels high to ensure that the user’s pointing device (their finger) can easily touch the buttons.

While this may seem like a lot of information to absorb, don’t expect to tackle everything all at once and achieve record conversion rates on your first campaign. The most successful marketers treat landing pages as an iterative learning process, taking it step-by-step, running a/b tests, and iterating calls-to-action, mobile copy, layout, and content.

A Few Final Words About Mobile Landing Pages. I hope you found this coaching useful. Good luck adjusting your game.  If you’d like to learn more, feel free to download Bluetrain Mobile’s complimentary guide: “The Complete Guide to Building Mobile Landing Pages” for an in-depth look at how to design, build and optimize your mobile landing pages, including how to set attainable goals and measure performance.

Steffan_Berelowitz_Photo_Small About the Author: Steffan Berelowitz is the CEO of Bluetrain Mobile, one of the nation’s leading mobile website development firms.