The ultimate guide to designing landing pages that convert

Landing pages are pages that are designed specifically to accomplish conversion goals. Occasionally, a home page functions as a landing page (though some would argue that a home page can never truly be a landing page), but in many other cases, special pages are created for specific marketing campaigns.

Conversion goals can include everything from making a purchase to requesting free information. Once you have a specific goal and understand your market, you can create, test, and optimize landing pages that will better accomplish those goals.

Why you need landing pages

[pullquote]One of the biggest mistakes a marketer can make is sending traffic from any kind of advertising…to their home page.[/pullquote]

One of the biggest mistakes a marketer can make is sending traffic from any kind of advertising or PR campaign to their home page. Your home page likely has little direction or direct connection to the campaign sending traffic to it. That can leave visitors confused.

A landing page, by contrast, can be directly connected to your campaign. It can echo the language and images used in an ad or PR materials so that when a visitor lands on that page, they are guided through exactly what you want them to do while there. It creates a more cohesive experience, and one that leaves the visitor comfortable, rather than confused.

Landing pages exist to capture and maintain your visitor’s attention, in a way that a homepage is unlikely to do. They also focus your visitor’s attention on the information you want them to see, rather than just leaving them awash in a sea of information on your homepage.

Understand the target market

The target market for your landing pages is the first thing you need to understand. Obviously, you need to understand the same demographic information you’d want to know when designing any type of web page. But there are some additional things that are important when designing a landing page specifically:

• Where are these visitors coming from? Are they clicking through from an ad? Is it a search ad, a text ad, a banner ad, or something else?
• Or did they come from a PR campaign? Are they coming from social media? News sites? Blogs? Forums?
• What are they looking for when they get to your landing page? Are they there with the intent to purchase? Sign up? Get more information? Or something else entirely?

When you understand the answers to these questions, you can better tailor the design to the source.

Understand how landing page copy works

There are generally two schools of thought on how landing pages should work.

The “old-school” version is that long copy works best, the equivalent of a multi-page sales letter from the days of direct mail marketing. We’ve all seen those pages: you just keep scrolling endlessly through information and calls to action, often on a less-than-well-designed page. (These are the classic pages with the white background, light yellow highlighted areas, and red headlines and calls to action that most of us are all-too-familiar with.)

The PickEvent landing page is a great example of long form copy.

The other school of thought is that shorter copy, possibly broken up among multiple pages forming a sales funnel, is the way to go. There are advantages and disadvantages to each one, and each one can be better suited to different types of conversion goals.

Short copy is often better suited to calls to action with a low cost, low commitment, or low perceived risk (think newsletter signup or free trial). They also work better for impulse-driven conversion goals. Short copy also works well when your company or product is already well-known, so little explanation is necessary.

[pullquote]the more investment of time, energy, stress, or money a person needs to make, the longer the copy should be[/pullquote]

Long copy works better with need-based conversion goals, and when there is a higher perceived risk (and therefore more assurance needed by the visitor). It’s also better when the product is new or complex, and more explanation is necessary. In very basic terms, the more investment of time, energy, stress, or money a person needs to make, the longer the copy should be.

Long copy answers more potential user questions, reducing anxiety. That can also convince more customers to make the purchase without contacting you for more information first, streamlining the process and reducing your costs. Long copy can definitely result in more conversions than short copy in a lot of situations. As just one example, Conversion Rate Experts increased Crazy Egg’s conversion rate by 363% by making their homepage about 20 times longer than the control version.

Of course, when your lead already knows what they’re looking for, a shorter page can increase conversions. Take, for example, the gym featured in this article that increased conversions by 11% by shortening their page by about a third.

While you, as the designer, may not be writing the copy, you can help guide whoever is writing the copy to create either long or short copy based on the perceived market (particularly if whoever is writing the copy is not a professional copywriter).

Break up the copy

Regardless of whether your copy is long or short, it’s important to break up the copy so that it’s easier to read (or scan).

There are often four basic parts to a landing page:

• the headline;
• the sub-header;
• the must-know information;
• the nice-to-know information.

With shorter copy, breaking up just along these four sections can be enough. But with longer copy, you’ll want to create additional breaks in the text.

It can be helpful to use things like bullet points and additional subheads to break things up more.

Use design elements to break up copy, too. Inserting images, lines, differently-formatted areas, and the like can be a great way to divide and separate the content in a way that makes it both visually appealing and easy to read.

One other note on breaking up the copy: include calls to action at intervals throughout the page. When a visitor is ready to take action, you don’t want them to have to scroll around to find where to do so. Ideally, you should have at least one call to action in each section of the page.

There can only be one conversion goal

Each landing page should only have a single conversion goal. That goal might be to request more information, to make a purchase, to sign up for a trial, or something else.

If you try to split attention between more than one goal, you’re diluting the effect. So decide which goal is the one that’s important, and focus exclusively on that. You can always add additional goals (like signing up for a newsletter) on the confirmation page after the initial goal is reached.

Consider the attention ratio

The attention ratio of your landing page is how many links there are on your page compared to the number of conversion goals (which should always be one). So if you have a ton of links on the page that aren’t directly leading to the conversion goal, then that raises your attention ratio. Ideally, you want this ratio to be 1:1.

[pullquote]If you have more than one goal, you should have more than one landing page with more than one campaign[/pullquote]

This is another reason landing pages work better than simply sending people to a link to your homepage. Your homepage might have an attention ratio approaching something like 10:1, 25:1, or even 100:1. That means there are way too many things competing for your visitor’s attention beyond the goal you actually want them to reach.

Remember: your landing page should be focused on one specific goal. If you have more than one goal, you should have more than one landing page with more than one campaign.

Understand the competition

Before you start designing your landing page, make sure you know what the competition is doing. Are they all doing long sales pages with tons of copy? Or are they doing shorter copy in a series of pages creating a sales funnel? Do they use landing pages at all?

Once you have an idea of what the competition is doing, you can decide how much you want to deviate from the industry norm. You may not want to deviate too far, or you may want to do something completely different.

Where is the traffic coming from?

Traffic arriving on a landing page is generally coming from one of two sources: paid advertising or a PR/marketing campaign. Advertising might include video ads, social media ads, search ads, or banner or text ads on a website. PR or marketing sources might include press releases, non-paid social media updates, blog posts (either on your blog or on someone else’s), or news outlets.

When traffic is coming from advertising sources, you have complete control over the message that is sending traffic to your landing page. When it’s coming from PR sources, though, it may be more difficult to control the message. Your landing page may need to be more straightforward and explanatory, since you don’t know how much information the visitor will already have when they arrive.

Make sure your message matches

When you’re driving visitors from an advertising campaign, it’s vital that the landing page they arrive at has the same message as the ad. For example, if your ad is offering a free trial, then make sure the landing page also offers a free trial, and not a newsletter signup.

If you’re using banner ads or video ads, make sure the style is echoed between the ad and the landing page. Keep imagery, color schemes, and the like consistent between all elements of a campaign. If using text ads, make sure that the headline in your ad is clearly echoed in the copy on your landing page.

You have the same level of control over the message when you’re driving visitors from sources you own: namely social media or your company blog (or sometimes with sponsored posts on other blogs). So make sure that your message between these sources matches as well.

When users are arriving from a PR source that is outside of your control, you may have little influence over the copy that is sending visitors to your site. In that case, you need to make sure that your headline tells them exactly why they’re there and what they will find. You can try to echo the language used in a press release, but realize that it may be altered depending on the source.

First impressions are vital

The first impression your landing page gives is vital. A bad impression can lead to your visitor leaving before doing anything further. A good impression can do just the opposite.

The keys to a good first impression on your landing page are pretty simple:

• a clear headline;
• a well-thought-out design;
• appropriate visuals;
• a strong call-to-action.

Those four elements work together to instantly give your visitor a sense of your site and what they might expect to find there. Of course, the page’s content is also vital to the success of the page, but that comes after the first impression.

Check out the Ghost site for a great example of a good first impression. It hits all of the main points mentioned above.

Calls to action: the most important element

The entire point of a landing page is to get users to take a specific action. Therefore, your call to action is the most important element on the page. Generally, the call to action on a given page is a button, though sometimes it’s a link or form. Optimizing this one element can greatly increase your conversions. There are a number of parts to most calls to action. There’s the design of the button (or form or link), the placement on the page, the copy used, and the content surrounding it.

One simple change that you can make to increase conversions in your call to action copy is to change possessive pronouns. Using “my” instead of “your” consistently leads to higher conversion numbers. Various case studies show that it can nearly double your click through rate, with this one simple change. It personalizes the call to action and subtly conveys an existing relationship without shoving it in the user’s face.

The color of your call to action button can also make a huge difference in how users respond. While there is no one single color that will work best for every single landing page, one thing that seems to ring true regardless is that the call to action button needs to stand out from everything else on the page.

Is your color palette mostly blues and greens? Use a red or orange button. Is your page mostly neutrals? Then almost any bright color would likely do better than another shade of neutral.

The Ballpark landing page is a great example of a call to action button that stands out and contrasts well with the surrounding page.

You might think that using red would indicate “stop” to a visitor. But case studies have shown that red can outperform green in some cases. This case study about the Performable website shows that changing their call to action button from green to red showed that the red button increased conversions 21% over the green button; the most likely explanation for this is that the overall page uses a lot of green, and so therefore the green button didn’t stand out as much against the page as the red button did.

You want to be careful that your call to action is not crowded by other content. Give it a reasonable buffer from other content so that it stands out and draws more attention.

Where you place your call to action on a page is also vital. Ideally, you want your call to action to appear at intervals on your landing page, depending on the length of the page. If your page is short, one call to action might be sufficient. However, if your page is long, you’ll want to place the call to action at regular intervals throughout the page, so that when your visitor decides they’re ready to act, they don’t have to go looking for how to do so.

Take the time to properly test and optimize your call to action in order to maximize the conversions you get. A week (or month) or two spent testing your landing page can result in huge gains over the term of your campaign.

The other common type of call to action is a form directly on the landing page. In this case, follow the same criteria as above as far as color (and contrast), copy, and making your call to action stand out. But the other key is to make sure that the form requires as little information as possible to lower the commitment the user has to make.

If you can fulfill what they need using only an email address, then only require an email address. If you absolutely have to have a longer form (like if payment is required), consider splitting it into two parts. Even consider moving the form to a second page, and just using a button on the landing page itself.

Headlines are key

While most of the copy on a landing page should be created by copywriters, rather than you as the designer, knowing what makes a good landing page headline is still useful knowledge to have. A good landing page headline takes into account who the target market is and what they’re looking for, and addresses those needs. You want to stress the main benefit that your product or service will provide.

Your headline should also be action-oriented and dynamic. It should be clear and positive. Don’t focus on the negative in your headline. Your headline should be as long as it needs to be, without going overboard. Cut it ’til it’s as impactful as you can make it.

A great example is the Dropmark site. The headline “All your stuff in one simple, visual, private place” conveys the key benefit of the service while also being straightforward.

Images should reinforce the message

The images you use on your landing page should reinforce your overall message. The image should convey the same impression that your copy conveys.

One thing to keep in mind is that anything with a humanoid face (even if it’s a cartoon or non-human character) is more likely to draw the eye than any other element on a page. That means a human face can detract from your headline in some cases. Now, that’s not necessarily a bad thing. But it does mean that you need to take extra care that the face in question is supportive of your message.

While photos of people can be a great option, there are others. If your landing page is for an app or other online service, then screenshots can be a great way to show visitors what they’re actually getting. The same goes for a physical product: include photos of it.

The entire point is to use images to reinforce your message, lower the perceived risk for your visitors, and make them more inclined to take action.

Stock vs. original photos

If you’re taking photos of your product (or using screenshots), then obviously you’ll have original images. But if you’re using more general photos, then you’ll need to decide whether to use stock or original photos. There are pros and cons to each choice:

• stock photos are generally less expensive than original photos. They may also give you access to types of photos that aren’t realistically possible within your budget;
• of course, stock photos mean that you don’t have exclusive use of the images, which means your competition could use similar or identical images;
• original photos generally cost more than stock images, but they do give you complete creative control. If you can afford original images, then they’re often the better choice.

Incorporating video

Depending on your product and your conversion goal, adding high quality video to your landing page can be an excellent way to increase conversions. Videos can increase the length of time visitors spend on your page, and can better convey your message to some visitors who may not want to bother reading a ton of text. Video can also convey more complex products or services better than text.

Groove makes good use of video to explain their offerings:

Video that features you or your employees can also increase trust among your visitors. People trust other people, not websites.

One thing I highly recommend not doing when it comes to video, though, is auto-playing the video as soon as someone lands on the page. For every one conversion you capture that way, you’re likely to drive away three others who find it annoying.

If you’re creating a screencast, then consider recording your audio after you’ve recorded the video itself. This allows you to create a more professional recording, as you won’t be focusing on two things at once.

Another way to incorporate video on your site is to use it in the background behind your call to action. When done well, this can draw attention to your call to action while also offering more explanation of your product. Check out the Dragdis landing page for an example:

While video can be a nice addition to your landing page, don’t feel that it’s necessary. You can create a perfectly professional landing page that converts well without video. It can simply be a helpful addition in some cases.

Highlight social proof

Social acceptance can be a huge motivator. Knowing that others are using your product or service can be very persuasive for someone who’s undecided.

For that reason, including testimonials on your landing page is an excellent idea. Do something to set those testimonials apart from your other content, even if it’s something subtle. Putting the testimonials near your call to action can be even more persuasive.

If you don’t have testimonials, consider other ways to create the impression of social acceptance. If you have a lot of Facebook fans or Twitter followers, or if your page has been shared a respectable number of times (a few hundred to a few thousand depending on your industry and what the “norm” is), then displaying those numbers can also give validation.

A/B testing is vital

A/B testing is a vital part of creating an effective landing page. Because so many factors go into optimizing your page for the most conversions, skipping the testing portion of your process likely means you’re not getting nearly the number of conversions you might get otherwise.

Ideally, you should only test one element at a time. For example, you might test two different headlines, or two different button colors, or two different layouts, but don’t test all three at once.

Here are a few of the things you may consider A/B testing:

• where your form appears;
• the length of your copy;
• your headline;
• the color of your call-to-action button;
• the text appearing on your call to action button;
• the images you use on the page;
• the overall color scheme of the page;
• your specific call to action copy;
• your subheading.

Track how each variation does in terms of conversion before deciding on exactly which version to use.

Set actionable analytics

To that end, you also need to make sure you set actionable goals in your analytics program so you can properly track your tests, and your page’s performance long term.

Things to track include the time spent on the page, the total actions taken, and the bounce rate. If your call to action on the landing page leads into a sales funnel, pay attention to how many people actually complete that funnel, as well as where in the funnel they leave.

Tools for creating better landing pages

There are some amazing tools out there for creating landing pages quickly and easily, as well as for testing and optimizing your landing pages. If you don’t want to start from scratch, check these out.

Unbounce

Unbounce offers tools for building, publishing, and A/B testing your landing pages without coding. Just build it, publish it, and then test and optimize. They offer plans starting at $49/month, and each plan has a 30-day free trial.

Convert

Convert offers A/B testing services. It lets you create tests visually, with a WYSIWYG editor, as well as access to HTML and CSS editors. It only requires one bit of code installation, and integrates seamlessly with Google Analytics. Pricing starts at $125/month, and they offer a 15 day free trial.

Optimizely

Optimizely offers optimization tools with easy implementation. It can be used to optimize the experience for each customer, which can lead to higher conversions. The offer a free starter plan, or custom enterprise solutions.

Visual Website Optimizer

Visual Website Optimizer lets you optimize and personalize your landing pages, including features like A/B testing, split URL testing, multivariate testing, user feedback, a landing page analyzer, heat maps, and more. They offer a free trial, with plans starting at $49/month.

Instapage

Instapage lets you create landing pages in just a few minutes, with no design experience necessary. It lets you build fully responsive pages that integrate with over twenty common marketing tools. It even lets you publish pages to WordPress, GoDaddy, and more. Their free plan allows up to 100 visitors per month, while paid plans start at $29/month.

Lander

Lander makes it simple to create landing pages specifically for small businesses. It offers an easy to use editor, A/B testing, and even Facebook Page tab integration. Plans start at $22/month, with a 30-day free trial.

HubSpot Landing Pages

HubSpot Landing Pages lets you create landing pages in seconds that allow you to test early and often. It offers a drag and drop editor, smart forms, adaptive landing pages, smart content, and more. It’s part of the HubSpot Marketing Software, which starts at $200/month.

Google Analytics Content Experiments

Google Analytics Content Experiments offers the ability to test variations of your page using a random sample of your visitors. It’s included with your Google Analytics account.

Usability Hub

Usability Hub lets you test your designs and mockups on real people. Just upload your design, pick the test you want (five second test, click test, preference test, or nav flow test), they show it to users, and you get a detailed report of results. They have a free community plan (give a response to get a response) or a Pro plan for $99 per month.

10 great landing page examples

Basecamp

Basecamp has always had a terrific landing page. Their attention ratio is decent, with most of the links on the page specifically related to the call to action. And their call to action button contrasts nicely with the rest of the page.

Benchmark

Benchmark’s homepage serves as an excellent landing page. While the top navigation does increase the attention ratio, the rest of the page clearly explains the product and its benefits. The call to action button’s copy (“Start a Free Plan”) is also persuasive.

Manpacks

Manpacks uses a bright green call to action button, along with text drawing attention to the button. Rather than social validation, they highlight press coverage for the product right on the landing page.

WebDAM

WebDAM’s landing page for their “How to Select a DAM” software guide is an excellent example of a landing page that utilizes a form. They use minimal images, keep the focus specifically on the call to action, and make good use of contrasting colors. They provide enough information to answer potential questions, and also offer testimonials as social validation.

Shopify

Shopify offers a landing page for their 14-day free trial that’s an excellent example of a simple form and a simple landing page. It offers only the most basic information, set apart with bullet points. But since it’s for a free trial with only an email address required to get started, it’s a strategy that works.

Invision

Invision uses background video on their landing page to draw attention to the call to action.

Stripe

Stripe’s home page has a clean call to action, striking visuals, and enough content to answer potential questions without overwhelming the visitor. The call to action is clear, and rather than trying to get signups right away, it focuses on getting the visitor interested in more information.

Evernote

Evernote’s Work Chat features a very clear “Try Work Chat” call to action button that’s displayed prominently on the landing page. The images are kept relevant and directly support the conversion goals.

SuperTasker

SuperTasker has an animated banner on their landing page that offers further information while keeping the overall look streamlined and minimal. The call to action is clear, with good contrast.

Acorns

Acorns has a very prominent call to action on their landing page, with good contrast against the background on which it appears. The headline is clear, and the graphics support the overall message and conversion goals.

Landing page vs. home page

As mentioned before, some would argue that a home page can never truly function as a landing page. However, I would argue that many home pages now function as general-purpose landing pages, with the focus clearly on a single conversion goal.

As long as the focus of the home page is on a conversion goal that is the focus of your marketing campaigns, then it can absolutely act as a landing page.

One site that’s done that particularly well is Flow. Their home page looks just like many standard landing pages out there, with a clear call to action and long-form copy that supports a specific conversion goal. With the exception of a few text links in the header (Pricing, Features, Blog, and Log In), the attention ratio is effectively 1:1.

Landing page best practices

Here’s a quick review of what was covered above. Use it as a checklist when creating your own landing pages:

1. Limit conversion goals to one per landing page.
2. Make sure every element on your page supports your conversion goal.
3. Your call to action should stand out from the rest of your content. Consider contrast colors to accomplish this.
4. Keep your attention ratio low. Ideally, 1:1.
5. Provide social validation, possibly in the form of testimonials.
6. The higher the risk, the longer your content should be.
7. Break up long content with subheadings, bullets, and formatting to make it easier to read.
8. Don’t forget to A/B test!
9. Use a landing page for your inbound marketing campaigns, rather than sending visitors to your homepage.

Great landing pages can increase your conversion rates exponentially. Mastering what makes a successful landing page makes you a better designer, particularly when you create more business for your clients.

Landing pages aren’t more complicated to design than other types of pages, they just require some slightly different knowledge and best practices in order to do well.

Cameron Chapman

Cameron Chapman is a freelance writer and designer from New England. You can visit her site or follow her on Twitter.