Mobile Landing Page Optimization - 10 Best Practices for Success
Landing pages can be used for PPC ads, mobile app downloads, promotional campaigns and more. Optimization tactics are intended to boost conversion, improve PPC quality scores, and provide a better user experience.
Yet with so many companies "not ready to do mobile," the mobile landing page experience has virtually been ignored. With mobile web use dramatically on the rise, marketers can no longer ignore the impact.
How much of your web traffic is mobile -- 20%? 40%? Do you even know??
A Case for the Mobile Landing Page...
When it comes to landing page optimization, a simple A/B test may yield a 20-30% increase in conversion. Although this is positive, such small incremental improvements don't make much sense if a significant number of mobile visits are being ignored.
For example, let's say 1,000 users visit your landing page, and 2% (20) of them convert. You do an A/B test, which improves conversion by 25% (5) users. Meanwhile, the mobile 15% (150) of your traffic visitors are virtually ignored and presented with a far-less-than-optimal experience. It's logical to recognize that focusing on the 150 users makes more sense than the 5 new conversions, especially since mobile users are more likely to convert.
"88% of mobile searchers take action within 24 hours.
About 70% take action within 1 hour."
~ Google Mobile Movement Study, 2011
10 Ways to Make Your Landing Page Mobile-Friendly
It's time to adapt your strategy. Instead of just designing a traditional landing page, plan to uniquely consider landing page content and layout for various devices and screens of all sizes – desktops, tablets, smartphones and beyond. Here are some tips to assist with planning.
Ensure your content is available and visible for mobile devices. Flash, frames and numerous plug-ins are not accessible for mobile. Update your site using mobile-friendly alternatives like HTML5, jQuery, or simply newer versions of your existing plug-ins.
Valid markup (proper coding syntax and structure) is just as critical to ensure the web browser can properly render the content. Always audit your code and perform quality assurance (QA) testing before launching publicly to ensure the markup is valid. The W3C QA tools include validators for HTML, links, CSS, XML feeds, and more.
"40% turn to a competitor’s site after a bad mobile experience."
~ Compuware, "What Users Want from Mobile," 2011
Your mobile pages should be lightweight (less than 20 KB total) and minimally load in under 5 seconds.
Consolidate or eliminate scripts, resize and save mobile-optimized images, leverage CSS image sprites to enable caching one image versus many, use CSS whenever possible in place of images, and apply additional mobile web performance optimization tips to your code and content as needed.
"43% of mobile users are UNLIKELY TO RETURN to a slow-loading mobile site.
74% wait up to 5 seconds; 60% wait 3 seconds or less."
~ Compuware, "What Users Want from Mobile," 2011
If you can't fix load times, there's negligible point in bothering with other factors on this list. Poor load time is the most prevalent mobile optimization issue that I've seen. It's also one of the easiest to resolve.
Two keys are critical for overcoming the "load time" obstacle:
- Get management to fully support and prioritize performance optimization.
- Equip developers with the right knowledge and tools.
W3C Mobile OK, mobiReady, or Google's Mobile-Friendly Test can be used to determine the load time and size of your landing pages. WebPageTest.org uniquely provides "first view load time" -- a critical optimization metric since mobile devices have negligible caching ability and quality first impressions drive long-term business.
For smartphones, present a single-column layout with the priority content at the top. Mobile users are goal-oriented versus the more benefit-oriented desktop users, so always feature a task completion call to action "above-the-fold" for smartphones. (e.g., click-to-call, find a store)
If your call to action (CTA) is potentially lower on the screen, leverage directional cues or jump-to links ("scroll down for offer" ) to retain engagement.
Depending upon the verbosity of your traditional landing page, there's a good chance you'll need to cut copy in half for mobile optimization.
Screen size varies, so reduction of traditional content quantity might be about 65% for tablets and 35% for smartphones.
In other words, trim six-word headings to three or four, and trim five bullets to two or three.
Tip: Plan landing page content mobile-first to avoid the need for variations across screen sizes or the tedious exercise of trying to scale down "approved" content.
Mobile headings are ideally only 3-4 words.
It's still important to sell the content. Leverage creative copywriting and consider visualizing benefits as icons to replace or reduce the copy. Every single word and visual should add value or get cut.
Users should be able to read the page without zooming. Use a benchmark minimum font-size of 16 pixels, the 100% default for browsers.
Google recommends an arm's length as a legibility guide for mobile.
A simple color palette, strong contrast between text and backgrounds, and adequate negative space between elements also play a large part in legibility.
The top mobile user action for both SEO and PPC web traffic is making a phone call, so ensure your full phone number is visible at the top of the page.
"61% of mobile users call after a local business search."
~ Google Mobile Movement Study, 2011
Users should be able to tap/click the phone number to initiate a call, so enable click-to-call functionality by making the number a hyperlink with the tel: protocol. (See RFC 3966 for tel URI specifications.)
Example hyperlink value: "tel:+16515551212"
< a href="tel:+16515551212" class="clicktocall">Call Now! (651) 555-1212 < /a>
Don't simply let mobile devices make your phone number a link. On a mobile device, a phone call likely IS the call-to-action, so optimize call conversion by presenting your phone number as an obvious, specific, value-added button.
Click-to-Call (CTC) Tips:
- Always include the international prefix (a leading "+" character followed by the country code) to ensure it works for users outside their home country.
- Include a phone icon for quick visual association.
- Include a call-to-action in the link text. (e.g., Call Now, Contact Support, Tap to Call, etc.)
- Keep the phone # in the link text for transparency and easy verbal sharing.
- Display office hours proximate to the phone number. (It's frustrating to make a call only to find out a place is closed.)
- Include useful and/or enticing context. (e.g., guarantee, promotion, testimony, etc.)
- Style the link as a button in a complementary color so it stands out. (Use CSS3 buttons that don't require images for lightweight responsive design)
All of these CTC tips are good factors to consider for A/B testing!
Small, compact content is challenging to click for mobile. Don't give users a fat-finger weight complex! All actionable targets should be easily clickable without zooming.
Design your clickable targets (links, buttons, icons, form fields, etc.) to be touch-friendly -- fully and easily operable by fingers and thumbs.
Minimum target area suggestions:
Microsoft: 38x38 pixels (0.25")
Apple: 44x44 pixels (0.30")
Note: Pixel resolution varies across handsets, so buffer and test accordingly.
- Use margin (negative space) around clickable areas to avoid a mis-click
- Add padding to links to "fatten" them up (e.g., 0.85em or 85% for text)
- Pad fields and check boxes and use form labels to make selection easier
- Ensure clickable images (e.g., social icons) are sized near the minimum target area
A mobile user's geolocation can typically be determined within 5 to 20 miles based on their IP address without the user explicitly disclosing their location. Based on an IP address (a.k.a. geoIP), several details of a web user's location can be calculated – country, region (state/province), ZIP code, metro area (e.g., Twin Cities), city, latitude, longitude, area code, weather station, and more. Yup. This is a gold mine for personalizing content to convert!
The MaxMind GeoIP City Database accuracy in the US is 99.8% for country, 90% for state, and 81% for city within a 50-kilometer radius. IP geolocation is more accurate for broadband IP addresses and less accurate for cellular networks. Although not perfect, this data is awesome for dynamic suggestions and defaulting contact fields.
Soda or Pop? Boost landing page conversion by using geoIP data for locally relevant content.
- Personalize headings with city or metro area names.
- List a nearby representatives or locations. (e.g., "Stores near Minneapolis")
- Regionalize "voice" to use local terms or slang. (e.g., y'all, coke/soda/pop)
- Re-center and zoom maps to the user's location.
- Pre-populate location fields on web forms.
(Tip: Default ZIP code from geoIP, and then compute HIDDEN city, state, and country field values from the ZIP.)
Mobile landing page forms should be extremely short. Target four or less fields (1-2 is ideal) -- anticipating each additional field to potentially reduce conversion by 50%. Don't include non-required fields unless it's being collected post-conversion.
Only show fields imperative for urgent data collection, and evaluate options to otherwise capture or compute data at a later time. The key is to get users to submit the minimum lead data (like name and email) necessary for you to respond.
If you must have several fields, consider a two-step form process (see pictured example) since it appears like fewer steps to a mobile user. It also comes in handy for segmenting content specific to step-one selections. (Note: In my experience testing, a stepped process for simple offers more often hurt conversion for desktop experiences. Test this carefully, especially if leveraging responsive design.)
HTML5 Input Types
To aid usability, leverage HTML5 input types – number, telephone, URL, and email – for their unique data input keyboards. These render as basic input text for older systems. Scan the provided QR code or visit http://j.mp/html5inputtypes to view HTML5 input types in action.
The purpose of the page should be obvious, compelling and readily visible as an action.
To optimize landing page conversion, limit the number of "actions" to three or less for mobile. An action constitutes any task the user could do on the page -- a link, a like, a share, a video view, a form submission, a menu expand, or any other tap/click/swipe gesture.
POP QUIZ: How many "actions" are visible on the pictured Comcast landing page?
Regardless of a total action count, the landing page should only have one primary purpose. Copywriting and imagery should all support completion of the one goal. If practical, postpone display of other actions until the primary action has been completed.
"One page. One purpose."
~ Oli Gardner, Unbounce (Landing Page Rehab)
Mobile Call-to-Action Examples:
Tip: Don't auto-play videos. Historically, a user must click/tap to play a video in order for the "view" to be counted in YouTube.
Mobile Landing Page Optimization Recap
Beyond traditional landing page optimization fundamentals, mobile tactics should focus on simple usability (reading/clicking), fast performance, minimal yet compelling action, and mobile-specific features (geoIP/click-to-call/etc.). Many enhancements applied for mobile will conveniently improve your traditional landing pages as well.
For mobile-specific rendering, leverage mobile detection scripts and responsive web design media queries. (Pass that techy stuff on to your web developer!) Like always, leverage A/B testing, user feedback, and eye tracking tests to determined what works best for your users.
Did you learn any cool new tricks from this post? Share the knowledge! If you have any feedback or questions, please post them in the comments below.
This post was adapted from an article that I originally published on Search Engine Watch.