How I Learned to Stop Worrying and Love the Landing Page (and Their Best Practices)
Are your landing pages conversion machines, or bounce-rate rockets? No matter how valuable your content offer, or how well-crafted your ad copy is, it's your landing page that sits between you and new leads. That means that if your landing pages aren't optimized for conversion, they're basically wasting your company's marketing dollars. Landing pages have a lot of moving parts, like CTAs, forms, content, graphics, objectives, and more. So how do you balance the giant machine of a landing page and all of the "best practices" people are touting on the web?
That's why I'm writing this blog—so you can stop worrying and love the landing pages (and the leads they bring). I’ll cover landing pages and some basics of usability so you know more than the average John Doe, and you can puff up your chest, walk over to the designers, and tell them their landing pages aren’t up to snuff.
Here's everything you need to know about landing pages: from content, to form buttons, graphics, and more.
Get the downloadable guide to landing page best practices!
Table of Contents
What types of landing pages are there?
Landing Page "Best Practices" Breakdown
Landing Page Content Best Practices
Landing Page Forms Best Practices
Landing Page Buttons Best Practices
Landing Page Graphics Best Practices
Landing Pages 101
What is a landing page?
In Google Analytics, a landing page is any web page that a visitor lands on—either by typing the URL, or through a link. In marketing, however, we reserve this term for a standalone web page that serves a specific function—whether it be to lead visitors through to a specific page, or a page optimized for conversion.
What types of landing pages are there?
There are two main types of landing pages in marketing:
- Click-through Landing Pages
- Lead Generation Landing Pages
Click through landing pages are optimized web pages that lead you to a regular sales funnel, or shopping cart flow (in the case of ecommerce sites).
If you want to optimize your e-commerce sites for conversion, here are a few ways to do it.
Lead generation landing pages are used to capture website visitor data. Generally, this is done in exchange of useful eBooks, Guides, Checklists, or other valuable downloadable content.
In the example above, the landing page design is changed for different devices, which is good but not necessary. If your landing page designs have fewer page elements and no video, you might as well go for a responsive landing page.
[tweet= "If your landing page design has few page elements, and no video, go with a responsive page design over creating unique device page designs"]
All of Vendasta's Content Library Landing Pages are responsive with little to no difference on mobile and desktop browser.
Build your own website from scratch for clients with Website Builder in Vendasta's Marketplace!
Landing Page Workflow
Each type of landing page has its own workflow for how the user moved from the ad source to the landing page.
The workflow of a click-through landing page looks like this:
Search engine → AdWords SERP result → Landing Page
For a lead generation landing page, it looks like this:
Blog post → blog ad (text or image) → Landing Page
The Anatomy of a Landing Page
Every basic landing page has the same main elements to convert leads:
- Your logo
- The heading and leading line
- The main content, which can include feature and benefit points
- A clear, prominent CTA
- Qualifying content to build credibility such as:
- Brands/companies that use your product/service
- Testimonials from clients with company, title, author image, and quote
- Footer with copyright info, terms of service, and any other relevant footer notes
Landing Page "Best Practices" Breakdown
These principles for the web are equally valid from the simplest to the most complex enterprise web applications. This section will walk through the landing page best practices for content structure, forms, buttons, and graphics.
Landing Page Content Best Practices
Content on lead generating landing pages should not be centered around organic search position, as that's not generally where you're generating traffic from. People will most likely land on the landing page via an ad campaign or via links (through a blog or an email campaign).
If your lead-generating landing page does well on the SERP, then good, leave it at that, but the primary purpose of the content is to gain the attention of the page visitors and persuade them to perform a certain desired action. A desired action may be something like: downloading content like a product pricing guide, a camera specification sheet, a social media checklist, or even a CTA to call the store for their new offers.
Good content writing is subjective, but there is a structural breakdown to judge content, especially on the landing page or web.
Content Chunking
Content Chunking is a practice of breaking long piece of content into easy-to-read, shorter paragraphs. Not only does this make content aesthetically pleasing, but it also improves content comprehension, and as a result its increases its memorability.
If you do need to include a lot of information on your landing pages, break it into paragraphs, and mix it up with bullet points and visuals. Make your information easily digestible by readers!
This blog post is also content chunked with subheadings and visuals.
Glanceability
Don’t count on people to read each word on the web—what they really do is scan the page for information, and quickly glance at the keywords and selective sentences. Don’t argue with me on this, I can just throw research after research at you on how people really digest the content on web pages.
People don’t read, which is another reason why clickbait-y articles get more shares (people just skim and just share if they even open the post).
Reading content on a screen/display is not same as it is on paper (even though people, like myself, are guilty of bragging about not buying physical books ever since the Kindle and iPad came out). There is eye fatigue and over a hundred other things trying to catch our attention on the interweb. So plan your landing page content to be easily skimmable, and lazy-reader friendly.
Q. How do you make content more skimmable?
A. Use highlighted or bold keywords, sub headings, bullet lists, and limit your ideas per paragraph!
[clickToTweet tweet="Highlighted/bold keywords, sub headings, bullet lists, and one idea per paragraph makes your content more digestible!" quote="Highlighted/bold keywords, sub headings, bullet lists, and one idea per paragraph makes your content more digestible!"]
Inverted Pyramid Style of Writing
The inverted pyramid style of writing is a term used largely in journalism to illustrate how information should be relayed and prioritized in your content. In this style, you disclose the basics of your entire content piece in the intro, and then delve into the important details, followed by other general and background information.
To give you a simple analogy, it is like calling 911. First, you would report that you witnessed a robbery, and then follow that up with gradually disclosing the details of the event.
This applies not only to landing pages but content on the web in general. Marketers don’t like to hear this, but people don’t have time to read every blog post they come across. So they simply choose one that is informative, faster to skim, and that answers their query and gives them talking points. That's exactly why the inverted pyramid style has transferred so well and easily from the world of journalism to the familiar and similar world of content writing.
No matter how important you think your content piece is, it could be competing with Youtube, Netflix, and other time-sucking platforms for the user's' attention. So it wouldn’t hurt to give the summary in the beginning so that they can see if the landing page or blog post is what they want to read about.
Voice of the Customer
The Voice of the Customer strategy, or "persona-driven content" strategy, refers to using the exact words and language your users use themselves. This makes your content more in line with what your audience is looking for, and they will more easily relate to the content you present them with. This is almost a no brainer, but it's a very important step in content writing that helps to build trust, and eventually, persuade users to interact with the landing page.
I like reading concise web copy that summarises the sentences without using any cushion claims, fluff, devoid of marketese and exclamation marks. Exclamation marks are like your Puerto Rico travel photos on my facebook feed, I will smile like I care, but I don’t. I have other things to worry about like finishing this blog post. Plus, your Puerto Rico photos suck, buy a better camera!
Imagine copy as Conor Mcgregor’s jab: precisely on point and sends the message.
Landing Page Forms Best Practices
When you are giving away free information to your target audience, forms are the only (non-1984-ian or non-Orwellian way) to grab the user data. Gate your content to get leads!
Landing page forms can often get overlooked when building landing pages. Not all forms are created equal, which is a very cliche phrase, but holds true. Depending on what layout you choose for your forms, you can affect the speed with which it is read, and the amount of cognitive load it puts on your website visitors mind.
Hint: the less cognitive load, the better!
Types of Landing Page Forms
Anatomy of a Landing Page Form
Every landing page form has a few key elements:
- Form title
- Labels
- Placeholder text
- Input fields
- Text area or message box
- Conversion buttons/CTA
Form-related best practices come from a variety of eye tracking studies, in which researchers use high frequency/fast cameras to track web page viewers' eyes. If you read the studies, you'll see that forms that make your eyes wander less are read faster.
Never get too fancy with the design of the form. The reason for that is that our brain recognizes shapes and structures faster than we do consciously. So have the form elements well spaced and aligned properly, but not add any unnecessary designed elements, as it will slow users down.
Landing Page Buttons Best Practices
Buttons can make or break a landing page experience for users. A lot of designers/developers, even myself, are guilty of getting buttons wrong (making it too wide, too short, etc).
Some user testing I did for designing an iOS app few years ago made me realize how important visual styling of the buttons is on in landing pages, web pages, and also in user interfaces.
In a lot of places when there are too many things on a screen, buttons just look like graphics and disappear into the page. For this reason, buttons should look like the buttons people have seen before.
This is similar to sink taps in hotels that look like something out of HR Giger’s imagination. They make you think a little more to figure how they work. People are not going anywhere out of that hotel, but on web page they will just go back or close the tab. Don’t reinvent buttons, please.
[clickToTweet tweet="Don't reinvent the button on your landing page! The more a button looks like a button, the more people will click." quote="Don't reinvent the button on your landing page! The more a button looks like a button, the more people will click."]
Have Button: Will Click
My User Interface motto is: "If it looks like a button, it will get clicked." So please never make anything else on that page look like a button. Try to just have one button or main Call-To-Action.
There might be cases when you do have to even use three CTA buttons for equally important and related actions. When you do, don't be happy about the heatmap or conversion rate data on all the buttons as hot. I am saying that if there is a button, it will clicked, get regardless of where it is on the page. And maybe if there was one button and two links, you might have seen larger clicks on button than other two combined.
F-Pattern Button Placement
Eye Tracking studies have shown people scan web page in F–Pattern, so if you want to make pages efficient, place the button in those places. That is why we use forms on top right and bottom left of our pages. This is a very common pattern, we see that on Amazon, GAP, or Apple.com.
Check out the tracking studies yourself to better understand how to write content and place CTAs that convert!
As for the copy of the call-to-action, it should be effortless. Just say what the visitor will get once they press the button. The less the user has to use their brain to figure out what the CTA is telling them to do, the better.
Landing Page Graphics Best Practices
Graphics are important only to the point that if people remember that the site they visited had a photo of a propeller plane or a Boeing 777. The simpler the image, the better it is at conveying the message. By simpler, I mean the subject of the photo should be isolated from background and clearly in focus.
Best practices with graphics are better shown than told, so check out these examples.
While these graphics aren't all landing page-specific, they are hyper-relevant to what works with web imagery.
Limit Competing Elements
Clarity in graphics/imagery is really important. If there are too many competing elements in the graphic or image, then don’t use it. If you look at photography or photojournalism magazines, most of the award-winning photographs are ones where the subject is either isolated visually from the elements within photograph, or framed by the elements inside them.
Keep it Simple!
Keep your graphics clear and focused, and opt for simplicity over complexity to help convey your message.
TL;DR Landing Pages Best Practices Summary
- Two types of Landing Pages – Click through and Lead Generation
- Anatomy of LP – Header, Form box, FABs, Credibility builders(Logos or Testimonials)
- Information Matrix for Landing Page – How information dense do you want it to be?
- Content / Copy
- Content Chunking – Divide long paragraphs into small paragraphs, and have one core idea per paragraph. It helps in memorability, and improves comprehension
- Glanceability – Design content to be skimmed not read. Use highlighted or bold keywords, sub headings, bullet lists, limiting ideas per paragraph.
- Inverted pyramid style of writing – Start your content with what you want to tell the people.
- Voice of the customer – Use the language your target audience uses.
- Forms
- Form structure matters a lot. Form design that makes your eyes wander less are faster to read. See my examples.
- Element alignment — Keep elements aligned properly and well spaced, but keep it simple.
- Buttons
- F–Pattern – Imagine an F shape over layed on your web page that the movement most people have while looking at a new page on their browser.
- Simple words – convey the result, don’t make users think
- Graphics
- Keep them simple, use images that have minimal elements and isolate the subject from the background.
- Stop using parallax. Or keep using them, it will only make us look better.
- Bonus: For landing page optimization I recommend doing A/B Testing. Change Landing Page Headings, keep the button simple and same as the control. Unless the button copy is weird or not clearly visible on the page, it is least likely to be that button.