5 Things Your Landing Page Needs to Have in 2018

We have seen lot of online businesses focusing on driving as much traffic as possible to the landing page(s), but they don’t pay much attention to conversion levels and conversion rate optimization (CRO). Focusing on conversion rather than additional traffic is usually cheaper, and a way more effective approach to generating incremental business.

So here’s our view on the perfect landing page and the top 10 areas which you should consider when building one for your business. To make it more straightforward we assume the traffic coming to the page is qualified (e.g. coming from the relevant source).

Table of contents:

  1. Strong & Visible Call-to-Action
  2. Solid Performance & Fast Loading Times
  3. Beautiful Design & Functional Layout
  4. Trust
  5. A/B Testing
  6. Final Check-list

1. Strong & Visible Call-to-Action

Your CTA button must be the most prominent element on the whole landing page. It has to be something users notice immediately and we recommend placing it above the fold, although there could be some exceptions.

Above the fold You can read more about the fold position and its role on Kissmetrics Blog or ConversionXL.

During the iPhone 8 launch in September 2017, Apple didn't have a single CTA button on the homepage
During the iPhone 8 launch in September 2017, Apple didn’t have a single CTA button on the homepage (source: Apple)

Besides the position it’s also important to make it actually visible and readable. Stay away from the “ghost buttons” which have a transparent background. Also make sure the background color and text have good contrast levels, as not everyone has the latest retina display.

Contrast level For checking the contrast level use free tools like WebAIM or Contrast Checker.

Beautiful example of the ghost button with weak CTA
Beautiful example of the ghost button with weak CTA – sorry Neil! (source: Neil Patel’s Blog)

Font size is important too; often we see CTA buttons with the same font size as the paragraph text. Don’t be afraid to make it bigger so it stands out.

Last but not least, make sure the label and actual call-to-action is clear, explanatory and playful (if your brand allows you to be) to encourage visitors to click. Try to avoid vague phrases like “Learn more” and don’t be afraid to use longer texts like “Click here to read about all our cool features”.

If you have more CTA buttons on the landing page, make sure to differentiate between them to clearly show which one primary and which one secondary (e.g. less important). Below are some good examples of CTA buttons having all it takes.

Good example of CTA button – contrast, label, clear differentiation. Just a font could be bigger
A good example of a CTA button – contrast, label, clear differentiation. Just the font could be bigger (source: Microsoft Store)
Good example of CTA button – contrast, label, clear differentiation, solid font size
Another good example of a CTA button – contrast, label, clear differentiation, solid font size (source: Dropbox)

The great thing about CTA buttons is that it’s extremely easy to test them using A/B testing (label, colors, size, layout etc.).

CTA Summary Make sure your primary CTA button is visible and readable (avoid “ghost buttons”) at all times including landing; actually looks like a button; has clear and explanatory copy to encourage user to click. A/B test it to perfection.

2. Solid Performance & Fast Loading Times

This area is often overlooked by many online marketing and CRO experts, yet its impact on conversion is massive. You need to realize that every ten milliseconds of delay will cause your conversion to drop. And obviously the mobile pages need to load even faster than the desktop ones.

47% of consumers expect a web page to load in 2 seconds or less.
A 1 second delay in page response can result in a 7% reduction in conversions.

via Kissmetrics

To achieve a good performance you need to have solid hosting, which has a direct impact on your overall page performance. Server response time (or first byte load) measures how much time it takes the client to actually start downloading the content of your landing page. According to Google Guidelines you should be aiming below 200 ms.

When it comes to the actual size of the landing page you should be aiming to keep it below 1 MB. Typically most of this is pictures and scripts which take up most of the space. There are several techniques to minimize it.

For pictures, they should always be “Saved for Web” which can be done through Adobe Photoshop. It means they will be compressed to a significantly lower size while keeping the (almost) unnoticeable change in quality. Does your eye see any difference between the shoe images below? Only if you really focus, but your network will see a massive difference.

This image has been saved in best quality level and has 114 KB
This image has been saved in best quality level and has 114 KB
While this image has been saved for web and has only 38 KB (3 times less)
While this image has been saved for web and has only 38 KB (3 times less)

Other techniques for page size optimization include browser cachinggzip compression, minifying scripts etc.

Page performance To better understand how good or bad your landing page is optimized for speed, try tools like Google PageSpeed or Yahoo YSlow.

It’s not that important to hit a perfect 100% score, but you should be aiming to hit around 90%. That means your landing page is fast enough and both Google and your visitors will like it. If your site is running on WordPress we recommend using the WP Super Cache plugin which can help you with most of the optimizations.

Looks like our landing page needs some work too
Oops, looks like our landing page needs some work too (screenshot from Google PageSpeed)

If you are receiving international traffic (e.g. from different continents) it’s a great idea to invest into CDN (Content Delivery Network) to host your images and other resources. Just because your site is loading fast for US visitors doesn’t mean visitors from Europe will have the same experience. We recommend using CDN77 which charges per actual usage, so if your traffic is low you’ll only pay a few cents.

And how to measure the actual page load time? Definitely not with Google Analytics. For some reason we find the data totally unreliable and doesn’t reflect reality because they are much higher. Use free tools like Pingdom or GTmetrix.

Performance Summary Make sure your total page load time is below 2 seconds. Achieve this by having good hosting and CDN, and implement all possible recommendations from tools like Google PageSpeed.

3. Beautiful Design & Functional Layout

Today’s Internet users are used to seeing pixel perfect design almost everywhere. If your landing page has small design flaws, overflowing elements, cropped images etc. visitors will lose trust and conversion rate will decline. That’s why  your landing page also has to be visually perfect and beautiful to please visitors’ eyes and brain, so called “eye candyeffect.

This is how you want to make your visitors feel about your landing page
This is how you want to make your visitors feel about your landing page

The whole point is to make the visitor feel great about your landing page, to feel safe, to be happy. Once you reach this point, it’s more likely that those visitors will convert. Of course it is easier to achieve this effect using images, but it’s possible also without any pictures. Just with a pure and clean layout, a beautiful mix of colors, and readable fonts.

A great example is the Wistia landing page which makes your brain to go “Ahhh, this is nice. I like this!” without any picture, but simply an awesome background. Just the  label on the CTA  should be in a noticeably different, more contrast color, so it’s more visible. And thanks to Unbouce for their list of 16 best landing page designs.

Wistia landing page with no images, just a beautiful background (source: Wistia)
Wistia landing page with no images, just a beautiful background (source: Wistia)

You can object that there are some extremely popular sites which are definitely not beautiful, but still they have million of happy users/customers. Like Reddit, Amazon, craigslist. That’s true, but all of them have very functional layouts which users have adopted over years. So don’t think you don’t need a professional designer.

Layout is how elements on your landing page are structured. Functional layout is layout which is built in order to convert well and be effective. The best way to achieve this is by testing. Think of how you can restructure your landing page and test it using A/B testing or user testing. Keep it mind that some elements should always stay in their position, like header/branding at the top, footer at the bottom, start with headline. But you can play with the position of the form, CTA button, reorder fields etc. There are no limits.

Example of how can you concert page layout to completely different style, but keep the same elements
Example of how you can convert page layout to a completely different style, but keep the same elements

4. Trust

If a visitor doesn’t trust your landing page, he is not going to take the desired action. You need to build trust and feelings of safety when interacting with your page. Especially if you are asking for sensitive personal information.

How do you do it? There are several elements you should consider including in your layout to increase visitors’ trust.

  • Branding – This one is often underestimated, but it has big impact on conversion, especially if your brand/company is known in the industry. Each landing page should have at least a company logo (typically in the header) and use brand colors.
  • Trustmarks – These may be more relevant for some industries and less for others. For example, displaying some kind of certification when you are in the pharmacy industry is almost a must. Security trustmarks (e.g. green lock, Norton Secured) are more suitable for the checkout process, they don’t need to be present on the landing page.
  • Customer testimonials – Again very industry specific, it usually works better in high AOV industries (e.g. plastic surgery) with a low amount of conversions. But the most important point is to not try and trick the visitor by using fake reviews and image bank pictures. If you have received a great testimonial, don’t be afraid to show it.
  • Refund policy – Text is usually enough, the days of those ugly “30-day money-back guarantee” stars are luckily over. It is a good idea to place the text below your CTA button. It doesn’t take up much space and looks clean.
  • FAQs – Visitors usually have a lot of questions about your product/service and answering the most important ones on the landing page works very well. FAQs are usually placed below the main focus area. Using a drop-down question-answer style will save you precious space on the page.
  • Contact details – Really simple, but often forgotten. Show your visitors who you are, where you are based (real physical address, not “Europe”) and how they can reach out to you (social media, e-mail, phone number). Displaying a phone number in some industries may lead to great conversion boosts, especially in some regions (e.g. Japan).
  • Real pictures – If your landing page has pictures or a picture background, don’t use the most obvious ones from the image banks. There is nothing more embarrassing than sharing the same picture with other companies. Invest in your own or at least pick some from an image bank which is not all over the Internet.
  • HTTPs – This one is crucial, especially now after Google have started to display a “Not secure” warning in two additional situations. It’s also important when your page has any type of forms (including comment form) and in the incognito mode. Forms on landing pages usually collect private and sensitive information, so your site (or at least the page) should be encrypted using HTTPs communication.

Of course you don’t necessarily need to have all these on your landing page. You should always pick and test what makes a difference while maintaining the clear design and functional layout.

As you can see on the example from Yoox checkout, sometimes too much is just confusing and takes attention from the main focus.

Yoox checkout – The whole right bar should increase customer's trust, but instead it just drives attention away from entering the card details
Yoox checkout – The whole right bar should increase customer’s trust, but instead it just drives attention away from entering the card details

5. A/B Testing

A/B testing is a process of testing the current variant (champion, control) vs. the new one (challenger). And you can test almost everything from the points above. But remember to keep the A/B test simple. We have seen lots of businesses which were running super complicated tests with many variants and page changes, and when evaluating the results they had no idea why exactly the new version performed better/worse.

In each A/B test you should be testing only one of the following elements and not mixing them in one test:

  • Offer – Testing of different product/service (even a different license plan)
  • Price – Testing of different prices for the exactly same product/service
  • Messaging – Testing of different content, but again the less the better. Imagine you rewrite the whole landing page, run a test and then you have no idea why it’s better/worse because of the headline or changing the CTA
  • Layout/Design – Testing of different graphic elements, colors, layouts, images etc.

Think about testing as a method to get you closer to the perfect landing page. It is an ongoing process and you should be testing your landing page regularly to confirm any small changes you are about to do. Changing a label on a CTA button or background picture? Run a simple A/B test because you never know what kind of impact on conversions it could have, you can only assume.

True that!
True that!

Be ready to fail. If you have a good landing page, around 90% of your A/B tests will fail (e.g. the champion will win). But don’t look at it as a failure, look at it as confirmation that your current version is the best one.

New to A/B testing? Read this excellent guide on how to start from ConversionXL.

Final Check-list

To summarize our recommendations, ask yourself the following five questions:

  1. Is my CTA visible enough with a strong and encouraging label?
  2. Is my landing page speed score 90+?
  3. Is my landing page beautiful and easy to navigate?
  4. Does my landing page look trustworthy?
  5. Am I currently running any A/B tests?

If the answer is yes, then you are already doing a good job. Of course, that doesn’t mean there isn’t anything to improve, and I am pretty sure we would be able to give you a few optimization tips. If you answer no on some of these questions, you should start fixing it. Start with the easy and quick stuff (quick wins, low hanging fruits, whatever you want to call it), but remember to test everything.

Happy optimizing!

Leave a Comment