8 Popular Landing Page Designs: Which Types Work Best?

2

“I told you guys there would be blood, sweat, tears. I told you guys he was a hell of a fighter standing up — kinda shocked me.”

That quote comes from Floyd Mayweather, following his recent bout with Conor McGregor. Mayweather walked away from the fight with at least $100 million, while McGregor pocketed a mere $30 million.

Landing page designs Mayweather McGregor fight

Image via Esther Lin/Showtime

All kidding aside, the idea came to me: Designers and marketers are always debating what types of landing pages work best. Minimalist design? How much copy? Why not square landing page designs off in a series of fights?

So check out eight popular landing page design types, their pros and cons, how they compare, and what might happen if they duked it out in a ring.

Short-Form Landing Pages Vs. Long-Form Landing Pages

Tired of the never-ending debate between these two? I am. So, I’m putting the tension between these landing page types to rest. Once and for all.

Short-form landing pages work better for minor asks. That usually means an email address or small purchase.

For example, Michael Aagard found a Swedish gym chain boosted sales 11% with a shorter landing page:

Landing page designs A/B test example 

Image via ConversionXL

Note: 249 Swedish Krona equals about $31.

So when short-form and long-form landing pages square off, short-form pages win with smaller asks. However, depending on what you sell, you may not know what “small” means to your market. Test if you’re not sure.

Short-form delivers a surprisingly painful blow to the chest early into the match.

Conversion Rate Experts puts long-form landing pages to the forefront, as they helped Moz (then SEOmoz) generate an additional $1 million in yearly revenue with a long-form landing page.

To make it happen, they talked with paying Moz subscribers, free trial members, and paying members who canceled. They also spoke with Rand Fishkin, who explained how he sold in person with ease.

Eventually, they came up with a landing page, oh, about seven times or so longer than the original:

Landing page designs Moz longform landing page example 

Image via Conversion Rate Experts

…And long-form landing pages pop right back with an equally wicked counterpunch. In this case, the offer is software, which usually requires more commitment from the buyer, so they might want more information before making a decision. This is where longer landing pages shine.

Note that cost is not the only variable here. Sometimes even a free offer requires more context. WordStream tested short and long versions of the landing page for its AdWords Grader and found that the long version performed much better. This is a free tool, but in this case, prospects wanted more information before connecting their AdWords accounts – so the page is built out with plenty of info to build trust (like testimonials).

This harkens back to an important lesson from the legendary business book Built to Last by Jim Collins and his research team. The book compiles years of research that shows what companies who survive the test of time do versus those who fade into obscurity.

Great companies reject what was called the “Tyranny of the OR.” Instead, they embrace the “Genius of the AND,” which refers to their ability to incorporate two extreme dimensions into their operations simultaneously.

And this situation certainly demonstrates how that principle applies to short- and long-form landing pages. Vary the length of your landing page depending on the cost and/or complexity of your offer. (And always test.)

Video Landing Pages Vs. Static Landing Pages

What marketer doesn’t love those cool, auto-playing video backgrounds? By the way, here’s 50 for you to check out.

Hey, I love them too. But videos don’t make everyone happy.

In particular, B2B buyers do not care for video backgrounds. The 2015 B2B Web Usability Report found 33% say “automatic audio/video” is the most common reason they leave a website:

Landing page designs reasons why people leave websites 

Image via KoMarketing (PDF)

The same report later details how B2B buyers don’t like websites loaded with distractions. They want to focus, research, and learn so they can make a valuable business decision.

But you’ll notice, that doesn’t mean they don’t like video at all. The report didn’t include any data on video that doesn’t play automatically. Since it specifically mentions “video that plays automatically,” it’s safe to assume B2B buyers don’t mind video – as long as they have controls.

Automatically playing video backgrounds also don’t work when you need to make a complex sale, Unbounce found. Again, they distract. Specifically, they keep visitors from reading your above-the-fold messaging.

Shockingly, video backgrounds take a powerful blow between the eyes to begin the match.

So…do video backgrounds ever work?

Yes.

That same post from Unbounce found they do well when you want to communicate a certain feeling. For example, you want to invite people to a conference, performing arts event, or restaurant.

And what about when you have video that only plays with controls? It raises conversions dramatically.

Data from Kissmetrics reports:

  • Organizational housewares retailer Stacks And Stacks found consumers who watched video were 144% more likely to buy than those who didn’t.
  • Advance Auto Parts found instructional and how-to videos led to visitors staying on-site twice as long and visiting twice as many pages as those who didn’t watch videos.

Video lands a flurry of quick jabs.

But what about plain ol’ static web pages? Why would you use those, without any video at all?

LeadPages published a test run by Gary and James Michaels from StrategicShape.com  to find out. The offer was a song download, and one version of the landing page included the music video of the song:

Landing page designs split test example video landing page 

Image via LeadPages

At the conclusion of the test, the version without the video outperformed the version with video by 23.84%.

Why? A few possibilities:

  1. The version without the video created more mystery
  2. The removal of the video made the page shorter and simpler
  3. The music video wasn’t motivating enough to win more conversions

You always have to test. But as above, consider using video landing pages (ideally, not auto-playing video) to provide context for products and to form an emotional connection with your prospects.

Flat Design Vs. Old-School Landing Pages

Flat landing page design, which you may also call “minimalist” or “modern” design, is the trend nowadays.

But it’s not a guaranteed approach. And some marketers generate astounding success with the old-school, hypey, infomercial-type landing page.

One example of the latter comes from nationally renowned copywriter Bob Bly:

Landing page designs bad page example 

Image via Bob Bly

Ick! Doesn’t it make the marketer in you cringe? Or maybe you suddenly feel sick…

But here’s the thing: Bob attests to making more than $600,000 per year as a copywriter. And all his landing pages have this old-school, infomercial-looking approach. He certainly wouldn’t consistently use it if he found a different approach that works better.

He may use this approach because he sells to current and aspiring copywriters. They work similarly to a B2C audience.

They don’t need a gorgeous design. He has one opportunity to make the sale. So, he has to use an attention-getting headline, and clear copy that commands 100% focus on the message. Further down the page, he describes in explicit detail what you get, asks for your order three times, and offers several dozen testimonials.

It’s clear he wants you to buy now.

And Bob’s not the only master marketer who does this. Leading email marketer Ben Settle uses a similar approach to sell his “Email Players” course that teaches you how to sell through email (at $97 per month, no less):

Landing page designs bad page example 

Image via Ben Settle

Amazing! The old-school, infomercial approach knocks flat design to the mat in the beginning of the first round.

Can modern flat design get up and come back?

It can. And does.

Just for reference, a prototypical flat landing page looks something like this:

 Landing page designs flat landing page example

Image via Webydo

You notice the bright colors, minimalistic text, large amount of white space, and lack of 2D objects trying to appear 3D.

Nice. Simple. Clean. Not pushy or salesy at all.

When do flat landing page designs make sense?

For starters, web users see them all the time. That means you meet your visitors’ expectations immediately. You won’t baffle them somewhat at first, like you might with an old-school approach.

Flat design doesn’t encourage you to use a high-pressure, order-now-or-its-gone-forever sales approach. It’s a more natural fit with today’s focus on earning trust and building relationships.

So flat design pulls itself off the mat and hammers its way back into the fight.

Again, you have to consider your audience (hip millennials? Or baby boomers?) and possibly test both approaches.

Homepage Vs. Lead Capture (AKA “Squeeze”) Page

Please, please, please… do yourself a favor and never ever, under any circumstances, use your homepage as a landing page for your marketing campaign.

Yes, visitors land on your homepage. And yes, it’s the most visited page on your website.

But you don’t use a single, specific campaign to drive traffic to your home page. Instead, your home page gets traffic from many sources, so the page needs to be flexible to address a range of possible visitor needs. This usually means that there are multiple calls to action (CTAs), giving the visitor options.

Let’s take a look at some homepage examples from leading companies, because you know they’ve done extensive testing to optimize their homepage conversion rates:

HubSpot

Landing page designs HubSpot squeeze page example 

HubSpot has three CTAs above-the-fold. Two direct you to use their platform. One sends you to a four-day live video event.

Three other CTAs come later on the page. Each describes a leading feature of HubSpot, and the benefits of those features.

A final CTA comes at the end of the page. And it again directs you to start using their software.

That’s a total of 6(!) CTAs.

Brian Dean, Backlinko

 Landing page designs Backlinko example

Brian Dean runs a much different business type than multibillion-dollar HubSpot.

He uses his personal brand to do one thing: grow his list. I’m not sure of the exact size. But it’s at least 100,000, and I believe several times that size. That makes it one of the largest lists in his niche (SEO).

If you’re on his list, like me, you know he sells courses.

So, he uses an approach with just a single CTA that asks you to join his list.

Unbounce

Landing page designs Unbounce example 

Unbounce has a unique approach. One I admittedly haven’t seen on a homepage anywhere else.

They have two clear CTAs above-the-fold. However, they don’t put the obvious one under the main marketing message.

Rather, it’s clear they want you to sign up for a free trial because that’s the more noticeable of the two buttons.

The overall approach is sensible. They allow visitors who aren’t ready for a free trial to get to know Unbounce better, and why they’d like to use it, before starting a free trial. And for those who know they’re ready, they can do that now too.

Why they don’t switch the two CTAs so the free trial button is in the center of the screen…I don’t know. But testing must have revealed this approach results in more or higher-quality conversions.

By the way, the whole page has three CTAs, with the final one showing you the pricing plans.

Conversion XL

 Landing page designs ConversionXL example

Conversion XL has a unique approach on their homepage too. With four CTAs above the fold, they have the most of any homepage you’ve seen so far.

Plus, not a single one uses a button. They’re all links. Two more CTAs follow later on down the page, asking you to subscribe to their newsletter and see the upcoming courses.

That’s a total of six CTAs on the homepage.

While the approaches vary, these homepages:

  • Differentiate the business from the competition
  • Share the top benefits available
  • Have varying asks of different sizes

…Homepages come out swinging and draw first blood.

But now, compare homepages to squeeze pages. With these, you create a specific campaign to drive a precisely defined customer to a landing page with a single ask.

You know all your traffic sources, so you can deliver the same targeted messaging to each visitor.

If you’re B2C, you collect contact information so you can continue to build your relationship and list. In B2B, squeeze pages can be used to build lists. But more commonly, they get used to qualify the lead so they can be handed over to sales (or not).

Brian Dean’s homepage actually works well as a squeeze page because that’s the only CTA. Check out this squeeze page to learn a little more:

 Landing page designs GQ magazine example

Image via Instapage

Big brands many times do an awful job in their online marketing. But GQ is not one of them. This squeeze page works because it:

  • Asks for minimal information - just an email – which makes signing up quick and painless
  • Slips in a little humor, which goes a long way
  • Has a spot-on marketing message men can relate to
  • Uses Zach Galifianakis’ star power
  • Shows an abundantly obvious CTA button

And compare that to this B2B lead capture page by Salesforce:

Landing page designs Salesforce example 

Image via Salesforce

Clearly, with the amount of information they require to get the freebie (a white paper), Salesforce wants to qualify leads. If the B2B buyer doesn’t have time to fill out the form, then they likely won’t make a good customer later on anyway.

Using the information entered, sales can make educated decisions on how to follow-up with the lead next.

While the homepages drew first blood, squeeze pages crack them square in the nose in return. Both then counterpunch each other at exactly the same moment, falling to the mat for a knockout at precisely the same time.

Your Landing Page Design Should Consider Your Goals and Your Sales Cycle

Four ties (“It depends”)? Maybe that’s not the drama you hoped for.

But it’s the truth about landing page designs. No single approach is ALWAYS “better” than any other. Each works better in different circumstances.

You have to choose the right approach based on your business goals, the preferences of your market, and your visitors’ stage in the sales cycle.

To discover those, you have to ask yourself questions like:

  • What do you really want your visitors to do?
  • What are they thinking the moment they hit your landing page?
  • What are your audience’s psychographics?
  • What step did they previously take, before hitting the page?

How can you get answers to these questions if you don’t already know?

  • Can you examine competitor landing pages for clues?
  • Could you survey or call customers?

Look, creating a high-converting landing page isn’t easy. But it does boil down to simply testing and retesting approaches until you’re happy with your conversion rate.

For now, you’re armed with some of the leading types of landing pages, and you can figure out which design makes most sense for you.

About the author

As a freelance copywriter, Dan Stelter crafts persuasive lead-generating content for B2B software, SaaS, and service companies, earning him the moniker “The B2B Lead Gen Guy.” When you don’t find Dan helping B2Bs swipe more market share from competitors, you will find him reliving the good ol’ days of The Simpsons.

Find out how you're REALLY doing in AdWords!

Watch the video below on our Free AdWords Grader:

Visit the AdWords Grader.

Comments

HARSH MITTAL
Sep 25, 2017

Its really amazing blog with very much helpful information, thank you so much for writing this great blog here for us.

REENA THAKUR
Sep 26, 2017

Its really amazing blog with very much helpful information, thank you so much for writing this great blog here for us.

Leave a comment