5 Hacks to Optimize Mobile Landing Pages for Conversion

The mobile web is about to kick down your door. Some say mobile users will outnumber PC users on the web in three years. You should be thrilled. Why? Because when you optimize mobile landing pages, you become a better marketer.

You are about to go from a karate student to a Samurai Warrior of Optimization. Mobile landing pages will demand it. You will follow the same principles of optimization, but you will need a mastery of the art, and this blog post will help you.

5 Landing Page Optimization Strategies for Mobile

First, you must understand why people visit your site from smartphone or tablet. One thing you can be sure of: they have a goal. They are not pointlessly browsing. They do that on PCs at work.

Behaviors vary on the mobile web, even within industries and across devices. So track mobile visitors. See where they go. Review the keywords they use.

Ask yourself:

• Are they looking for coupons?
• Downloading PDFs?
• Checking product information?
• Filling out a lead form?
• Buying a product?
• What do they want?

This will point to pages to optimize for mobile visitors. Other ideas to try:

• QR code landing pages – You can put a 2D barcode on product packaging, event flyers, and just about anything else to add a mobile call-to-action. You can create one for free in about five seconds. (Although I think QR Codes will be dead soon. Unless they tie QR recognition to the camera as native.)

• Mobile search landing pages – 95% of smartphone owners use mobile search. Providing free content or coupons is a great way to greet them on a landing page.

You must boil the goal of your page down to its raw essence. If you want to give coupons, then give coupons. Don’t ask for lots of information. If you want to show product reviews, then show product reviews. Don’t distract the visitor. This is a key principle of optimization, and it is even more important on the mobile web.

Once you set the goal, it’s time to create your page. Here are five hacks to keep the conversions rolling in:

Hack #1. Show only offer, value, and action

Brevity is the soul of wit, and you’re about to become the wittiest marketer in town. Every word, image, and element must support the conversion goal. Cut everything else.

Shoot for:

• Headlines – 4 words, max.
• Copy – 2 lines, max.
• Forms – 3 fields, max.
• Calls-to-action – 1 (as usual)

For a great example of simplicity, on the right is a mobile landing page from Audi that we found on Bluetrain Mobile’s blog.

The page needs to convey the offer and value in about 25% of the space you normally have. Set aside time to whittle everything down and become the samurai copywriter you were meant to be (fear not, grasshopper).

Hack #2. Set a vertical eye path

Mobile landing pages need a single-column layout. Smartphone screens are too small to work with anything else (usually). Vertically align the information in the center of the page, starting with the most important bits on the top. What’s most important? Value (always).

Your headline should jump off the top of the page and remind people why they came:

• “Get 30% Off”
• “Download Brilliant.pdf”
• “Locate a Nearby Store”
• “3 Reviews for Awesome Product”

Next, include whatever is necessary to convey the offer, such as “enter your email address to receive weekly deals and discounts.”

If you want to include an image, do so, but keep it small (in terms of file size).

Place the button last, and keep it above the fold, like Coca Cola’s mobile page (shown on the right).

Hack #3. Add click-to-call

Don’t forget: smartphones are phones, and they greatly outnumber tablets (for now). With a simple HTML trick, you can add a button that dials your phone number. Google says clickable numbers increase ad clickthrough rates by 6-8% on average.

Two ideas to try:

• Call-to-action buttons to purchase by phone (particularly helpful if your checkout is not mobilized).

• Buttons to call customer service instead of scrolling through FAQs

Hack #4. Load it faster

Can you picture yourself waiting more than five seconds for a page to load? Me either. And we’re not alone.

In a New York Times article, Harry Shum, a computer scientist at Microsoft, says people will visit a website less often if it loads 250 milliseconds slower than a competitor. That’s a quarter of a second.

With margins this slim, every detail counts. Here are the big no-no’s in mobile design:

• Flash
• Frames
• Pages larger than 20KB
• Over-use of images or other objects

Here’s a free tool from W3C to test your mobile-friendliness.  It will grade your page and tell you how to improve it.

Hack #5. Make it dead-on easy

By now, you should realize that designing a mobile landing page is an exercise in minimalism. That which is not essential must go. What remains should be simple and easy to use on a tablet or smartphone.

• Large fonts – ever have trouble reading small fonts on your laptop screen? Smartphone screens are about 1/5 of that size, so make your fonts large and legible.

• Love whitespace – Clean designs with plenty of whitespace make it easier to focus on the page elements. Cut all distractions, kill clutter, and leave what’s vital.

• Space links – Not everyone is blessed with the elegant fingers of a teenager. Put plenty of space around links and calls-to-action so they’re easy to click, even with sausage fingers.

These five hacks will set your foundation for mobile landing page optimization. Later, you can try geo-targeted page copy and responsive web designs that adjust for different devices. Whatever you do, set a benchmark and test it. Otherwise, how will you know it really worked?