Last Updated on January 17, 2022 by Alex Birkett
This will be my ultimate guide to landing pages.
I’ll cover what exactly a landing page is, how to build one, landing page best practices, and landing page builders you can use.
Here’s what this article is not going to be:
- A promotional tutorial to a landing page tool I built
- A rehashed SEO article written by someone who has never built or optimized a landing page
- A bunch of vague advice on best practices like “use engaging images.” This shit is obvious.
I’ll incorporate my years of optimization and experimentation experience in hopes of giving you both a practical guide as well as something deeper to think and chew on (spoiler: that most landing pages can’t be boiled down to universal best practices and you’ll have to – gasp – think for yourself).
That said, here’s the structure of the piece:
- What is a landing page, really?
- My 3 favorite landing page builders
- How to create a landing page in 7 steps
- 9 landing page best practices
- A cautionary note on best practices, context, and experimentation
What is a landing page, really?
A landing page is a destination page specified for a given campaign. It’s where a visitor “lands” after clicking from somewhere else – search, a Facebook ad, an email campaign, any of the above.
Here, you see, the definition of a landing page is quite broad.
I personally delineate landing pages from other website pages by the nature of their focus. They’re typically much more narrow in their objectives than other pages (though that’s not always the case).
The problem comes when you realize that your homepage or another website page may also be an effective landing page, depending on the context. Thus, we’re mired in inscrutable definitional problems.
Oh well. For practical purposes, let’s define a landing page as “a singular webpage with a singular purpose.” And leave it at that. Basically, a standalone web page.
Note: I’m throwing my affiliate link on the tools listed here. Doesn’t affect my choice to add them, but want some extra dinero. I personally use Unbounce and Elementor in different settings right now.
My 3 favorite landing page builders
There are a million ways to build a landing page. You can code up your own in HTML and CSS and host it on AWS.
More likely, you want a dedicated tool for the craft.
Though many CMS solutions can facilitate building a landing page, I’ll focus on dedicated landing page software here.
My three favorite landing page tools are:
- Unbounce
- Leadpages
- Instapage
Quick walkthrough on each of the tools here.
1. Unbounce
Unbounce was my first, and therefore, my favorite.
Founded in 2009, they’re quite the veteran in the landing page world. Hell, Oli Gardner’s guides and presentations helped form the basis of what we know as landing page optimization. This is well before a myriad of Twitter influencers repurposed the advice from the O.G.’s like Oli.
Anyway, I digress.
Unbounce is easy enough to use. UI can be a bit clunky, especially when trying to do too much custom CSS and javascript or balance out your mobile-friendly landing page with your desktop version.
Overall, though, it’s no more difficult than the rest (especially enterprise abominations like Marketo or WordPress landing page builders like Elementor. Nightmares, the lot of them).
Unbounce is also quite a scalable solution. I get my designer and developer to build a template and then that allows me to operate with speed and efficiency from then on. Yes, it’s easy enough for a marketer to use (though I hate that phrase – as if all marketers are idiots who can’t code).
It’s my go-to pick still to this day. They also have lead capture popups and an AI copywriting tool now.
G2 Score: 4.4
Price: $72/mo with my discount
2. Leadpages
Leadpages is an agile, smart, great landing page solution.
In my opinion, Leadpages is the easiest platform to use. It’s not eminently scalable like Unbounce and Instapage, but for the vast majority of businesses, it will suit your purpose just fine.
Like I said, the drag-and-drop editor is great. They have built in payment and checkout functionality. They, too, have lead capture forms (and quite good ones, too).
Two things that make Leadpages stand out: they actually offer full website building functionality, and they have a myriad of beautiful templates.
Also, they’re cheaper than the other tools here (only $37/month).
G2 Score:4
Price: $37/month
3. Instapage
Instapage is my favorite landing page builder for those operating at very high scale.
They’ve since expanded from being a simple landing page builder. Now they claim to have six tools in one platform:
- Landing pages
- Personalization
- Experimentation
- Admap
- Collaboration
- Page speed
It’s easily arguable that some of these aren’t actually products, but we’ll let their product marketers have this one for now.
What’s important is their landing page functionality (complete with templates and modular personalization for scaled campaigns), personalization (dynamic and logic-based), and AdMap (which is incredibly useful for cataloging and managing campaigns).
One more thing, and this is subjective: Instapage has clearly gone the way of the enterprise. They have no pricing on their site anymore (you have to request a demo), some of the language is seemingly deliberately vague, and they’re clearly puffing up the size of their offering to make it seem like a platform.
At the end of the day, they’re a great landing page builder for scaled companies. Don’t forget that and get wrapped up in their enterprise positioning.
G2 Score: 4.3
Price: Get a demo
How to create a landing page in 7 steps
How to create a landing page, technically speaking, will depend on the tool you’re using.
I’m going to show you how to do it using Unbounce.
Here are the steps I go through to make a good landing page:
- Wireframe your page
- Design your page in desktop
- Optional, make it mobile-friendly
- Quality assurance and testing
- Press publish
- Send traffic to your page
- Optimize and repeat
1. Wireframe your page
Technically, before you wireframe you should go through the strategic exercise of deciding why you want to build a landing page in the first place.
What’s the purpose?
What’s the goal? Should be clear and measure goal (more sales, collect email addresses, demos, etc.)
Who’s the target audience?
How will it be distributed?
Then the answers to these questions will help inform both the copy and the design of your landing page.
Anyway, I’ll cover some of the landing page best practices in the next section
What you need to know now is the first step to creating a landing page, tactically-speaking, is to wireframe it out.
What’s a wireframe? A low fidelity representation of your experience that is primarily used as communication.
In other words, it’s not supposed to be perfect. You can literally draw a wireframe on a napkin if that sufficiently communicates the vision.
Many use tools like Figma or Sketch to wireframe a solution. Me? I think that’s overkill.
I either use a paper and pen (analog baby) or Balsamiq (a great marketing tool).
Through the next 7 steps, I’m going to use a hypothetical landing page on my personal blog. It will be a sales page for my agency, designed to take readers like yourself and convert them into high ticket agency clients.
In this sense, my strategy is fairly straightforward:
- People reading the blog know me, so it should be heavily tilted towards a personal letter.
- Context is that they’ve already been to a blog, so I can assume more information on their part.
- My personal style is text heavy and not well designed. So I can use a super simple design template.
- My first landing page will always be a test, never perfect. It’s important to get something launched and then optimize later (using message testing tools like Wynter, A/B testing tools, or other CRO tools).
So, without further ado, here’s my beautiful wireframe for a custom landing page created in Balsamiq:
Headline, subheadline, CTA, followed by further copy, social proof, and then another CTA.
Easy!
2. Design your page in desktop
Next up, we’re going to translate this over to our landing page builder. In our case, this is Unbounce.
Unbounce has tons of tools now, including popups, sticky bars, AMP pages, and of course, their classic landing page builder (where we’ll spend our time):
I know we have a wireframe and I should start a page from scratch, but I just don’t have the time and design skills to do that for this tutorial. Forgive me, but I’ll start with a template and we can customize it almost the the ideal of our wireframe.
We’re basically in a drag-and-drop editor now. It’s super easy to click into a field and change it. Here, I’ll change the copywriting above the fold to match my landing page wireframe:
Sick, that was easy. You can just use the left-hand side bar to add key elements. And click “contents,” “javascript” or “stylesheets” at the bottom to alter anything already on the page:
Tweak the landing page design and copy to your heart’s content (or better yet, work with a professional designer so yours doesn’t look horrible like mine does).
Next, if you want to target mobile visitors as well as website visitors we need to make sure you either a) create a mobile specific page or b) ensure that the page is responsive and mobile-friendly.
3. Optional, make it mobile-friendly
If you don’t want a mobile version, you can usually decide this in your landing page builder. In Unbounce, it’s as simple as toggling this to “off”
But if you want to create a mobile-friendly landing page, just click the “mobile” icon and edit there.
You can see here that my mobile version is absolute trash:
Now, I can use the exact same WYSIWYG features in mobile mode to tweak the design there:
4. Quality assurance and testing
As for quality assurance, you don’t need to do a ton at this stage. Just look at the “preview” mode for both desktop and mobile.
After you publish you’ll want to do more of your quality assurance, including:
- A heuristic audit (do you have any typos? Does everything work?)
- A browser and device test (browserstack.com is a good resource)
- A pagespeed and technical test (pingdom is good)
There are many checklists out there for landing page quality assurance. Borrow one and then customize it as you run into your own issues.
5. Press publish
Choose your landing page URL, page title, and the meta description. Hit that big blue publish button. Get over your fears and ship it!
All this was just a few clicks in just a few minutes. Easy.
6. Drive traffic to your landing page
Tree falls in the forest, single hand clapping….all that.
Send some paid traffic to it. Or, make sure your landing page ranks in search engines (there’s a great agency for that, or do it yourself with this content strategy guide.).
But if no one lands on your landing page, it’s not a landing page. It’s an art project, and a mediocre one at that. You should look into watercoloring.
So drive traffic and send visitors to your page. Look at it like you do other marketing campaigns.
7. Optimize and repeat
Optimizing your landing page is a whole other article. I’ve written a ton on conversion rate optimization, even specifically going into a suite of landing page optimization tools.
If I were to repeat all of that in this article, it would be a book. In fact, there is a book called Landing Page Optimization.
Anyway, make sure you’re measuring what matters (qual, quant, and your main KPI). Throw Google Analytics on your page in addition to using the landing page analytics. Run regular A/B tests, and never stop improving your landing page and and conversion rates.
We’ve got a new landing page up. Now let’s cover landing page best practices so you can create one that drives conversions.
9 landing page best practices
First, let me get this out of the way:
Don’t just copy a list of someone else’s best practices.
Are you that cynical to think you don’t have the ability to come up with your own solution? To identify the specific context from which you’re operating and come up with something suited for that? Do you really think you can outsource the messaging, positioning, and design of an offer unique to your business, to someone who has never worked on your business?
Think for yourself, that’s all I’m saying. Neil Patel blog posts can’t save you. Neither can mine.
My “landing page best practices” aren’t really best practices. They’re common practices, heuristics, and at best, principles. You’ll have wiggle room within each of these to make it your own.
- Clarity trumps persuasion
- Maintain advertising scent
- A picture is worth a thousand words
- An interactive module can be worth a thousand pictures
- Social proof works even if it’s obvious
- Visual cues, contrast, and affordance to create visual hierarchy
- Beware the false bottom
- Use Voice of Customer data to write copy
- “So what” and “prove it.”
Also, don’t add navigation links to your landing page. That’s a gimme.
1. Clarity trumps persuasion
At the end of the day, clear messages tend to work better than clever ones. But context trumps all.
In other words, if people come to your page expecting cleverness, then clever can win.
But usually, just go for clear. Say what you are. Speak your value proposition clearly and distinctly.
How do you tell if something is clear?
Most of the time, if you’re honest, you know.
Like, I work in this space and have no idea what the fuck it’s trying to say:
HubSpot does a good job of being clear while also adding a clever take on the “powerful and simple” matrix:
It’s an art form, but if someone has to think too hard to understand your message, it’s too clever and not clear enough.
2. Maintain advertising scent
What your landing page looks and sounds like should depend on where people were coming from before they arrived.
Did they come from a Google Ad? Facebook Ad? Search result?
What did that ad look, sound, and feel like?
Whatever the pre-click experience was like, the post-click experience (AKA your landing page) should maintain that “scent.” I.e. it shouldn’t feel jarring, like they landed in a totally foreign place.
Check this out.
I searched “robo advisor” and this was the ad copy:
And voila, the landing page copywriting reflects that same message:
Contrast this with a Facebook ad from Front, a unified messaging app.
“Your email is someone else’s problem.” Okay. I’m not sure I understand this, but it’s provocative, so I click. And the landing page:
Other than the video having mountains as well as the ad, it feels like I’m in a totally different place. No idea where the connection between the ad and the landing page is. I don’t see anything about email, or vacation (the messaging in the ad). The scent is lost.
3. A picture is worth a thousand words
People don’t read.
Well, they do. You do.
But even the best, most compelling, seductive copywriting can’t hold a candle to a good image. A picture is worth a thousand words, they say. And images do their best when complementing the language on the page.
What does a robo advisor look like? Oh, like this hero image:
Why’s it good? Shows product. And product looks simple and cool.
What does keto cereal look like? Magic Spoon shows you:
Cereal looks good. And colorful. Makes me want it. This is cool too because usually an online store will just use its product page as a landing page. This one actually uses a
Bad image? Look at Oracle:
Everything is bad about this landing page, but the image just gives me zero value.
Investing in high quality imagery is underrated in B2B. DTC brands do it really well. No matter what space you’re in, you should do it, too.
Side tip: human faces work well, especially when complementing the message of the page. CXL Institute features their instructor’s images up close and center:
4. An interactive module can be worth a thousand pictures
Images are amazing, but next level? Show someone the value of the product before they buy or sign up.
In B2B, product tours are becoming popular. Marketo offers one on their homepage:
They haven’t figured out freemium, so they have to beat HubSpot and others by at least giving people a shortened version of the product experience before they sign up. It’s what B2B buyers are expecting nowadays.
Interactive elements on a page like dynamic loading videos and GIFs also help sell the point (and provoke visual attention). Canva does that well here (it’s a screenshot, but trust me, it’s animated):
5. Social proof works even if it’s obvious
You can’t really have too much social proof. In many ways, it’s table stakes now.
Look at Moz. They use client logos:
Or Conductor, an SEO software competitor. They use G2 and other 3rd party review site charts:
Braze features usage numbers:
MarketerHire uses testimonials:
Show that other people (like your target customer) are also using and loving your product.
6. Visual cues, contrast, and affordance to create visual hierarchy
One of the simplest design principles to maximize conversion is color and text contrast. Look at how the headline as well as the signup form stand out here:
Contrast draws eyes towards what is important. Also, it makes it so important elements are actually findable. If someone can’t find a headline or CTA, it won’t assist in conversion.
Affordance is a cue as to what can be done with a given UI object. If there’s a slider, for instance, you can add micro-elements like shading, arrows, or micro-copy to incentivize users to flip through it. For example, there’s a pulsing blue border on the “create recipe” button here, which assumes it can and should be clicked:
Finally, using visual cues like human faces, arrows, and animations can help direct attention towards important elements. Neville Medhora does it well here on copywritingcourse.com:
7. Beware the false bottom
First off, try to put your important stuff above the fold. 1000s of heat maps have shown me that users drop off rapidly after the fold no matter what.
But if you do want users to scroll down for more information, make sure your page doesn’t have a “false bottom.”
Zapier has a false bottom (though they have amazing above the fold content):
Mapbox doesn’t (you can see imagery and motion just below the fold):
To know if this is a problem, use a tool like Hotjar or Fullstory to see what your scroll depth dropoff looks like.
8. Use Voice of Customer data to write landing page copy
It’s hard to give a concrete example here because I don’t have access to most companies’ voice of customer and qualitative data.
But when possible, try to steal the words from your customers’ mouths and use it in your landing page copy.
Jen Havice wrote an article for CXL that talked about mining VoC data to create this new revamped value proposition and landing page copy:
Used the actual words their target customers were using.
You’re trying to match the desires, expectations, and motivations your prospects have. What better way to do that than to use the words they’re already using to describe their problems and desires?
9. “So what” and “prove it.”
Look through your landing page and ask two questions for every claim you make:
- So what?
- Prove it!
The world’s best all in one gift? Prove it!
Vague claims like this can easily be backed up with statistics (# of MasterClass subscriptions bought last month) or testimonials.
“CRM, sales and marketing automation together in a smarter way.” So what?
Oh, they show me throw benefit-driven modules below that. Nice!
This audit method is great for stripping the fat and adding in persuasive elements.
One of my favorite examples comes from KlientBoost. They’ve got more case studies than other agencies have clients:
And they prove it! They have 600+ case studies. Wild.
A cautionary note on best practices, context, and experimentation
Our understanding of landing page best practices is evolving, and best practices are always, to some extent, going to be contextual. In fact, what works in 90% of cases can sometimes backfire entirely on your site.
So use best practices as a starting point, not the end of your journey. Build a page that you think does its purpose and is persuasive. And then optimize.
If this were a simple checklist, marketers would be out of a job. Be happy you get to think for yourself, too.
Conclusion
Creating a landing page is fairly simple nowadays because of the cheap and easy technology available. Build landing pages with ease.
What’s not easy? Creating high converting landing pages. What’s super difficult? Managing a catalog of hundreds or thousand of landing pages, ensuring they’re consistent and continually improving.
But that’s fodder for another article.
Now you know how to build a landing page (in Unbounce specifically) and you have some best practices. Go build one!