Join over 55,891 Subscribers Today! FREE UPDATES!
Get The Only Freelancer crash course you will ever need to read!
I am by no matter an expert in landing page creation, but I am doing a lot of research on this topic in order to become more experienced myself and I invite you to join me in this journey.
In this article you will be taken through each important step in order to create a successful, landing page that converts visitors into customers, I will share the biggest takeaways here and point you to the right articles and tools – let’s call it Landing Pages 101, Science Of Landing Pages, Anatomy of Converting Landing page, whichever you prefer most.
Basically a landing page is a powerful online marketing tool – it’s a unique webpage, also known as a lead capture page, where your task is to persuade visitors to complete a certain action for example:
Your main goal is to create a landing page that encourages your visitors to complete a specific action. That’s far from being an easy task, landing page creation is an art, which is very hard to master, and even when you do you still need to do a lot of A/B testing to adjust your assumptions about how your visitors think and to see what works and what doesn’t.
Landing pages are widely used to launch webinars or products, pre launches, persuade visitors to give you their email address with the help of ebooks, email courses, special discounts. And as we all known once you have a visitors email address you can communicate with them on a much more personal level, which helps to establish relationships and also encourage them to do what you wish them to do.
In this article you will be taken through each important step in order to create a successful landing page, capable of converting visitors into customers. If I didn’t succeed in explaining what a landing page is read the Wikipedia explanation or this great Hubspot blog article.
(Strobecorp – beautiful and minimal landing page example)
How to use this guide?
This article is separated into sections starting from landing page structure, color usage, copywriting, how to write great headlines, tips on how to improve an existing landing page, templates, tools to use, a/b testing tools, analysis of some of the best landing page examples and more. Feel free to jump to the sections to learn what you find most important, though if you take the time to read this entire guide section by section, I can assure you, you will know more about landing pages than 99% of the rest of the industry!
Well, now that you know what to expect here, shall we start?
You can use landing pages together with:
When you run campaigns it’s not smart to send people to your home page. Usually your Home page doesn’t explain a lot about your product, you need to make it as easy as possible for visitors to do what you want them to do. If you want to promote your latest product, webinar or ebook, make it as simple as possible. Point them to a special landing page where they can do just that! If you know where your audience comes from, learn about them and make it as related as possible.
When you run special campaigns on a website, for example a giveaway, greet them and customize your message! Make sure there isn’t any confusion what you want them to do (call to action) and build your landing page around this call to action. Simple is better, remember that!
(Milk Inc. minimal landing page clearly shows how less is better).
Landing page anatomy (step by step parts in landing pages)
Before we start I’ll explain a few terms I will be using:
Visitor – visitors who come to your landing page, potential customers
Product – product in this case would mean an ebook, email newsletter,t raining, webinar, article etc.
The best product launch is when you have a product other people will love so much that they will tell other people about it! And your product must be just like that, whether it is for a global audience or a very specific one, the first thing you need is a great product place and the landing page is the place to show it off and explain in simple words why your visitors need it!
Make your product desirable and memorable.
This is a great infographic visually explaining the most important sections of a landing page and how to direct visitors attention.
Top Page Headline
This is usually the first section a visitor will see as headlines are usually big and you need to make sure you explain what you’re offering here and what the page is about in a few seconds! What problem do you solve and why your visitors should care about it.
For example in this article the headline is:
You know straight away what to expect, you’re going to find a comprehensive guide on how to create landing pages that work! Make your message as simple and clear to understand as possible! Peoples attention spans are very short and great products aren’t used or articles aren’t read just because someone wrote a crappy headline!
Make sure your ad copy targets visitors to the right page to fulfill expectations:
Bonus tip: use the same color palette or graphics on your landing page as in your ad copy assuring visitors that they came to the right place when they clicked on ad. Example from MojoThemes campaign below.
One Clear Call to Action
Build the whole landing page around your call to action, because it’s the main focus right? You created a landing page to get your visitors to complete a certain action and because of that make sure the call to action is easy to notice, whatever it is – subscribe box, buy button, form you want them to fill out.
Make sure your call to action is above the fold (basically it’s on the page visitors see without scrolling, approx 500px height). Some minimal landing pages even just put their whole message above the fold, making sure visitors don’t need to do ANY scrolling and keep their message super simple! You must aim for this goal too!
I’ve already mentioned how important it is to have one clear call to action and how you should build your landing page around it, but I wanted to emphasize this and include some more articles you will find extremely useful if you want to know how to create a memorable call to action or how to can improve your landing page to focus more on your main goal:
(Shipmentapp has no distractions, just one clear call to action).
The same way you use your headline you should use subheadlines. Use them to emphasize your message as you explain to your visitor what your product is about. Put the same attention into subheadlines as you put into your main headline, because you want your visitor to keep reading, you want to keep them engaged until he is sure your product is what he wants!
Note: continue reading the section about copywriting because the art of headline creation is really complicated and requires a lot of learning to master.
All the page content should be focused on what your main headline says and a single, focused message and, of course, your call to action. Make sure you list the benefits of your product, not just your product features, you’re the most proud of. When you create page content, you need to think from a visitors point of view. Will they be interested in the features you offer, or how these features will benefit them?
Keep your most important content at the top of the page together with bullet points, because most visitors at the beginning tend to scan a page and you need to grab their attention to get them interested enough to read further.
For example, if:
Make sure your 3 or 4 most important benefits are immediately clear.
You can also emphasize some of your content by making it bold or italicizing as I have done right below.
Tip: Focus on just three key benefits or ‘pain points’ you solve and no more! This will help your visitor to easily understand what your product is about, and more importantly, how it will benefit them.
Page content is also the place where you tell your story, build trust by showing your experience and address your audience by showing pain points they have and how you will solve them. When you tell this story, break your content up every 2-3 sentences to avoid the page looking cluttered. This is also why you need to use bullet points and numbered lists as I’ll discuss in the next section.
Write your content from a second person’s perspective – “You” addresses visitors much more directly than boring formal text.
Make sure you proofread and that there are no spelling or grammatical errors, your product will look much more professional and trustworthy!
Also don’t put too much text, because research shows 90% of the population doesn’t like to do much reading, which means headlines, images, video, and bullet points will get much more attention, where content may not get much at all.
(SlideDeck’s landing page shows how even with many elements you can still make a landing page look clean and simple).
Use Bullet points and numbered lists
Making use of this formatting will help your visitor understand what your product is about, the value you provide and what your message is. It will also simplify your layout, and simple is always better as peoples attention spans are super short.
Images often explain more than words can – why do you think infographics are so widely popular? Infographics bring text together with images that require little to no explanation, I always encourage my readers to use images in articles, because visual relation is much more powerful than textual, as is our memory.
(StumbleUpon did a very good redesign and their homepage makes great use of beautiful images).
And videos explain more than any single image could, you have a chance to show yourself, let people hear your voice, show them you’re a real person and it’s a great way to explain what your product is about and let your visitor just sit back and listen instead of browsing the page, trying to understand what he sees and whether he needs your product or not.
If you are offering something of great value then of course visitors want to share your great product with their friends right? Make it easy for them and provide social promotion links, but remember to use just the most popular services like Twitter, Facebook, LinkedIn and nothing else. Keep it simple and try to place these links in a way that they don’t distract your visitors.
Here is a great spot to run A/B testing to make sure your social links don’t distract visitors from your main message.
When you are asking for visitors personal information, they will often have some anxiety about giving it to you, so you need to make sure you build enough trust!
You need to think like your visitor, why do they have that anxiety? They receive a lot of spam, scams and cold calls from sales people so you need to explain that this is not the case here, right?
You can build trust with:
Usually your call to action will be subscribing to an email newsletter or a request to buy the product. It’s a very hard to decide how long your form should be, for example is it enough to just ask for their email, or do you need your visitors name? It’s up to you, but try to keep your form as short as possible, the more input you require from your visitor the less likely they will go through with it. Ask for the least amount of information you need – the less information you require, the more signups you’ll get, simple as that.
It’s even harder with buy buttons because the next step is usually a request for their personal banking or credit card information. I recommend using my personal favorite, Paypal checkout, which is fast and simple and doesn’t require your visitor to share their personal financial information with you.
You can add some fields that will help you learn more about your customer, but make them optional, not required. A better option is to show these fields after subscribing -
Experiment with button and form size, usually bigger buttons perform better than smaller less noticeable ones.
The default text is Submit, but studies show that it’s better to use something like Click Here or Go, but you can also take a different approach by making buttons more engaging and relevant to your offering like “Get Your Free Ebook Now!”, “Subscribe for news!”, “Get access now!” or “Download now”.
(Posterous has a beautiful, simple, landing page and good examples with call to action buttons).
Once your visitor has completed your call to action make sure you show your appreciation by simply saying thanks, offering a cool freebie or by directing them to related information on your site they may be interested in.
On this page you might choose to give access to your product (if it’s something they can download), give more details and put the download link.
If you chose to not use social promotion on your landing page, you can use it here – ask them to share this offer or product with their friends!
Now you will usually have collected your visitors email address so keep them engaged and follow up there. I won’t get into this topic right now as we’ll have a separate section explaining how to make use of your email list.
You must also have a clear and basic understanding of colors, because different colors convey different meanings and are perceived differently. Check these three articles to learn some basics about how to use colors in web design and your landing pages.
I didn’t want to go in depth in this topic, instead I found a good article for you to read if you want to know more.
(Fonts can make or break the landing page, Tumblr does it right with professional fonts and effective use of whitespace).
It’s a scary place to be thinking about how to price your product – you don’t want to price it too low and undervalue your product, and you don’t want to set the price too high and turn people off. How do you decide how many pricing options to offer and how to choose the actual product price?
It all depends on the exclusivity you provide, if you can make it look desirable, you’ll probably have no problem charging a higher price, but your landing page copy better be well written should be very well to create that desire, need and rush that will convince them your product will help them change their life or business! And yes, if you charge a high price be sure you can deliver – people want to get what they paid for!
I like to think it’s better to set prices higher, and then offer discounts and experiment with your price point. As for the options – I think the best choice is to have one price, one call to action, but if you really need more, don’t have more than three plans. Too many choices will just confuse your visitor and he will turn away! Ah, and if you have more plans, be sure to offer a top choice, which should be the best value, to make it easier for your visitors to choose!
But here I will repeat what everybody is repeating a lot already – do A/B testing, don’t assume anything, just test it and know for sure what works and what doesn’t!
Here are two articles on this topic from SocialTriggers to help you make an even better decision on pricing:
..and a bit of inspiration, how a good pricing table should look and how to differentiate several plans:
Here I will again cover and repeat some tips you should really remember again and again while designing your landing page, and if you have already have a landing page, then check these tips to improve your page! For example did you know? “Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.”
(Instagram’s landing page clearly shows it’s app for iPhone, it’s free and there is one call to action – download app from AppStore).
Here are some related links you should read for some really in depth knowledge about landing pages:
The art of copywriting is actually the art of keeping your readers engaged from the first word to the last. Keep them engaged in your content with bullet points, sub headlines, the artful use of formatting. Make your content flow so seamlessly that before your visitor is even at the middle of the page they desire your product and are already wanting to complete your call to action! It’s a very hard art to master and here are several articles to help you learn copywriting. If you read these articles, when you finish you’ll know more about copywriting than most people do, and that’s a huge advantage over your competitors:
You can find a lot of great templates online, some you can use right away that will help you kickstart your business! I think templates are great place to start, I recommend a lot of A/B testing and once you’re ready and know what you need, you can hire a designer or a coder to develop your own unique landing page that converts really well! These templates are very cheap and should are perfect to get you started!
Landing page templates from UnBounce – here you’ll find a lot of great templates, you’ll be able to edit in WSIWYG editor easily without any coding experience! UnBounce has huge experience in this market, so you can be sure you’ll be in good hands to get started.
Themeforest is a huge marketplace, selling everything from WordPress themes to landing pages! Even if you don’t end up buying a premium design, these are great source of inspiration! Here is a link to their landing page category, order these by sales to see the most popular landing pages on that site.
A few of my favorites:
Conversion is a premium HTML landing page. Its great structure and clean, professional design as well as a variety of page templates allow it to fit to both transactional and reference landing pages.The main goal of a landing page is to convert visitors into customers, therefore the layout is specially designed and fitted with a variety of features that will make that happen. Coupled with a structure that’s highly customizable, this product will be perfect for your product, service or company presentation.
Lista Landing Page is a premium landing page design for your newsletter or download, even just a service, your choice! Lista Landing Page makes good use of the Z Reading pattern to guide the eye around the design and ultimately convert your visitors in to subscribers or buyers.
Integro is a Corporate HTML /CSS landing page. It has a clean, professional design with a Definitive Call to Action. Integro is a powerful Landing Page with features like Live AJAX Form Submission, Pricing Table, Lightbox, Tooltips, 2 Types of Galleries and Image Sliders. You get started with Integro within minutes & only handful of Customizations with well documented HTML / CSS / JS & PHP .
Ok, this is the more advanced stuff! Once you know a bit more about what you need even if you don’t really think that you can code and design landing pages yourself there are a bunch of amazing online premium tools you can use to build your own landing page in no time! Often those tools come together with helpful tips on how to design a landing page and some even include A/B testing! I did a lot of research and these tools are the best ones I found and tested! Get started right now!
This is a handy premium WordPress plugin create by CopyBlogger Media for easy landing page creation. You won’t have any more problems creating unique pages, which look good and go seemingly with your own WordPress blog. I bought myself this plugin some time ago and I must say it is easy to use. The tutorials helped me learn a lot about landing page creation and for quick results don’t look any further.
I think this is the best tool for landing page creation without need to hire a designer to do the job, however of course for advanced solutions you still would need to search for help, but for most cases it’s enough with Premise. In their features you’ll also find included A/B testing through WordPress and even SEO tools letting you get all the data you could need from your page.
It’s a bit pricy ($85), but if you need to create a lot of landing pages, it is certainly worth the money.
Unbounce is online software you can use to create your landing pages. Everything is broken down into easy steps: build a page (choose from 276 templates), publish it, drive traffic and check results and in the end do A/B testing and optimize your landing page. This is a good site and if you need a cheaper solution, pick Unbounce – it has a 30 day free trial and the most basic plan costs only $25 per month.
KickOffLabs is another popular choice for landing page creation, they are trying to push social promotion into your landing pages encouraging you to be social, which is handy.
Their WYSIWYG editor is also very easy to use, you can easily pick from good color schemes and edit different elements easily. Only thing I think is missing here is advanced features for bigger landing pages with many elements, but if you want simple – KickOffLabs will be a great solution for you.
Check their dashboard below – everything is there explained in 1-2 sentences, the learning curve is very small. Ah and yes, for one landing page KickOffLabs is free, but for advanced features you may need to pay as much as $20.
Once you have created your landing page, don’t stop there, you should always be testing – even if you can improve your page conversion rate by 4-5%, calculate how much it could improve your performance in the long run! Don’t make assumptions about what works, I bet you’ll get a lot of surprises through A/B testing!
With A/B testing you can test everything – headlines, content, bulleted lists, video placements, call to action forms, looks, colors, formatting – you get the picture. Services like Amazon have done countless A/B testing and are still doing it all the time trying hundreds and thousands of different tweaks, while this is extreme you should learn from them and keep improving yourself!
Here are several helpful resources I found to help you delve much deeper in this topic:
Ok, this is super important – I know, I know it’s too much at first – so many little things you need to know, be aware of and at the end really you still cannot assume anything! You need to test it! And to be honest for a long time this topic was like rocket science to me! I didn’t know how to get started, A/B testing felt like too complex a topic and too hard to figure out and use…
But not anymore with these amazing tools we can use these days!
These are the most popular choices:
Yes, I joined many Optimizely supporters and think it is the best tool available for now! It’s very advanced, yet very easy to use with everything you need built in for serious A/B testing! I just registered and right away I was ready to do an experimental test!
It is really as easy as they promise on website:
Here you can read more in detail how Optimizely works.
Optimizely isn’t free (starting from $17/monthly), but it has a 30 day trial and I totally recommend it as a top choice for running any tests!
Together with A/B testing heat maps also can be very useful to see where people click, scroll on your live version, maybe there is image on your site where people click, but it’s not a link? Maybe in that case you need to make that section clickable or change the image to avoid distractions?
This is the most popular heat mapping service, which I use personally. It also has a handy WordPress plugin allowing you to automatically add tracking code, making the whole testing process even easier!
If you were wondering if there are any alternatives to CrazyEgg, there is also a very popular heat mapping service called ClickTale, which is similar, but it has some interesting extra features such as visitor recording, conversion funnels and campaign tracking.
Landing page creation, optimization, A/B testing – all these little bits require ongoing learning if you really want to be ahead of your competitors and improve your conversion rates. It’s very hard to keep track of this changing world all by yourself, but it’s super easy if you know where to search for high quality content! These blogs focus just on these topics and I recommend adding these sites to your RSS reader so you are always the first to know about the newest tests, tools and techniques:
Do you know any more useful blogs or resources about this topic? Share away!
Get The Only Freelancer crash course you will ever need to read!
Dainis Graveris is 23 years old blogger and designer, founder of 1stWebDesigner, now more silently managing everything behind the scenes. He usually hangs out in Twitter tweeting design related links and chatting with people. If you have any questions or feedback that's the best place to start! Cheers!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!