We have seen lot of online businesses focusing on driving as much traffic as possible to the landing page(s), but they didn’t pay much attention to conversion levels and conversion rate optimization (CRO). Focusing on conversion rather than additional traffic is usually cheaper and way more effective approach to generate incremental business.
So here’s our view on the perfect landing page and 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:
- Strong & Visible Call-to-Action
- Solid Performance & Fast Loading Times
- Beautiful Design & Functional Layout
- A/B Testing
- 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 the thing user will note immediately and we recommend placing it above the fold although there could be some exceptions (read more about fold position on Kissmetrics Blog or ConversionXL).
Besides the position it’s also important to make it actually visible and readable. Stay away from the “ghost buttons” which has transparent background. Also make sure the background color and text have good contrast levels as not everyone is having the latest retina display. For checking the contrast level use WebAIM or Contrast Checker.
Font size is important too, often we see CTA buttons having a same font size as paragraph text. Don’t be afraid to make it bigger so it stand outs.
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 visitor 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 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 what it takes.
Great thing about CTA buttons is they could be extremely easy tested 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; have 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 being overlooked by many online marketing and CRO experts while its impact on conversion is massive. You need to realize that every ten milliseconds of delay will cause you conversion to drop. And obviously the mobile pages need to low 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.
To achieve a good performance you need to have a solid hosting which has direct impact on your overall page performance. Server response time (or first byte load) measures how much time does it take to client to actually start downloading 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 it’s pictures and scripts which takes most of the space. There are several techniques how to minimize it.
For pictures they should be always “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 on the shoe images below? Only if you really focus, but your network see a massive difference.
Other techniques of page size optimization includes browser caching, gzip compression, minifying scripts etc. To better understand how good or bad your landing page is optimized for speed try some of tools like Google PageSpeed or Yahoo YSlow. It’s not that important to hit 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 plugin WP Super Cache which can help you most of the optimizations.
If you are having an 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. When your site is loading fast for US visitor, doesn’t mean visitor from Europe will have the same experience. We recommend using CDN77 which charges per actual usage, so if your traffic is low, you will pay just 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 it by having a good hosting, CDN and implement all possible recommendations from tools like Google PageSpeed.
3. Beautiful Design & Functional Layout
Today’s Internet users are used to see 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 also visually your landing page has to be perfect and beautiful to please visitors eyes and brain, so called “eye candy” effect.
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 such visitor will convert. Of course it is easier to achieve this effect using images, but it’s possible also without any picture. Just with pure and clean layout, beautiful mix of colors and readable fonts.
Great example is 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 definitely in different, more contrast color, so it’s more visible. And thanks to Unbouce for their list of 16 best landing page designs.
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 layout which users have adopted in 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 build in order to convert well and be effective. The best way to achieve 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 some elements should always stay at their position, like header/branding at the top, footer at the bottom, start with headline. But you can play with position of the form, CTA button, reorder fields etc. There are no limits.
If visitor doesn’t trust your landing page, he is not going to take a desired action. You need to build trust and feeling of safety when interacting with your page. How to do it? There are several elements you should consider including in your layout to increase visitor’s trust.
- Branding – This one is often underestimated, but it has big impact on conversions. 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 using 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 checkout process, they don’t need to be present on the landing page.
- Customer testimonials – Again very industry specific, it usually works better in a high AOV industries (e.g. plastic surgery) with low amount of conversions. But the most important point is do not try to 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, 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 much space and looks clean.
- FAQs – Visitors have usually lot of questions about your product/service and answering the most important ones on the landing page work 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 one, 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 a great conversion boosts, especially in some regions (e.g. Japan).
- Real pictures – If your landing page has pictures or 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 into your owns or at least pick some from the image bank which is not all over the Internet.
- HTTPs – This one is crucial, especially now when Google started to display “Not secure” warning in two additional situations. When your page has any type of forms (including comment form) and in the incognito mode. Forms on landing pages usually collects private and sensitive information, so your site (or at least the page) should be encrypted using HTTPs communication.
5. A/B Testing
A/B testing is a process of testing 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 lot of business 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 –
- Price –
- Messaging –
- Layout/Design –
Think about testing as a method to get you closer to perfect landing page. It is a constant process and you should be testing your landing page regularly to confirm any small changes you are about to do. Changing a label on CTA button or background picture? Run a simple A/B test because you never know what kind of impact on conversions it may have, you can only assume.