How to Build the Perfect Mobile Landing Page
If desktop landing pages are the equivalent of a job interview, mobile landing pages are like elevator pitches on steroids – you have mere seconds for your page to load, grab your users’ attention and persuade them to act. Building the perfect mobile landing page is no easy task, and unless you have a strong mobile strategy in place before you start, you could be missing out on invaluable opportunities for greater conversions.
Ignore Mobile Landing Pages at Your Peril
You already know that you can’t ignore mobile, but in case you need a few choice statistics to drop on the naysayers at your next meeting, these should spur them into action:
• According to the Monetate Ecommerce Quarterly EQ4 2013 report, one in every three visits to leading ecommerce websites came from either a tablet or smartphone last year – growth of 50% over 2012’s figures.
Image credit: Monetate
• During last year’s holiday shopping period, conversion rates on smartphones increased by 26.7% year-over-year from 2012, with tablets experiencing year-over-year conversion rate growth of 17.75%.
• Data from Google suggests that smartphones are the most common starting place for online activities, with 65% of users beginning an informational search or online shopping task on their phone.
Image credit: Google
So, now that we’re all on the same page (BOOM) about mobile, let’s talk about what you can do to leverage the power of mobile and maximize conversions. How can you do that? By building the perfect mobile landing page.
Designing Mobile Landing Pages
Just because your desktop landing pages can be viewed on a mobile device doesn’t mean you shouldn’t design specialized pages solely for mobile. Serving desktop versions of your landing pages on mobile devices is a big mistake, as people interact with sites very differently on mobile devices than they do on their laptop or desktop. Below are some mobile landing page best practices to keep in mind.
Headlines for Mobile Landing Pages
Headlines should be short – brutally short (forget about those irresistible Upworthy-style clickbait headlines). Four words or less is ideal. Once you think you’re done writing your landing page copy, go back and edit it down. Then do it again. Cut out every single word that doesn’t need to be there – yes, even those sexy new product descriptions. You could take this one step further by asking if you even need copy on your mobile landing page. (Some businesses are having success with landing pages that primarily image-driven.)
Mobile Landing Page Organization
Make sure that everything your customers need to perform an action can be seen instantly on the page. Think about your mobile landing pages from your customers’ perspective. Would you spend several minutes pinching or scrolling around a screen to learn more about a product? Neither will your customers.
When building a landing page, resist the urge to fill every pixel of white space on your pages with imagery, text or other distractions. Take the mobile landing page examples above, for instance. Yes, the calls to action are instantly visible, but there’s so much going on with the rest of the page that the entire experience could turn off potential customers – plus, these examples are needlessly image-heavy, which will likely result in longer load times. If you choose to use mobile landing pages templates to help you during the design phase, bear this in mind. When designing mobile landing pages, think minimal. Remember – white space is your friend.
Mobile Landing Page CTAs
Calls to action must be strong, clear and immediate. Ideally, your call to action should be one of the first page elements a user sees. However, just because it’s visible doesn’t necessarily mean it’s optimal. If your mobile landing page’s primary purpose is lead generation, for example, you won’t want to ask prospective customers to complete a lengthy web form. Keep forms as short as possible – think one field for their name and another for an email address.
Clickable Phone Numbers
If you want customers to call you, include a phone icon or make your company’s phone number a clickable element. If you want them to come to your store (a crucial component of local search), add a link to a Google Map of your business so visitors can use the GPS functionality of their phone to get directions.
If you’ve ever misclicked on a button, and then had to wait 10 seconds for the wrong page to load, you know how frustrating this can be. To avoid missing out on potential conversions, ensure that clickable elements on your mobile landing page have sufficient padding around them.
On Mobile, Time is of the Essence
When it comes to mobile landing pages, speed is everything. The longer your customers have to wait for a page to load, the more likely they are to give up and go elsewhere. Every second counts.
Don’t use technologies like Flash and other plugins that can take forever to load or may be incompatible with your customers’ devices. Instead, ensure that images are in .jpg format whenever possible, and avoid PNG-24 images at all costs. You may also want to consider coding the page using technologies like HTML5 and jQuery to improve page load times.
Optimize your mobile landing pages to keep the number of HTTP requests to a minimum (by eliminating unnecessary scripts, for example), and use CSS image sprites wherever possible to further reduce the time it takes for your page to load. Although the ideal page size varies depending on content, aim to keep your mobile landing pages around 20 kilobytes.
Bear in mind that not all of your visitors will be accessing your page using the same kind of connection. Some will be using Wi-Fi, others might have 4G LTE access, and some may be on 3G connections. A mobile landing page that loads in less than five seconds on a strong 4G LTE connection may not load as quickly on a 3G connection. If you optimize your mobile landing pages to load quickly on terrible connections, they’ll be even faster on high-speed connections.
A/B Test Your Mobile Landing Pages
You already know that A/B testing landing pages is always a good idea, and it can be even more useful when evaluating the impact of mobile landing pages.
Image credit: Google
Which of the mobile landing pages above do you think would result in the highest conversions? It’s definitely not going to be the second example, which features far too much text and no clear call to action. The first page is better, but could still benefit from less copy. The third and fourth pages are ideal, as they both feature several clear calls to action, and an added incentive for visitors – either 10% or $5 off their order. Now would probably be a good time to order a bouquet of flowers as a peace offering for accidentally deleting the season finale of “The Bachelorette” from your significant other’s DVR, right?
Use A/B testing extensively when creating mobile landing pages. Start with major variations before refining your changes at increasingly granular levels. Don’t limit yourself to just A/B testing mobile landing page layouts – experiment with the phrasing of your calls to action and customer incentives, too. Try to write copy in the voice of the customer. Even small changes can have a big impact on conversion rates.
What other tips do you have for building the best mobile landing pages? Let us know in the comments!