How To Make The Highest Converting Landing Page + Examples (2018)


If you’re an performance marketer in 2018 and don’t know how to make a landing page…..

…then your chances of seeing a successful campaign are very slim.

This isn’t a “best practices” blog post…

The truth is, once something becomes “best practice,” it tends to lose its competitive advantage as more people implement it.

Online marketing is all about competitive advantages.

A landing page is your chance as a marketer to gain that advantage.

It’s incredible how many large companies I see on a daily basis spending massive amounts of money sending traffic to their….

..Homepage

Then ask me, “why doesn’t this campaign work!?!!”

Linking to your homepage and sending traffic to it may have worked a few years ago.

But

Times have changed…

This technique can work for branding campaigns.

It should never be used for performance-based campaigns.

So before we get into how to make a kick-ass landing page…

Let me first answer the question…

What Are Landing Pages?

A landing page is a custom page build specifically for the interests of your target visitor. Having a particular landing page allows you to tailor the experience and provide the visitor with exactly the information they’re seeking. This also lets you more easily direct that specific visitor to perform the action you want them to take. Landing pages help improve the experience for the user, which will result in boosted conversions and, in some cases, lower ad costs.

Types of Landing Page

There are two basic types of landing pages – “pre-landers” and Lead Generation pages, also known as lead gen or lead capture pages.

Pre-Landers

A pre-lander, just as it sounds, is a landing page seen before the actual offer. The pre-lander helps warm up the visitor to your offer, so they’re more likely to convert by the time they finally click through.

Lead Generation Landers

Lead gen pages, on the other hand, are used to capture information about the visitor. This information will then allow you to market to and connect with the prospects at a subsequent time. There are many uses for lead gen landing pages, but they’re generally used when a larger product or service is being sold.

Landing Page Research

Before you open up your favorite text editor or landing page creator, you must first do some due diligence.

Determine Your Landing Page Goal

In a perfect world, every visitor would turn into a conversion.

Even though this isn’t the reality, we can build our pages to encourage a vast majority of them to convert.

To do this, we must first identify exactly what it is we want them to do.

This could be as simple as entering their email, downloading an eBook, or even making a purchase.

High converting opt in landing page

In this example, my landing page goal is to collect emails in exchange for downloading my campaign launch checklist. Visitors are given two options – download the list, or lose money… and no one wants to lose money.

The goal of your landing page will be to have your visitor complete one very precise action.

To do this, we must remove any resistance they may face while achieving our desired action.

Our marketing goal must be precise and speak to our audience directly.

To do this, we must understand exactly who our audience is.

Identify Your Audience

Everyone is different – we all have different hopes, dreams, and aspirations.

The better you understand your audience’s needs, wants, and current problems – the more success you’ll have.

Our job as marketers is not to “sell” our products or services. It is to move our visitors from a “current” state to our desired “after” state.

no salesmen, cold callers or canvassersImage Source

Currently, our potential customers might feel bored, frightened, in pain, or simply unhappy.

It is our job to identify what pain points our visitors are facing and give them get a taste of what the “after” state can be like.

Once they acquire your product or service, life is better. They’re now entertained, unafraid, no longer in pain, and happy. The “after” state has been achieved, and their life is better.

If your landing page can properly make your visitors visualize how much better life is after they consume your offer… A successful conversion will have been made, lives are improved, and you make money.

landing page buyer persona examples

To answer these questions, we use prospective buyer personas to identify pain points.

Prospective buyer personas are very much like buyer personas. However, assuming we don’t have any current buyers, we must build what I call “prospective buyer personas.” These personas will allow you to strategically target specific groups of people, without existing buyer data, in order to test whether or not they turn into buyers.

Learn more about buyer personas

Traffic Matters

Depending on where you plan on getting traffic, your landing page can greatly change the dynamics of the campaign.

For example, if we were buying search traffic from Google for the keyword “Buy XYZ,” we know they’re more likely ready to purchase the item and are at, or close to, the final step of the purchase funnel.

purchase funnel preference and purchase

Since we know the visitor’s intent in this scenario, it makes sense to have our landing page focused on the ability of comparison.

This may mean comparing our product to other competitors, or perhaps even comparing different models that we offer.

Our landing page would also likely feature more reviews or testimonials about the product from previous customers.

Meanwhile…

If the traffic is coming from a display or social source, we don’t know if the visitor is ready to purchase just yet. They’re more likely in the “awareness” stage of the purchase funnel rather than the buying stage.

Our landing page, in this case, should introduce to the visitor, for the (potentially) first time, how our product or service could benefit them.

Take Away: The source of your traffic informs you on potential visitor behavior, and this should drastically change your landing page’s design and offerings.

Learn From Your Competition

Find your largest competitors and go through their funnels.

Take note of their marketing messaging, placement of various trust factors, calls to action, and style.

  • Do they have a lead magnet? – e.g. 7 Carrots For Lead Capture
  • What information do they capture about the user?
  • How do they re-attract or message to exit traffic? e.g. New lead magnet, coupon code, etc.
  • Are they using dynamic call-outs to capture the user’s attention?
  • What color scheme are they using? Generic or “trust colors” (more on this later)?

Duplicate their landing page as much as possible without just ripping it.

Pro Tip: Personally, I’ll take the top 3 or 4 competitor landing page styles and split test all of them.

By starting with a landing page very similar to your proven competition, it will give you a baseline of conversion rates. So you can split test against it to see if it is performing better or worse.

Tools that can help you with competitive research are:

WhatRunsWhere
MobileAdScout
Moat
Adplexity

Be sure to modify your marketing messaging to fit your goals.

Take Away: Ask yourself, who am I competing against, what are they doing correctly and what can I do to copy their success?

Trustworthiness

Now a lot of marketers get this part wrong…

Trust signs don’t always just mean adding a Norton security logo to your site.

Trustworthiness comes from familiarity with something, even if they don’t realize it.

Smart marketers use this to their advantage.

Put simply – make your landing page “familiar” to them by designing the landing page based on what the visitor is familiar with using on a daily basis.

Need a hint?

landing page research

Don’t know what color to make your landing page?

I would start with a blue, green & white landing page as a baseline.

Why?
You figure it out…

Keep The Flow The Same

How many times have you clicked on an ad only to be shown something entirely different than what was promised?

ppc ad

So in the ad above, we have a Luxury All-Inclusive Surf Resort for $2490.

Sounds great right?

Well

When we click the ad we land on this landing page:

kalon landing page

Now as you can see, this page has a ton of problems.

At first glance, you wouldn’t be able to tell that this is a surfing resort what so ever.

15% of the page has gone to showing us a brand who, honestly, we don’t care about yet.

Their hero image is of a pool rather than people surfing, and there is no call to action above the fold.

Finally, somehow the price went from $2490 to $2740 – quite the increase in such a short time.

The point is, this landing page isn’t effective at all, and chances are if you were looking for a surf resort, you would have left this page in a hurry.

bound landing page

This is another landing page I found for the same term.

You very quickly know what this page is about and therefore, it would be much more likely to convert.

The landing page matches exactly what the user is looking for.

It can still have A LOT of improvements, but it was the best I could find for that search term.

Display Advertising

In display advertising, keeping the flow looking the same is crucial.

Now this is not the be-all end-all, but if your landing page is brown, and your banner ad is blue, the visitor will fill a bit disconnected.

Try to keep your creatives matching each other as closely as possible.

  • Make the color of the banner and the landing page the same
  • Use the same image on the banner and landing page
  • Keep pricing, discounts or any other marketing messaging the same - E.g. “$2490 Surf Lessons” on the banner should have the same headline on the landing page.

Landing Pages Builders & Tools

Now that we have done our research and have a good idea of what we’re currently going to offer, it’s time to start building our lander.

Depending on the complexity of your landing page, you may need the help of a developer.

However…

For those that don’t know basic coding, but are the do-it-yourself type, there are quite helpful tools:

Personally I use Leadpages for quick clean landers & hand code more complicated variants. To check out a lander I made in Leadpages, check out my free checklist.

leadpages landing page

I could go into detail on how to build landing pages in these tools….

But to be honest, the psychology and understanding of the purpose of landing pages is far more important.

If you know basic HTML/CSS, you’ll be able to get most landing pages working.

All you have to do is “View Source” in your browser to take a look at your competitors code.

There are also other resources such as GitHub, where a lot of codes are given out for free.

Finally, be sure to check out my post on landing page code to improve your ROI.

Currently using WordPress for your landing pages? Checkout ThriveThemes

Landing Page Examples

There are several great landing pages out there that in theory should convert very well.

Now obviously I don’t have access to the analytics on these pages, but from a creative and psychology standpoint they’re doing all the right things.

Lyft

The reason I love this landing page is that you can immediately tell what it is about.

Lyft has done an excellent job zeroing in on drivers looking to make money.

Hints “Make up to $35/hr Driving Your Car”.

The CTA is “Become A Driver” after applying now. If you have any doubts right below it, you can calculate how much you can make based on how many hours you drive and which city you’re located.

Lyft landing page

Codecademy

Now this page my look simple to some, but in most cases simple equals better.

You very quickly know what you’re going to get once you sign up.

If you’re looking to learn how to code you know what the page is about in 5 seconds & it’s “free” to boot.

The CTA is very simple – “Get Started!” after entering their information.

Also, those that need more convincing can scroll down the page and read testimonials from other students.

Finally, they have social proof at the bottom of the page – “Join over 25 million learners”.

Simple, clean & straight to the point.

codeacademy-landing-page

Shopify

Shopify is the “WordPress” of eCommerce.

Their landing page is very simple and collects a crucial piece of information as their first step, the user’s email. This allows them to market to the user even if they don’t fully complete their store.

If you visit this landing page, you know exactly what you’re doing within 5 seconds & your decision is reinforced with trust logos and the benefits of using Shopify.

shopify landing page

Pre-launch Checklist

If you’re like me…

A slow website bugs the hell out of you.

The only thing quick in that situation is me leaving.

Ironically I see A LOT of marketers drive traffic to extremely slow sites and wonder why it doesn’t work.

Now I know I always tell you to split test everything…

True…

But

A slow landing page vs. a fast landing page is not one of those things!

Now when I mention “speed” the actual loading time isn’t the only thing I’m referring too.

The other is how quickly people can identify what it is you’re offering.

There are several ways to test people’s reaction to your page, before running live traffic to it.

Making sure your landing pages is optimized as much as possible pre-launch is a step you don’t want to skip.

Especially since we not live in a multi-screen world.

Get Tested

Once your page is built, it’s very hard to QA test everything on your landing page. With all the various types of mobile devices, browsers and even operating systems tons of things can go wrong. To get some feedback about your landing pages even before launching, I suggest taking a look at UserTesting. It allows you to see visitors go through your landing page and make comments and complaints. Getting this kind of input before launching can save you a ton of money!

There are quite a few different tools available to help you QA test on multiple devices.

One of my favorites is CrossBrowserTesting.com

Screen Shot 2015-08-27 at 8.10.51 PM

It is very simple to use and allows you to load your landing page on actual devices.

This will allow you to quickly spot check your lander on primary devices such as:

  • Latest iPhone – Safari
  • Latest iPad – Safari
  • Latest Galaxy – Google Chrome
  • Mac OSX – Chrome, Safari & Firefox
  • Windows – IE, Chrome & Firefox

Attention Mac Users!

If you’re looking for a free option to test Apple devices & use a Mac, download Xcode.

After downloading Xcode open it, and go to preferences.

From there you’ll see a menu with an option for Downloads.

Be sure to download the latest iOS Simulators to be up to date with the current devices.

Screen Shot 2015-09-09 at 10.25.59 AM

Once you download the simulators right, click on the Xcode icon in your menu tray.

Go to > Open Developer Tool > iOS Simulator

Screen Shot 2015-09-09 at 10.28.47 AM

Xcode allows you to open an iOS simulator, which runs iOS directly on your Mac.

Screen Shot 2015-08-27 at 8.43.18 PM

So unlike other emulators the iOS simulator is just as good as testing your site on a real device.

Google Chrome Developer Tools

Another free option, but not as reliable, is Google Developer Tools.

To access Developer Tools open the Chrome Browser:

  • Ctrl+Shift+I (Windows)
  • Cmd+Opt+I on (Mac)

google-chrome-device

Click the icon where the red arrow is pointing to pull up device emulations in Google Chrome.

google-chrome-dev2

You can then select which device you want to emulate in the top bar shown above.

Get To The Point!

It is also extremely important, especially in mobile for your landing page to explain what you’re offering as quick as possible.  To see how your landing page fairs I suggest taking a look at Five Second Test.

fivesecondtest

Five Second Test allows people to visit your page and then tests them on what they think your landing page is about, after 5 seconds of viewing your page.

This may sound odd, but you’ll be surprised at what others think of your landing page & will allow you to make adjustments before launching.

Loading…

Be sure that your landing page is as quick as possible. Usually, people will give up just after 4 seconds.  Ideally you want your landing page to load with under a second.

Even then a 1-second delay in page load time yields:

  • 11% fewer page views
  • 16% decrease in customer satisfaction
  • 7% loss in conversions (Source: Aberdeen Group)

walmartImage source

Despite faster networks and devices, our latest research found that only 14% of the top 100 retail sites rendered feature content within this acceptable threshold.

Radware

Speed Matters

To test the current speed of your landing page I suggest using:
Pingdom Website Speed Test
pingdom

The quicker you can make your landing page load, the less click loss you’ll have.

It’s also a lot less likely that visitor will get fed up and leave.

Which will lead to more conversions!

Google PageSpeed Insights

One tool I don’t see used frequently enough is PageSpeed Insights.

Google has provided us with some pretty awesome tools to help us improve our sites and apps speed.

Why?

Quite simply a faster web benefits Google in every way, the more quickly people can access information the more search and banner clicks they can perform.

Screen Shot 2015-09-01 at 3.59.30 PM

As you can see, my site speed can use some improvement.

The power of PageSpeed Insights comes in the fact that you can download an optimized version of your page.

This is super helpful for those of you that are less technical and can’t take full advantage of what we’re about to get into.

How To Speed Up Your Lander

Enable Compression

Large pages with lot’s of images are almost always 500kb or more. As a result, they’re bulky and very slow to download.

To combat this, you should enable what is called compression.

Compression reduces the size of your page allowing them to be downloaded quicker. The most popular tool to used is called Gzip.

Most web servers today can compress your files in Gzip format before sending them to your visitors.

Yahoo, claims this can reduce download time by about 70%.

Other tools to use, depending on your server.

Enable Browser Caching

Caching allows your browser to Save a copy of images, stylesheets and javascript files to be used later.

The next time those resources are needed they will be loaded from the browser’s local storage.

Fewer server requests, faster-loading speeds.

Check out this great resource on HTTP Caching for a more technical answer.

Optimize Images

Usually, image heavy landing pages are also much larger in file size.

It is very important to be sure that you optimize the size, format and image attributes.

loading-xNot really loading anything

Image Format

  • Never use BMPs or TIFFs
  • GIFs should only be used for animated images
  • PNG is frequently used, but old browsers don’t support it.
  • JPEG is your best option.

Image Size

Large images take longer to load. So be sure to optimize each image the best you can.

Personally I use ImageOptim (Mac) to compress my images.

ImageOptm
For a full list of image editing tools check out this awesome post from CrazyEgg.

To optimize your images always be sure to:

  • Reduce color depth
  • Remove all image metadata & comments
  • Crop images to the exact size you need - I.E If you only need your images to be 300px wide be sure the original image is this size.

*WordPress users:* Try the WP Smush.it plugin to optimize your images right in WordPress.

Optimize CSS Delivery

To ensure your landing page is running at optimal performance, be sure to slim down your CSS as much as possible.

First check that CSS files your site is currently using: CSS Delivery Tool

It will tell you every style your website is currently using and how large each file is. To limit HTTP requests try to combine all your CSS into one style sheet.

css-combine

Avoid including CSS directly in your HTML code, known as inline styles.

stylesheet
Pro Tip: Inline styles between stylesheets stops parallel loading.

Content Delivery Network

I use CloudFlare on all of my content properties.

Screen Shot 2015-08-27 at 7.49.11 PM

CloudFlare is a free to use tool that helps both protect your site & speed it up.

It will take care of a lot of the things mentioned above and should always be at least your bare minimum of speed optimization.

*Be sure to test your site speed with and without CloudFlare. I have also noticed it slow some client websites down with Rocketloader and lazy loader for images.

If you haven’t figured it out yet, the speed of your site is VERY important.

Responsive Really The Best Option?

If you ask most designers, developers or even marketers what is the best way to design a landing page.

Many will tell you responsive web design (RWD) is the best way to build a site in todays mobile first world.

In reality though RWD isn’t your best option if speed and conversions are your concern.

The reason for this is, with RWD no matter that device the user is on all of the site files (CSS, Javascript, HTML, etc.) is loaded.

Regardless if your “responsive” site uses those files or not for that particular device.

This causes your landing pages to load files it doesn’t need thus making it load slower and wastes bandwidth.

The other issue with RWD is that your site may not look “great” on every device it loads on.

The Solution?

Building a separate landing page specifically for each device type and in some cases even device model.

Then by using PHP or .htaccess you can route the traffic to the proper page based on the UserAgent.

The example below shows a very basic way to route traffic based on if it’s an: iPod, iPad, iPhone or Android, and then any traffic that doesn’t match get’s sent to the responsive part of the site.

<pre class="brush: plain; title: ; notranslate" title=""><?php

if

function mobile() {
 $userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
 $accept = strtolower($_SERVER['HTTP_ACCEPT']);
 switch(true){
 case (strpos($userAgent, 'ipad') !== false):
header( 'Location: https://ppcmode.com/ipad' ) ;
 exit;
 case (strpos($userAgent, 'ipod') !== false):
header( 'Location: https://ppcmode.com/ipod' ) ;
exit;
 case (strpos($userAgent, 'iphone') !== false):
 header( 'Location: https://ppcmode.com/iphone' ) ;
exit;
 case (strpos($userAgent, 'android') !== false || strpos($userAgent, 'adr') !== false):
 header( 'Location: https://ppcmode.com/android' ) ;
exit;
 }
}
<?php } else { header( 'Location: https://ppcmode.com?' ) ;?>
 <?php } ?>

Another solution is setting up post click redirects from your front end tracker if you’re running one.

UnDelay

There is also a company called UnDelay that is working to tackle this very problem.

What is awesome about, UnDelay is it allows you to both build the landing pages with an easy to use interface and split test different variants at the device level!

It’s a perfect way to both save time with your landing page design, testing & speed.

Screen Shot 2015-09-09 at 11.54.56 AM

Cheap Hosting….

Finally, don’t let cheap web hosting fool you…

Unlimited isn’t truly unlimited…

As soon as you start getting any substantial amount of traffic, your site will start to have problems.

If you’re using shared hosting on a traditional host, you’ll get shut down without a warning.

You get what you pay for.

Is a $25-50 savings worth the potential loss of customers in the long term?

NO

Get yourself a nice VPS or dedicated server and your profits will benefit.

But if money is tough right now, then the only low-cost web host I recommend is NameHero cloud hosting.

Cloud Hosting

With new cloud hosting providers introducing new server stacks, the price of a high-speed server has been on a decline.

Get a dedicated cloud server for $28 a month.

The other great thing about cloud hosting is the ability to adjust a number of resources on the fly.

Perhaps when you’re first starting out, you don’t have much traffic…

Well, you can get a lower tier cloud package to begin with.

Then once you scale or go “viral” you can scale it to your needs without having to swap to a brand new host.

Just having a quicker landing page than your competitors is a huge advantage.

Quicker = Better

If you have had any other tips on how to speed up your landing pages, share them in the comments below.

Finally, if you know someone that would benefit from this article, please share it.

Blog Comments powered by Disqus.