Total Followers 132,503
A landing page is a very important tool for online marketing and is also known as a lead capture page. The definition of it is a single page that appears in response to clicking on an advertisement. These pages are usually designed with a clear scope: to sell or make the user subscribe. They are normally extensions of the advertisement link the user clicks on. You can find links to landing pages in social media, e-mail or search engine marketing campaigns and many other places. You can find them all over the internet. With a clear goal of converting the visitors into buyers or subscribers, the landing pages have to be convincing right from the first moment, otherwise they will not lead to the desired purpose.
There are many discussion about the fold on the internet and even if I don’t have a preference, I can see that each one of them has advantages and disadvantages. The fold (the part of the page visible without scrolling down) can be used to your advantage if you manage to make the user scroll down. People say the users do this anyway, but I might not agree. If the things above the fold are not interesting, I will not scroll – why would I, after all?
Although I do not think designers should expect people to scroll, if they have a nice teaser over the fold then they can put much more information about the campaign or product under it. For example, I’ve seen landing pages with illustration above the fold and with the boring and long text under it. The illustration got the user interested and now it is more likely for him to read the information, regardless of how boring it is. This is the way I usually like to advise people to do it.
The others say that animation or illustration should not be above the fold, because it loads slowly and it drives the user away. I consider this totally unfounded and stupid to say. We are all designers here, nobody uploads images of 5MB that load in 1 minute. If we still do that, it means we either do it on purpose or we should find other jobs. This argument is not valid. Moreover, if you manage to attract the interest of the user with the boring text, what good will the illustration under the fold do?
The first point we’ve talked about is not the most important – this one is. Having a clear call to action will not distract the user’s attention and he can focus on the purchase (which is exactly what you look for). It is a huge mistake to design a cluttered landing page and not make the call to action clear, because in the end it all comes down to how much you’ve sold. The page has to be simple and explicit for all kinds of users. Bare in mind that not only IT experts and computer geeks visit the ads, so do beginners. The purpose of the website needs to be defined by the user within a matter of seconds.
It is not difficult to focus the call to action, you just need to use some of the following elements:
Groupon has a great landing page which you can see below. If we take a look at the list above, we can see that Groupon used some of the elements I’ve named. They asked a question (which is not really a question, but the user still has to confirm the city), they keep the call to action on top (very close to the Golden Area), there is contrast between the green background and the light call to action box and the text is short (“Save 50% to 90% in Vancouver”). And voila, they have a very useful and productive landing page.
The Landing Page of Groupon
It should be clear for everybody out there that long blocks of text will not sell anything. People do not read too much anymore; therefore we have illustrations, animations and sound to replace the old way of doing it. Text does not grab attention, graphic elements do. Therefore you should try to maintain a balance between these two. I know it is difficult because people should be interested in text and what you offer, but they are not; and you are there to make them buy. So design the way they want it!
Text and graphics can easily be combined by a good graphic designer, so if you are not one of them, find one. This concept is called infographics. They are quite easy to notice and usually they get the point across to the viewer quickly. This way you can have both text and graphic in one interactive concept and make them work together.
If you are stubborn and really wish to insert blocks of text, look into a typography manual. Keep the font at a decent size, increase the line height and pick a friendly and easy-to-read font. People are more likely to run away (and they will, trust me) if they see a large block of text. It gives a feeling of the internet back in the 90s, for those who experienced it – you don’t want that on your landing page.
Below you can see two examples of how an infographic works. These two are not landing pages, I just want to show you how easily text and illustration can be combined.
Bankruptcies Infographic
Infographic by Coca Cola
Removing any other link besides the call to action buttons is important, because the last thing you want is to drive the user away to another page. You can have a Privacy Policy link which should open in a separate tab, but don’t include other links. Users get carried away pretty fast. As the experts advise, there are only two options for a user who hits a landing page: signing up or leaving the page.
There are many examples on the internet where landing pages are actually part of the website. In this case you should try to eliminate the navigation as much as possible or at least make everything open in a new tab. The second choice is quite annoying and I wouldn’t go with it. I would rather try to put the navigation somewhere else – or, for better results, I would actually never have a landing page as part of the whole website.
There is nothing wrong with offering something for free in exchange for the e-mail address or whatever it is you are asking for. Most of the time it actually helps. Make sure your landing page specifies that you offer a product, trial or anything else for free. Is there anybody out there that doesn’t like free stuff? Free always works, so why not go for it.
Vinotrac offers access for free
Although free always works, this doesn’t mean you should literally have the word all over the place. Quotes like “No obligation”, “No charge”, “No credit card required”, “No commitment required” and many others work very well too.
Landing pages are not only made for selling something, but also for convincing users to sign up for future details or updates. But how do you do this?
Well, this might be a difficult one, because you have two options: you can insert a form or make a call to action button which links to a form completion page. Which one should you use? It depends on the type of form you have.
Mail Chimp has a nice call to action button instead of a form to fill in.
If you need only up to four fields to be filled in, then put the form. Otherwise just create a call to action button which will take the user to a separate page where he can fill in a form with more fields. If you choose this, then make the button big and let the user know he goes to a page with a long and boring form to fill. If he gets there, it has to be his choice and he has to know what he should expect.
Don’t leave this behind. Security is one of the biggest issues on the internet right now. Don’t let it be on your website too. Do everything you can to protect your users. Start with having a visible SSL certificate and an HTTPS connection. As said before, a link to Privacy Policy should not be skipped. And there is also a reason that every program you need makes you check a small box before you can continue. Even if you don’t, they want to be sure you’ve read the policy before.
Both Secure (https) and SSL connection are featured here
Most of the users tend to feel more comfortable on any kind of page if they notice these elements, therefore try to have as many as possible. Don’t forget you’re dealing with personal information such as e-mails or phone numbers or, even more, addresses and credit card numbers.
There are many tools on the internet which can help you track the progress of your landing pages. The best of them is by far Google Analytics, which gives you an insight to how the users interact with your page. Try to look as much as possible into that and increase the conversion rate of your landing page. At the end of the day it all comes to this.
Having a landing page is something everybody looks into nowadays. They may sell a product, write newsletters, tease people with gossip from the latest technology trends or even spam users, all of them look to have a landing page which collects as much information as possible. Try to follow the tips above and tell us how well they’ve worked for you. If you think we’ve missed something, don’t hesitate to leave us a comment. We would be really glad with some more insights from you.
101 Landing Page Optimization Tips on Unbounce
Top Landing Page Tips From The Pros on Seldomstatic
Ten Tips For Landing Pages on Lead Generation
Five Landing Page Tips to Boost Your Conversion Rate on Search Engine Land
50+ Examples of Highly Optimized Landing Pages on Smiley Cat
Get The Only Freelancer crash course you will ever need to read!
Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.
Tuesday, December 27th, 2011 09:17
At KickoffLabs we’ve seen a few trends that lead to nearly 45% conversion rates:
1. Create incentive for signing up. Ebook, contest, etc.
2. Create incentive for sharing AFTER the signup.
3. Don’t use a background image that’s distracting from the signup.
4. Reduce the form. Do you really need birthday, location, sock size? Or could you use a follow-up email to engage them and gather more information. More questions = less signups.
Thanks!
Josh
Wednesday, November 30th, 2011 17:42
I’ll deffinately take something away from this article.
Easy to read writing style too. thanks!
Tuesday, November 22nd, 2011 05:40
I cringed when I saw the screenshot of IE6 in tip #7. But kidding aside, this is a helpful article. Thanks for sharing.
Friday, November 11th, 2011 14:36
Great tips…expect to see lots of awesome landing pages after this article!
Sunday, November 6th, 2011 22:08
Thanks a lot Christian! Good/Useful articles here!
Friday, November 4th, 2011 07:23
Really awesome post was looking for a post like this.
Thanks for sharing this it will help us to create a stunning landing pages
:)
Thursday, November 3rd, 2011 11:34
This is great, some really good examples. I still don’t fully understand landing pages but these are some great tips & techniques.
Get The Only Freelancer crash course you will ever need!
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!
Jon
Thursday, November 3rd, 2011 11:34
This is great, some really good examples. I still don’t fully understand landing pages but these are some great tips & techniques.
Armands
Sunday, November 6th, 2011 22:08
Thanks a lot Christian! Good/Useful articles here!
Raj Mehta
Friday, November 4th, 2011 07:23
Really awesome post was looking for a post like this.
Thanks for sharing this it will help us to create a stunning landing pages
:)
john
Monday, November 7th, 2011 09:04
really interesting information! I like this articles :)
Morgan
Friday, November 11th, 2011 14:36
Great tips…expect to see lots of awesome landing pages after this article!
Josh Ledgard
Tuesday, December 27th, 2011 09:17
At KickoffLabs we’ve seen a few trends that lead to nearly 45% conversion rates:
1. Create incentive for signing up. Ebook, contest, etc.
2. Create incentive for sharing AFTER the signup.
3. Don’t use a background image that’s distracting from the signup.
4. Reduce the form. Do you really need birthday, location, sock size? Or could you use a follow-up email to engage them and gather more information. More questions = less signups.
Thanks!
Josh
akira
Wednesday, November 30th, 2011 17:42
I’ll deffinately take something away from this article.
Easy to read writing style too. thanks!
karl
Tuesday, November 22nd, 2011 05:40
I cringed when I saw the screenshot of IE6 in tip #7. But kidding aside, this is a helpful article. Thanks for sharing.