It's safe to say that over the past 20+ years, we've built and successfully delivered our fair share of Landing pages for small, medium and large global organisations.
In this article, we will aim to share with you some of the knowledge we've gained in 5 quick landing page best practices to help boost your conversions, whilst still keeping User Experience (UX) considerations at heart.
1. Create a Separate Mobile Landing Page
Your mobile landing pages have to be designed specifically for mobile use or they won’t convert the way you intend. Responsive designs are a great starting point, but you can end up with content bloat, slow experiences and a cluttered approach to your message, shoehorned into a mobile viewport.
The problem with responsive design is that all of the elements are designed for desktop, not mobile. Even the flow of the page is conceptualised for desktop use. Since mobile users search and browse sites very differently than desktop users, your landing pages need to be customized for each device that will be used throughout the user’s journey.
It’s important to effectively map out the user’s journey and build your site optimized to the devices that will be used along the way.
For example, Paypal has a visually engaging Sign Up Landing page for desktop. They utilise strong friendly photography to empathise with the customer and compliment the CTA buttons making them project from the background imagery, drawing the user’s attention.
Paypal chooses to completely remove the background images on mobile to remove visual clutter to avoid distraction, reduce page weight, and improve the text legibility. This allows the core message to resonate with mobile users and avoids any confusion over its purpose.
As you can see, both landing pages are speaking the same message and offering the same CTAs, yet both handle very different user needs. The mobile landing page is built to help visitors find information or complete tasks quickly, while the desktop landing page is designed to appeal to users with more time to spend soaking up visuals and aesthetics to express a friendly more approachable message.
2. Simplify your landing page
A very simple landing page might seem counterintuitive, but it gets rid of the visual clutter as mentioned above.
You will want your website visitors to focus on the goal: your call to action (CTA), and not get frustrated down with excess content and misdirection of the purpose.
Squarespace is a great example of simplified Landing page with minimal content that is still engaging and gets their message across. They have created an effective landing page that communicates volumes without many words.
They show a simple representation of a site overlaying an image, showing how easy it is to create a template, followed by three lines of text with a very positive and encouraging pitch to hook the user. And lastly, the ever-important CTA to ‘Watch The Big Game Commercial’.
3. Using Visuals and Videos
Images evoke different memories and emotions compared to written words. It takes only 150 milliseconds for us to process an image, and another 100 milliseconds to attach any meaning to it. (Frankfurt Institute for Advanced Studies)
These stats are what make image-driven social platforms such as Instagram, Pinterest, and Snapchat so successful. The use of images and videos on these platforms capture most of our attentive mind and pull us in time and time again.
So, with this sort of engagement using visuals on your Landing pages can be a key feature of improving the user experience and securing that conversion.
With this in mind, we still must be considerate of our users, as these visual elements use data. This isn’t an issue for desktop users, but we are thinking mobile-first, right? Not all users reaching your mobile landing page are going to be on WiFi; some will be using their limited mobile data.
Optimize your images or consider keeping them to a minimum to improve the load time of your Landing pages.
If you’re going to be using videos with audio, you definitely don’t want them set to auto-play. This can create a major frustration for people, and you will lose their conversion. Instead, wait for the user to perform some kind of gesture beforehand. For example, wait for the user to scroll down the mobile page, then auto play the media muted, or simply give the user full control to play the media themselves with the audio on.
If you must autoplay the video, do so with the sound muted. If the user gains interest in they can unmute it themselves giving control back to the user.
A good example is that of Monday.com, who have very little text and imagery on their landing page but include an attractive animated video of their product in action. At 200kb it’s small in size, ensuring the page loads fast and there’s no audio so even the autoplay isn’t distracting or frustrating.
4. Using clear and compelling copy
If you can successfully educate and persuade landing page visitors in a matter of seconds, you’ve got an amazing chance of getting them to take action – i.e. to click, buy, learn more, or make a sale. All of which fulfils the core purpose of the Landing page.
Knowing your users through UX research is ideal for writing the correct copy. Having accurate user personas can help inform you of a demographic’s reading abilities and their behaviours.
For example, the mobile landing page shouldn’t contain all of the copy from your desktop site. We need to focus on a shorter, abbreviated version. You’ll want to get to the point across quickly to your visitors, while still being informative and friendly otherwise will get frustrated and leave.
Here are some ways you can reduce the text on your mobile landing page:
Emotions profoundly impact people’s actions, similar to how we mentioned images encourage our memories. Empathy can ignite our instinctual impressions, invoke recognition, and prompt us to follow the same course of action in the future.
Think of words that you react to instinctively; they tend to be either extremely positive or extremely negative.
It’s not a difficult task to add a few emotive words when writing landing page copy, but there should be a consideration to which you use based on the users you are targeting.
Write copy around meeting the users’ needs and to appeal to what THEY care about. Focus on their emotional triggers.
" Build better relationships with your customers
Get to know your audience and find new ways to market to them when you use Mailchimp for customer relationship management (CRM). MailChimp
Using numbers to reduce copy
Our brain is attracted to numbers because unlike words, which are interpreted in a totally different part of your brain, it can organize, interpret, and store numerical information in a logical order. Numbers help cut the word count on your landing page down, making it easy for people to scan read and decide if they’re willing to engage with your message.
Even more importantly using numbers offers substance. Instead of bloating your landing page with sales copy, you’re giving people the hard facts and our brains respond beautifully to it.
Shorter your copy and use bullet points.
Sentences and paragraphs should both be short and easy to read. There should be no walls of text on your page creating a barrier against good engagement. Breaking up the text keeps users interested and makes it easier to find key points when they are scan reading. Improve the flow of content by keeping it succinct and to the point.
Always remember you are working with less screen space on mobile, so a word dense headline or subtitle can end up being 6 lines of text like this bloated mobile landing page from The Access Group.
Additionally, bullet points are great for getting key points across in smaller chunks without having to use supporting copy around them. They also have the added benefit of drawing the visitor’s eye, making them less likely to be overlooked and easier to skim read.
5. Use Simple CTAs
A call-to-action button shouldn’t stress or confuse the user. Make your CTA is clear, concise, and obvious. Like before don’t bloat button copy or promote a mixed message. It’s also a good idea to streamline your CTAs. If you can use one single button to fulfil your goal, then do so. Giving users multiple options can lead them down a confusing journey if they are not educated fully on the purpose of the Landing page in the first place.
Ok, so you’ve worked through those five pointers and you’re landing page is ready to be published. Great stuff, now it’s time to throw your feet up and watch the sales come in.
Sadly, as we all know this isn’t the case, and like any iterative design task, we must test our creation and study its effectiveness. To do this we must understand exactly what we are looking for so that we address and improve them.
What Should I Test on My Landing Pages?
Understanding how your visitors behave when they land on your site can help you decide what you need to A/B test first. Crazy Egg Snapshots provide you with detailed, personalized data about user behaviour and is extremely useful at this early stage.
A/B testing requires you to test just one thing at a time. However, that doesn’t mean you can’t run multiple tests concurrently.
It can also be very unpredictable. Most marketing departments, usability specialists, designers and management rely on a mixture of experience, gut instinct and personal opinion when it comes to deciding what will work better for their users.
At the end of the day, it’s your users and your brand (your brand is what your users think you are, rather than what you say you are) that will decide what converts the best.
With that being said, there are a certain number of landing page elements that you can focus on in your testing. The different variations and content that goes into the test is up to you and based on your user research, which one works the best is up to the users as a result of our studies.
Some of the elements you should consider testing may include:
- The main headline (which typically contains a succinct rendering of your product/offer/service core value proposition). Is it too long? Does it invoke the correct reaction?
- Adjust the structure of the landing page if you believe the page flow isn’t fulfilling the user’s needs as intended. Simply moving a section of information to the top of the page may be the key to locking in user engagement at the early stage, testing can expose these concerns.
- CTA text – typically the text on the button that represents your page’s conversion goal. Is it informative enough? Too Long? Confusing?
- CTA visual design. Use design principles to ensure the prominence and the appearance of your CTA (consider colour choice and contrast. The whitespace, and button size).
- Visuals. Try a variation of your image or video to discover if it’s positively or negatively influencing your engagement. Or better yet, do you even need that video weighing down the page?
- Form length. For lead capture and other form uses, you will want to minimize the number of ﬁelds that users are required to complete. Short forms mean quicker engagement and few bounces.
Hopefully, this quick guide proves useful and helps to improve your processes when building your next landing page.
Just remember it’s an iterative process, working towards designing the best possible landing page. It isn’t a once and done task, as A/B testing is imperative to ensure you are fulfilling your user’s needs and delivering that single focused objective from your advertising or marketing campaign.
Interested in learning more? Check out our insights on What to Consider when taking a Digital Mobile-First Approach.
Subscribe and stay up to date with the latest industry insights, receive great tips and how-to's, through our monthly newsletter.