Landing Pages Archives | Fetchprofits
The Anatomy Of Best Landing Page Design

The Anatomy Of Best Landing Page Design

Let me the clarify at the outset: Best landing page design for me is a design that brings in results. Anything more is welcome, but nothing less. Looks don’t matter. I don’t care about anything else except for the singular reason the landing page is being built for.

The trouble with digital marketing is that there are way too many things to do and to focus on. Each digital marketing channel commands a comprehensive 4-year training period (much like it is for medicine and engineering).

Yet, there are no secrets really.

As to why you don’t get the results you seek is because it’s just that someone executes it well enough and you don’t. Also, most people just don’t get it. 

I’ve already written about sales funnels and lead funnels. Since I’ve been focusing a lot on landing pages lately, I wanted to dissect, slice, and dice landing pages to at least provide a basic, must-have, you-are-a-fool-if-you-don’t-follow-through rules that landing pages are to be built with.

I mean, you don’t need experts to tell you these rules. You don’t need to pay someone a thousand dollars for something you could get from this single blog post.

You also have no more excuses to not do what you ought to do.

There’s just too many “opinions”, “whims”, and “preconceptions” doing the rounds with respect to a lot of things with digital marketing. But let’s focus on landing pages and get a few kinks ironed out, once and for all.

The Almighty Hero Section

The hero section is what your visitors see first. If you want to be very specific, it starts from left to right, and your visitors’ vision follows the “Z” pattern. Brandon Jones of TutsPlus already explained the Z pattern in great detail, and he puts it nicely, this way:

Z Pattern

The Z-Layout is a great way to start just about any web design project because it addresses the core requirements for any effective site: branding, hierarchy, structure, and call to action. While the classic “Z-Layout” isn’t going to be the perfect solution for each and every website out there, it’s certainly a layout that’s effective enough to warrant inclusion in any web designer’s arsenal of layout ideas.

And…

“The premise of the Z-Layout is actually pretty simple: super-impose the letter Z on the page. Place the items that you want the reader to see first along the top of the Z. The eye will naturally follow the path of the Z, so the goal is to place your “call to action” at the end”

because..

“Attaining a better grasp of how different layouts can change user behavior is one of the central principles of creating an effective user experience”

A Landing page then looks like this:

Z pattern example

In our case, it’s to do only “one thing” that you want visitors to do, and that’s to take action of some sort.

Instead of saying something vague like “…of some sort”, let’s cut the chase and come to the point: you only need to get your visitors’ email address.

You can do that by:

  • Giving a discount (if you are into e-commerce)
  • Letting users subscribe to get access to free samples (digital or physical) or even parts of your digital products (like first few chapters of your book, limited access to your membership site, first few video lessons of your online course, etc.
  • Giving away a lead magnet (like a guide, an eBook, a checklist, a secret something.)

That’s it. The hero section of your landing page is built for a purpose. That purpose is to get people to signup.

To do this effectively, you’d need to ensure that you:

  • Do not have anything that distracts and sits on the top of the landing page (or anywhere else)
  • Have No navigation menus
  • Place No social media buttons
  • Place No other clickable links
  • Put anything on the page that makes no sense

There are no ifs and buts here. I don’t care about what “you” want to put on the hero section.

This is all there for a reason, and that reason is to get you leads and email subscribers.

Now, let’s dig further:

Note: every single decision made for your landing pages should be based on data; not what you think is right. You get this data by letting traffic come through and by doing A/B testing

On the front of Hero section: Image or no image?

The only kind of images on your landing page (especially on the forefront of the page) have to be those that pertain to the exact thing you are giving away on your landing page

  • A snapshot of the cover page of your eBook
  • An Intro video that nudges your visitors to sign up
  • Your own photo (if it’s done professionally, and I hope you are smiling)

If there’s no such image, don’t use any. In my case, I didn’t have any image to put up here since this a pre-launch landing page (and there’s nothing there to offer).

Hero Section Plain

Background image or no background image

You have a bit of a leeway here, with the background image (unlike any images you might put on the forefront).

Again, it’s only a matter of choice, but the ground rules for the background images are as follows:

  • Whether or not you should include a background image is something you can find out with A/B testing.
  • If you have to use a background image, use one but add an overlay on it – don’t put a background image without an overlay (dark is good)
  • Get an image from Pexels.com or Unsplash and make it as close and relevant to your business niche, the offer you are making, or your brand.
  • Background videos are even better if you can get one. Again, videos work better as backgrounds or images? The answer lies in A/B testing.

I thought this hero section with people lining up makes some sense (but I have to test this).

Hero With Background

Headings, Sub-headings, & Calls to Action

The action center, as I like to call it, has all the good stuff that actually matters: your heading, the sub-heading, and the copy.

Then, you’d have the Calls to action (which could be a form to get email subscribers to sign up or a button to have them click on – this has to go somewhere else).

Before you get anywhere near “The Action Center”, know this:

  • Think about what you want to offer before you even get close to building a landing page. Just don’t.
  • Keep the offer straightforward and simple. Don’t overthink it. It’s inexcusable if you take 4 weeks just to figure out what to offer.
  • If you want to learn how to make offers, download this free copy of The Irresistible Offer by Mark Joyner [Thanks to HubSpot]
  • One offer = one landing page. This rule is universal. Don’t offer people to signup to your free eBook, a sample video lesson, and also put a button there pointing to your store.

Once you get the decision about what to offer out of the way, all the copywriting rules apply here. As Joanna Wiebe writes, “cute and clever” doesn’t work as well as a simple, straightforward, and direct copy does, and only rookies write from scratch.

As Joanna Wiebe writes, “cute and clever” doesn’t work as well as a simple, straightforward, and direct copy does, and only rookies write from scratch.

Here’s an ultimate Guide to No-pain Copywriting by Joanna Wiebe

I’ll repeat myself: What’s cute and what’s not? Do funny headlines convert? This headline or that headline? This sub-heading or that one? This copy or that? This call to action or that? This offer or that offer?

The answer: A/B testing. See how some experiments led to some awesome results.

The Mid Section

See, I’ll be honest. For some landing pages, you don’t even need to get this far. For something as simple as a simple one-page PDF which happens to be a “Funnel Checklist” [I do have this as a giveaway], I don’t need mid sections and footers even.

Depending on your use case, you might just need one.

The mid section: Beyond the scroll…

If your visitors look past the hero section, it only means one thing: they need reassurance, clarity, more information, or all the three. That’s why this mid section exists on a landing page: to reassure, to provide clarity, and to provide more information (along with some other good stuff).

This is how a typical mid section looks like:

Mid section landing page

  • Keep it simple but try to provide more information (since the hero section might be too direct and doesn’t usually allow for more information)
  • Keep it clean. Use short blocks of content.
  • Don’t over do it — this isn’t your thesis paper. I also don’t care if you are Amazon and have you more than 1,00,000,000 products.

Strike Two. Your second Opportunity

Now, because visitors did scroll past the hero section of the landing page and they did take a gander at some more information (which could also have some social proof, testimonials, product images, or more such info).it’s also a great opportunity to “try” nudging your visitor once more.

It’s also a great opportunity to “try” nudging your visitor once more.

Somewhere there (preferably another section below the main section where you provide information), put up another call to action.

See how it’s done below:

Beyond scroll landing page

The rest of the page

There’s an ongoing debate (never dies) about long-form landing pages and short ones. I don’t care. The only “form” of

The only “form” of a page that matters to me is the one that converts and whether or not I have the opportunity to improve on those conversions.

So, if your page has to end here, let it end. If you want to, you can add bits of social proof, testimonials, or yet another call to action here.

Footer of the landing page

If not, just ignore it and end the landing page with a logo.

That’s it. That’s all that should be on your landing page.

The colors, graphics, images, actual blocks on the page, the length of the page, the number of sections, and the calls to action – all of these can be different for different businesses and for different reasons.

But the only thing that can’t vary so much is the variation in “thoughts and opinions” on what is basically so simple and straightforward.
In fact, there should be no place for emotions on the part of anyone building a landing page.

It’s another thing that you should employ awesome copywriting techniques, images, graphics, colors, and everything else on your landing page to invoke emotions (for your visitors).

You can’t have opinions about a landing page, but you build pages that others should have an opinion on (and it doesn’t matter if some people don’t like the page – and they still signup – you see?).

It’s also not about looks because there are butt ugly landing pages that convert like crazy.

How is your landing page shaping up?

If you need help with landing pages, I am going to launch a dedicated service only to help build, organize, optimize, and manage your landing pages & funnels.

Signup Now to get exclusive offers and discounts for subscribers only

Landing Page Design Mistakes: Are You Embarrassing Yourself?

Landing Page Design Mistakes: Are You Embarrassing Yourself?

You know what? If you are doing any Landing Page Design Mistakes, you are seriously embarrassing yourself. On top of that, you are losing out on opportunities while throwing marketing dollars down the drain.

Landing pages are the single most important element in your sales funnel. There’s just no point in sending traffic to a website – whether you do organic marketing or paid advertising.

Web site home pages are generic with tons of different things that call for a visitors’ attention. That’s why it’s no wonder that most visitors only “visit” and “do nothing.“

Things like conversion centered design, landing pages best design practices, and everything else you might read about landing pages is of no use if you don’t even have a landing page in the first place.

You need landing pages because they single-handedly pull your conversions through the roof. They have the potential to help visitors focus and take action on an offer you are making on your page.

It’s not rocket science; it’s just common sense.

Oh, you say you knew about the importance of landing pages already? Not so quick, Charlie.

Let’s traverse across continents, alright?

United States

Here’s proof that even a Top SEO agency doesn’t know a thing about conversions (=cash) except what they know (which is a fraction of what digital marketing is).

Percepture

Percepture is NYC’s Top SEO agency and their landing page is nothing more than a regular page on their website. When you land there, you see a run down of an explanation of what SEO is.

I mean, as if Moz and Google itself wasn’t enough for a quick download on what SEO is, where are all the goodies that a landing page must have?

United Kingdom & India

Spikeway

Although this page showed up on results on Google UK, Spikeway is the worst of the lot. A big wall of text on a section of the website where most eyes wander, a big navigation menu, a list of reasons why you should consider SpikeWay.

Let’s make it easier for you: They’ll never be able to design your websites or landing pages that’ll make a single dollar, ever.

India

Techshu is a “Digital Marketing Firm” — and look at their landing page (being used with Google AdWords)

Techshu
The navigation bar is an absolute no no. All those social links were tempting me to click and go find some peace.

And hello? “Submit” – say, submit what? My sanity? Peace? Freedom?

So, that’s just three results from a live search conducted on July 5th, 2017. Several years after the importance of landing pages were extolled. Plus, these three examples are from companies that promise you “results”.

As you can see, many businesses not using landing pages at all. If and when they do, they design landing pages like they design websites and that’s not serving any purpose. So, how do you make sure you are getting everything to do with landing pages right?

This is how:

Don’t depend on developers, ever

If you want landing pages developed by a web developer on HTML5 and CSS3, you are in trouble.

Most web developers don’t know a thing about conversion centered design. They follow the same design principles they are familiar with (related to regular website design) and they design landing pages similarly.

Plus, they take eons to design a single landing page. Are your campaigns going to wait on every single landing page, a couple of variants on the original page, and a grand total of 16 landing pages that you need?

Pamela Vaughan of HubSpot, while referring to a Marketing Benchmark report, writes that the more landing pages you have, the more leads you can generate. When the number of landing pages is increased from 10-15, businesses apparently see a whopping 55% increase in leads generated.

Number of Landing pages

Now, let’s see. Assuming the cheapest developer or designer you find designs a single landing page (and they don’t even supply copy) for $350. What are you spending in total for 10 landing pages? Did you just say $3500? Good luck with your ROI.

With tools like Unbounce, Wishpond, and LeadPages, you’d never need a developer. If you still do, I’d be curious to find out what the reasons are?

Severe Lack of design sense

Entrepreneurs have pride. Large companies have interns working on landing pages. No wonder you get some of the crappiest examples of landing pages from some of the biggest business brands on earth (with a few exceptions).

Sherice Jacob of KissMetrics actually pointed to some awful examples of landing pages that actually belong to some big name firms.

Here are a few:

hermes landing page

Hermes? With a landing page like this? Is that even a landing page? It looks like a badly design Pinterest board to me.

 

This one belongs to KeyShot 5. Whatever that meant, and if I didn’t know, this landing page isn’t helping either. Captcha? Like I had the patience and What do you do with all those form fields? Ever heard of form love, anyone?

Bad landing page example

Even shady marketers can do a better job than this one. You just had to believe that it was landing page designed by Chase. Yes, Chase. I’ll repeat: Chase.

 

Using Design Elements That Are Not Welcome

Let’s try a final rally cry, for the sake of every business out there:

  • No navigational menus on the landing page, ever.
  • Don’t experiment with fancy user flow options – like I want people to fill up the form and then another popup should show the e-commerce page.
  • No clickable links, images, or videos (with the exception of a single video on the hero section, if that video can do it).
  • No social buttons on the landing page (put social buttons on the thank you page, “after” a lead signs up.
  • No e-commerce, “buy now” buttons, and paywalls on landing pages (no one buys the moment they land on the page).
  • No sliders on a landing page.
  • No extra elements on a landing page unless those elements have some significant role to play.
  • No cheeky headlines and sub-headings. No clever copy. Simple works, even if you don’t like it.

Make this the last time you’d read this. Print it out. Put it up on your office walls. Take the list to bed with you.

No message matching landing pages

Let’s say you are promoting a discount of 30%, storewide. The ad should say 30%. The landing page should say 30%. The headlines, sub-headings, copy, and even the image – it should all be congruent.

Why? Because your users expect a uniform and consistent experience. You don’t want to surprise people while they suffer from a globally applicable short-attention span.

As the folks at Unbounce point it out, here’s an example of a good and a bad message match:

“An example of bad message match

Ad: Get 50% off a Dell Inspiron 9000

Landing page message: Welcome to Dave’s Computer Store

An example of good message match

Ad: Get 50% off a Dell Inspiron 9000

Landing page message: Get 50% off a Dell Inspiron 9000 at Dave’s Computer Store”

Not doing message matching is a sin. Period.

Not A/B Testing Pages

When the feature is built-in (depending on how you build your landing pages), what’s your excuse to not do A/B testing at all?

What’s with that height of laziness? I am sure money doesn’t grow on trees but regular A/B testing does help grow your business.

When you do A/B testing you put whims, fancy thoughts, preconceived notions, and judgments aside. You don’t let any kind of stupidity that we humans are blessed with fudge with our marketing results.

With A/B testing, you let data drive your decisions.

Here are some fantastic results from a few A/B tests, and if that doesn’t help, what will?

Please. Do yourself a favor and get your landing pages right. We have a variety of services that can help you better than all those big names that do a lousy job.

Save those marketing dollars, please?