How to Design a High-Performing Landing Page for Mobile

how to design a high performing landing page for mobile

The Omnipresent Landing Page

The landing page has become as ubiquitous as the internet itself. It is used by marketers to sell specific products, engage with audiences, and come up with a clear-cut solution that enables people to purchase a service in a simple yet effective way.

But what about creating a landing page for mobile? What are the specifications you should take into account when taking these pages to the mobile realm?

By reading this informative blog post, you will be able to get a list of rules that shall help you build something that passes the mobile test with flying colors.

What is a Landing Page?

First and foremost, it is crucial that we get to define what is a landing page. In the realm of marketing, this is a singular web page that shows up as a response to a click on an online ad. These are essentially custom pages which are created taking the interests of a particular set of target users into consideration.

When creating landing pages, people get to actually craft a tailor-made customer experience that effectively allows users to get the info they need. These pages are used for just about anything but they tend to be the go-to move for companies which want to sell specific products or services.

They should cut to the chase, be as straightforward as possible, and allow customers to quickly understand what they must do to get the product they need. For this purpose, there is a much-needed CTA - Call-to-Action button - which is the icing on the cake of a perfected landing page. The CTA should be concise and precise, allowing prospective buyers to immediately know what actions must be undertaken to purchase a product.

Now that we know what this is all about, it’s time to dive into some of the essential rules to create effective landing pages for mobile in the future.

Rules to Design a Landing Page for Mobile

1. Short and Sweet

One of the worst crimes committed against mobile landing pages is an excess of text. Mobile is a different realm. The screens are small and that means users don’t want to spend unceasing minutes trying to understand how to get a product.

Moreover, a submission form on mobile is approximately half of what it is on desktop. That means marketers must be able to come up with a concise solution that gets the message across without overburdening users with unwanted information. Mobile users dread having to fill huge forms and they are the number one reason why they decide to bounce away from the page.

How to avoid this text-based exodus? You should come up with a platform which provides clear choices. That means users get to know that they must decide between two obvious choices, keep pressing continue, and reach the final click without spending an inordinate amount of time reading about why the product is amazing, how many people have used the product, etc.

By avoiding a cacophony of words, allusions, images, and testimonials, you will be able to focus on the matter at hand, sell the product you need to sell, and allow users to clearly understand that they can go from A to Z in a few simple steps.

2. Get Static

Those who have spent a long time scrolling down to read a huge page know it is an insurmountable task that no one deserves to go through. On mobile, one of the key rules is to at least try static header CTAs.

Users hate having to scroll all the way up in order to find that elusive CTA that they had seen above the fold. That means everyone should try the sticky CTA.

It is basically a CTA that maintains its position, whether or not users scroll down. This means users get to read more info about the product without losing sight of the CTA. Whenever they feel like the product suits their needs, they won’t have to be bothered with scrolling - they can simply take advantage of the ease of access and click the CTA that has remained in the same position throughout the user experience.

Here are some of the advantages of using the famous sticky CTA:

  • You won’t need to come up with an intro and final CTA
  • Users can be converted at any moment
  • It avoids wasting the time of interested prospective buyers
  • Floating headers are proven to help users find info faster - 22% quicker!
  • They maximize conversions because they don’t limit the CTA to a buried position

Those who want to use mobile landing pages with complete efficiency must give the static CTA a try and then understand how it actually increases landing page conversions.

3. Insert Video

Video content is all the rage and here’s why:

  • According to data, video increases the trust factor, allowing people to want to remain on the page
  • Videos are more appealing than words, which means the message sent is easier to get across
  • Consumers who watch a product video on a page are 144% more likely to buy
  • Videos placed above the fold allow visitors to immediately engage with the video, making them more likely to sign up, purchase, click, convert, etc.
  • By 2021, 82% of the global traffic online will be video

However, people should be wary of how they actually insert video on their mobile landing pages.

Why? Because video can actually slow down the LP, making sure users run away. Nonetheless, video has an amazing quality: by implementing video on a mobile LP, the need for added content is instantly eliminated.

This means users can quit reading and focus on watching a short explanatory video that shows them what the product is in a fun, engaging way. They can read the key value proposition while watching the video, which means people who make the decision of converting written content into engrossing walkthrough videos can see conversions soar.

device laptop people

This is how you can supercharge video:

  • Make sure to use directional cues to point visitors to the conversion goal (either a physical or verbal instruction)
  • Add the video to YouTube as well as optimize it for SEO because videos are 52 times more likely to actually appear on the first page of the SERPS
  • Ensure you test both press play and autoplay to understand which is the best choice

By inserting videos seamlessly, you will be able to build simple pages which explore the video frenzy and allow consumers to have all the info they need to get before converting.

4. Go Above the Fold

One of the most gruesome mistakes made by inexperienced marketers? To hide their very best content below the fold. That means that the top content that can be used to sell a specific product gets buried underneath, limiting the number of possible achievable conversions.

In the world of mobile, content which is not located above the fold might as well be forgotten. The numbers speak for themselves: above-the-fold content has 73% more viewability.

Content that’s located below the fold? It actually gets a 30% plunge in viewability.

What can we learn from this? The content located above-the-fold should be the primary selling point. Then, people should go ahead and use a CTA that immediately stands apart. They can explore gradients that really showcase the CTA as an unmissable part that’s located immediately after the product-selling content.

If you need to insert more info that is of lesser importance, do so below the fold. Users who are interested and don’t want to click the CTA without reading the whole page can quickly scroll down, but you will be sure that the most important content stays above the fold accompanied by a CTA that does the trick.

By playing with primary and secondary focus, you can take advantage of a well-known user experience technique to clearly showcase prospective buyers the info that is relevant, the CTA that wraps it all up, and the additional info below the fold that’s always accessible. 

5. The CTA Trick

The CTA is one of the most debated parts of a mobile landing page. What should everyone bear in mind, though?

The obvious goal of any mobile LP is to actually convert. That means that the CTA must somehow be able to capture the vague attention span of a mobile-loving population which doesn’t have time to beat around the bush.

What to do, then? Ensure that mobile pages provide a CTA which showcases remarkable aesthetic appeal. With a simplistic design that gets to draw the users in, you can use color changes, width changes, and other shifting visuals to lure users into the CTA.

In case you want to insert more than one CTA, you must ensure you make use of the same technique all around. You should be able to get different CTAs that all have one thing in common: the intelligent use of design skills that allow the CTA to become an animated being which immediately raises awareness, and almost nudges users into converting.

Mobile users get more distracted by umpteen mobile apps every single day. Capturing their attention using a visually appealing CTA and dynamically engaging colors is not a fad: it is a necessity.

Here are some other CTA best practices:

  • Inventive colors - orange and green have been proven to get higher performances
  • Playful shapes. Test different shapes (round, square, rectangular, etc.) in order to later optimize and gain more conversions
  • Ensure the text is legible. Tiny CTA letters reduce conversions which means it is important to create alternatives with different sizes in order to reach the pitch-perfect font size
  • First person speech does the trick. The “get your free trial” works perfectly because it immediately suggests the user will own the product (“your”)
  • Urgency matters. Trick users and lure them into acting fast by using words such as “today only” or “now” so as to build up tension and incite action

By following these best practices and ensuring the CTA is both attention-grabbing and interactive, everyone will be able to get more conversions on mobile.

6. Get the Right Info

Another giant mistake that promises to leave you void of conversions? The all-encompassing, eternally long submission forms. Forms are the perfect way to get customers to provide concrete information, but they are tricky.

In fact, too many fields will make sure users run away faster than lightning. Creating forms which request limited information - an email, for example - might mean that you will have to work hard to call a prospective buyer and pose added questions. However, in a highly-distracting mobile environment, using more than four fields that must be completed will effectively lower the possibilities for a successful conversion.

How to optimize forms? By following these 5 tips:

  • Only request the user’s email
  • Make sure fields allow for autocomplete to minimize the user’s hassle
  • Eliminate spaces between fields to reduce the sense of boredom
  • Include error messages that get the user to correct form mistakes in a way which doesn’t make them want to leave or feel offended
  • Redesign mobile LPs taking touch - and not mouse clicks - into account

By following form best practices, you will be able to adapt your page structures to the future, ensuring mobile-addicted users get to go through all the conversion steps without wanting to leave the LP.

blond man using mobile phone

7. Speed it Up

Speed is the name of the game in mobile. One of the worst things that can happen to a page is for it to take an inordinate amount of time loading. Loading page speed is a hugely important aspect of both desktop and mobile LPs. Pages that fail to load or load a second too slow will see a drop in conversions.

In fact, here’s a rundown of page load speed data for marketers to bear in mind:

  • 64% of the world’s many mobile users want mobile pages to load in less than 4 seconds
  • In terms of SEO, a delay of one second in page loading time will mean an 11% loss in page views
  • 79% of clients who complain about website performance are less likely to further purchase from that web page

How to avoid creating a page that’s simply too stuffed with heavy content?

Follow these quick-to-implement best practices:

  • Use tools to edit images in order to get them to be the appropriate size, therefore reducing file size
  • Erase unnecessary image metadata, since EXIF data is now used by most digital cameras
  • Compress all images using these tools
  • Fix the format of the images, avoiding heavy formats such as TIFF or BMP

The Final Tally

There are many best practices that should be followed in order to guarantee incredibly successful mobile landing pages in the future.

From inserting seamless video to erase written content, to ensuring CTAs get to be as immediately engaging and attractive as possible, it becomes clear that those who fail to follow data-driven guidelines will never become able to create highly-converting mobile landing pages.
 

Latest Posts

How to Design a High-Performing Landing Page for Mobile

Francisco Espiga - May 15, 2019
Landing Page Mobile

5 Ways Augmented Reality Will Influence the User Experience

ALTA Team - May 08, 2019
Augmented Reality User Experience