How I Learned to Stop Worrying and Love the Landing Page (and Their Best Practices)

PS. I have seen Dr. Strangelove so obv. I am on a movie moral high ground rn

I’ll get straight to the point, nobody wants to read your blog post, landing page, product page, unless they are dying to use your product (trust me only your competitor(s) is(are) paying any attention to your website). And you don’t want to read my blog post. You are reading this because a) I sent it to you. b) You are stalking me, checking if I am legit, you doubter you. c) You stalking hater or d) You want your mind blown away.

I’ll drop more knowledge here than Tai Lopez, and I won’t make you signup for a $1000(1280 Canadian rubles for us) like Amy Porterfield. My knowledge on this was acquired while working in SaaS products for 8+ years. I’ll be referencing examples from over a dozen companies to support my points.

I made this post skimmable because I care about your time and usability. Go ahead swipe or scroll down, you will see what I am talking about.

1. Landing Pages 101

1.1 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.

1.2 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).

Examples:

Wistia Landing PageWistia Landing Page

PixelSnap Landing PagePixel Snap Landing Page with an Announcement Bar

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.

Workgroup DaVinci Landing PageWorkgroup DaVinci’s lead generation landing page

1.3 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:

Landing Page WorkflowLanding Page Workflow

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

1.4 The Anatomy of a Landing Page

Landing Page WorkflowLanding Page Anatomy

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

2. 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.

2.1 The Content

Content on lead generating landing pages should not be centered around getting a good 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.

2.1.1 Content Chunking

Content ChunkingContent needs to be chunked.

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.

2.1.2 Glanceability

Glanceable landing page contentCan I skim through your landing page in 5 seconds?

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!

2.1.3 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.

2.1.4 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.

2.2 Forms

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!

2.2.1 Types of Landing Page Forms

Different types of forms layoutForm Types

2.2.2 Anatomy of a Landing Page Form

Forms are made up of fields, labels, buttons etc.Form Anatomy

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.

2.3 Buttons

Buttons are always prominentButton on pesky web ads

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.

2.3.1 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.

2.3.2 F-Pattern Button Placement

Heatmap on landing pages

F-Pattern on Amazon product landing page

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.

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.

2.4 Graphics

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.

2.4.1 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.

2.4.2 Keep it Simple!

Keep your graphics clear and focused, and opt for simplicity over complexity to help convey your message.

TL;DR 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.