It’s a dark and stormy night. As you hurry down the sidewalk, you notice a billboard advertising a glow-in-the-dark raincoat. You duck into a doorway, whip out your smart phone and enter the web address.
Nothing happens. The website won’t load. Dejected, you return to the downpour as yet another victim of non-optimized mobile landing pages.
Today we take a look at the top five mobile landing page blunders your business should avoid at all costs, or leave your customers out in the rain.
Mistake #1: One size fits all landing pages
We’ve all been there: a wrong click on the labyrinthine Internet takes you to a landing page with font so small your eyes cross. Or, you see a layout that scrolls through endless single-column photos and text, until you forget why you landed there in the first place.
The keyword in mobile landing page is “mobile.” You’re trying to attract people who are on the go. Your page needs to function on a small screen and for a short attention span. No one wants to “pinch and zoom” to read your content, nor do they need to see every photo and product testimonial featured on your desktop landing page.
When it comes to designing mobile landing pages, you have two options:
- Responsive design
- Adaptive design
A responsive landing page will automatically resize itself to fit the screen. This is a good option for moving seamlessly between desktop, laptop, and tablet screens.
Smart phone screens can be trickier, given their small size and narrower profile.
Mobile landing pages can be super-optimized with adaptive design. Rather than resizing the content, adaptive landing pages deliver only the most critical elements. Adaptive mobile landing pages are designed specifically for mobile device delivery.
Take a look at the official government site for the state of Alaska on a mobile device:
To be fair, this is a website homepage, not a landing page, but it illustrates how a non-responsive design creates a poor mobile-user experience, with nearly unreadable font size and excessive text. The only way to consume any of the content is to constantly pinch-and-zoom while scrolling around.
By comparison, here’s California’s site on a mobile device:
California’s site is a great example of an adaptive design that strips out much of the content found on their desktop version. While still busy for a small screen, the page is organized for mobile users with simple icons placed at the top and easy to read links.
The advantage of responsive design is simplicity. You design the page and let the programming deal with the user interface. Adaptive mobile landing pages will likely increase conversion rates, making the extra effort well worth it for visitors.
Mistake #2: Slow-loading heavy imagery
Slow and low is not the tempo for your mobile landing page. A spectacular image won’t persuade a conversion if it won’t load in the first place. Images require more data transfer than other web content, so optimizing them is critical to improved load speed.
Tips for quick-loading pictures on a mobile landing page
- Consider eliminating images altogether.
- Unless your picture explains your product story better than text can, ditch it in favor of faster load time.
- Avoid “heavy” images.
- You don’t need large, print-quality files on a mobile landing page.
- Fewer pixels equates to a faster load time.
- Use the right type of images.
- Vector images (.eps) are best for responsive design. Vectors are best for logos, drawings, icons, and other non-photo imagery.
- Raster images (.gif, .jpg, .png) are less auto-responsive, but deliver better results for photographic images.
For more information on image optimization, check out this Google Developers Guide.
How much time is too much time?
Because load time is so important to a quality user experience, most search engines factor it into their ranking process. An SEOChat.com study compared page load times for 36 website URLs that ranked in the top position for their targeted keywords.
The top sites average 9.82 - 13.84 second load times. If your mobile landing page loads slower than that, you are throwing away conversion opportunities. It’s as simple as that.
Here’s an example with minimal imagery from Wells Fargo, shown on mobile:
Instead of a feature photo, Wells Fargo is able to connect with visitors through their iconic (and fast-loading file type) logo image, while providing shortcuts for users to access their account or get general information.
Mistake #3: Below the fold call-to-action
The goal of a mobile landing page is to drive conversions. The call-to-action is your money maker. CTA buttons need to be visible and mobile-user-friendly.
- Place your CTA above the fold, or close to it. The longer a user scrolls to find it, the less likely they are to click it.
- Design your CTA button for easy finger tapping, as opposed to mouse or keyboard clicks.
- Keep CTA form fields to a minimum. Thumb typing gets old fast and visitors may back-out if faced with too many form fields to complete.
- If applicable to your business, make your CTA a clickable phone number or a phone icon – encouraging your visitors to use it when necessary.
Here are some samples of mobile landing pages offering click-to-call options (slide 15):
If your CTA isn’t a click-to-call, make sure you capture the visitor’s phone number and call them as soon as possible. Harvard Business Review research found that businesses following up on an online lead within the hour were nearly seven times more likely to engage the lead than those who waited two hours, and 60 times more likely than those waiting 24 hours or longer.
For more tips on driving phone conversions, especially for pay-per-click visitors, read this article.
Mistake #4: Being too wordy
All landing pages should keep content to a minimum so they don’t distract visitors from the CTA.
Search Engine Land illustrates the difference between good copy and bad:
- "Always make a point of deleting words and/or phrases that don’t add meaning to the marketing messages you’re trying to convey. (long-winded example)"
- "Delete words that don’t add meaning to your marketing messages. (concise example)"
Mobile landing pages have no room for verbosity. Make every word count towards your conversion effort.
Mistake #5: File downloads
Business2Community.com cautions mobile landing pages to think carefully before including a downloadable resource. Downloading large .pdf files can jam up mobile devices and bring the interaction to a screeching halt.
Instead, when it comes to file downloads:
- Incorporate useful content such as menu items into another web page, rather than a slow-loading .pdf document or multimedia file
- Mobile-appropriate downloads include applications on the App Store or the Google Play Market
If you absolutely must have a file download, one recommended practice is to send users the file to their email. This way when they have access to a desktop or tablet, they can view the content much easier on a larger screen and not have to squint their eyes at their phone.
Still not convinced?
According to one data report, traffic from mobile devices is now nearly 50 percent of overall online U.S. retail traffic.
Yet despite this, desktop spending continues to exceed mobile spending. As the chart below shows, the average amount spent by a Mac user is almost $40 more than an iPhone user, and the difference between a Windows desktop and a Windows smart phone user is $60:
Why are mobile sales lagging? Five reasons:
- Unresponsive design
- Slow loading images
- Unclear and hard to find calls-to-action
- Too wordy
- File downloads
Mobile devices are the key to reaching your potential leads. Avoid the mistakes outlined in this post and make your mobile landing page a tool for converting visitors into leads, and those leads into customers. Give them the glow-in-the-dark raincoat they need on those dark and stormy nights. They’ll thank you in more ways than one.
Get started creating your first mobile-optimized landing page with Instapage and let us know of any other mobile landing page mistakes you’ve encountered in the comments below.