Mobile users have very different goals than website users. Screen size, device type and context dramatically change what users want from your site.
This is why the best practices that apply to desktop landing pages rarely apply to mobiles.
If you want to create delightful, function and conversion-oriented mobile landing pages, here are six best practices you need to follow:
As the first step when creating a mobile website, focus on what not to include instead of what to include.
The logo and short headlines are fine, but a form that has more than three fields is probably not a good idea.
It is important to make sure the user takes the least number of steps from the entry point to making a purchase. Eliminate all non-essential content for maximum conversion.
For example, the 1-800-Flowers mobile landing page eschews the navigation menu for an easy-to-tap set of buttons. The landing page also includes conversion-focused information - a coupon code - right at the top of the page:
Mobile users are always on the move. They don’t have time for your wall of text. Expect landing pages to be scanned, not read, so you must get to the point as soon as possible.
Cut down on the copy as much as you can, and create memorable and catchy phrases that your audience can tweet out if they want to.
One way to do this on content-heavy sites is to show the content only after a user clicks a “Read More” button.
For example, on TIME magazine’s mobile site, you can “tap to read the full story:”
One major mistake businesses often make when creating mobile landing pages is using the same-sized fonts as their desktop counterparts.
Your mobile users should never have to zoom in to read the text on your landing page. Size 12px font might be perfectly legible on desktops, but on mobiles, you’ll want something that’s at least 18px or beyond.
Google recommends a base size of 16 CSS pixels. Adjust your H1 and H2 relative to this. More on this can be found here.On the NYTimes subscription landing page, the font size is large enough that you can read it comfortably from a distance:
Also note how different-sized fonts are used to create a visual hierarchy. The most important information - the headline and plan type - has the largest font-size, while less critical information uses a smaller font.
Larger isn’t always better. For elements that don’t require as much attention on mobiles, use smaller fonts.
Going back to the NYT subscriber landing page, the terms and conditions aren’t particularly crucial for converting customers. Hence, this section has a much smaller font-size compared to the rest of the page:
Images are now the heart and soul of internet marketing. People love visual content. Whether it be images, videos, infographics, or gifs.
While it is a good idea to use images in your landing page, there are some best practices to follow:
White space makes your site easier to read and improves the user-experience.
This is easy enough to do on desktops since there is so much screen space to go around. On mobiles, however, effective use of white space can be a challenge.
For a great example of how white space can be used to craft better user experiences, take a look at BBC’s mobile site:
White space is equally useful on landing pages. On the Economist landing page, for instance, white space serves to divide individual elements, improve readability and make element selection easier.
Designing a CTA for a mobile landing page is crucial if conversions are your goal.
As a rule of thumb, never put two different CTAs on one page. One CTA at a time is the way to go.
Here are some best CTA practices:
CTA button size
According to a research by MIT Touch Lab, a human thumb average width is 2.5 cm (72 pixels) and index finger is 1.6 to 2 cm (45 - 57 pixels).
To accommodate thumbs and fingers, make sure your CTA button is at least 44 pixels, making it easier for users to click.
In the example below notice how easy Amazon makes it to tap “Shop All Deals”.
CTA Color
Make a CTA button in a contrasting color scheme from its surroundings. This causes the button to stick out from the rest of the page which, in turn, draws user attention.
As shown, the CTA on the right has more chances of converting the user than the one on the left.
CTA Frequency
Remember the space you have on mobile is very limited. There is no need to put a headline, sub-headline and a CTA simultaneously.
You need to remind your visitors about your offers through CTAs without making it too repetitive or annoying. Make it seamless, and nudge them toward the conversion goal.
One way to do this is to include the CTA and leading text on the same button, like this:For long pages, use two CTAs on the same page - one at the beginning and the other at the end to keep the users in the loop. For example, Mailchimp does this on their mobile landing page:
Phone Numbers as CTAs
When setting up a mobile landing page, ensure that it’s easy for people to call your company.
Ensure that your phone number is in HTML, and it is “Click to Call” ready, meaning you can tap on the phone paste to the dial screen.
Alternatively, you could use CTAs, such as “Call Now” or “Call Support.”
One way to indicate a phone number is to include a phone icon on the button, like this:
Focus on Improving Speed
Speed is crucial for conversions, even more so on mobiles.
Google has also started warning users of slow loading websites. One way to overcome this problem is by using Content Delivery Networks and browser caches.
That being said, you must also account your landing page for slow internet connection. Here are some tips to achieve this:
Designing high-converting mobile landing pages can be a challenge since the rules are so different than desktops. However, by following a few simple best practices, you not only get higher conversions, but also improve your site’s user experience.
Key takeaways from this post:
