1. Blog

How to design result oriented landing and funnel pages in HTML

I’ve put the best practices/guidelines together for creating a landing page (especially for startups) in something that I call The Absolute Beginner’s Landing Page Recipe. Here goes:

1. Do your research

Since we’re talking foundations, I have to tell you that you cannot possibly build a well-converting landing page without prior research. You have to determine who your target audience is and research them.

All this starts with “Who?”, not “What?”.

“Who are you selling to?”, not “What are you going to market?”

Research will help you:

learn the language of your customer so that you can write copy that resonates with them. This is important because people buy products for emotional reasons. Your potential customers are much more likely to buy from you, if they can relate to the text on your landing page. And this can only happen if you speak their language.
Find out what they are worried about or what they are angry about, what makes them look for products like yours. You can use this information to convince them to buy/take action.
Find out what they dream about and promise it to them. This way you won’t have to sit around wondering what your potential customers would actually want. You will know.
I’ve written more about doing a very basic market research here:http://sansmagi.cc/startup-landi…

2. Attract attention

The first message that you send with your landing page, the first impression of people about your product, company and service is formed in the first 8-10 seconds.

And the first impression has to be that this landing page is about something that can help your potential customers.

That’s what will make them pay attention.

It’s the job of your headline + subheadline + hero image to grab the visitor’s attention in the first few seconds of visiting your landing page.

For example, here’s Unbounce’s landing page that manages to give you quite a lot of information and benefits of using their app in as much as 10 seconds:

But getting attention is the easy peasy bit.

3. Spike interest

After you’ve got their attention, you want to spike interest.

The problem is that people don’t read on the internet, they scan. So, they won’t start reading your copy word for word even if you managed to get their attention.

To get a better overview, your website visitors will likely scroll and scan the page.

To spike their interest and make them read in more detail about your offer, you have to make your landing page scan-friendly.

Here’s what people notice while scanning:

Bolded/italicized text
Bullet points
The bottom line (last sentence, P.S., last call to action)
Put your main benefits in these positions.

4. Pique desire

If you manage to get people’s interest while they are merely glimpsing at your landing page, the next thing you want to do is make them want to get your product. You have to explain exactly how you help them.

That’s the job of your benefits + features. They form the meat of your landing page.

Few rules of thumb for presenting the benefits + features to help you do a brilliant job like Unbounce:

Use benefits as headings. This way, people are more likely to read the paragraph below
Mention the feature that provides the benefit in the paragraph
If there is a picture that illustrates the desired result (benefit), include it.

5. Inspire trust

Most people are wary of even giving up their email on an unknown website, not to mention their credit card details.

To convert your website visitor, you have to give that person a reason to trust you.

Trust indicators are social proof (comments, testimonials), previous experience, mentions by influencers and so on. Anything that qualifies you or your product as fit to solve the problem the potential customer is having.
The more proof you have of the authenticity of your testimonials, the better.

Bringing another piece of Unbounce’s landing page to your attention:

Note how they included a picture of the person who gave them the testimonial. Yes, it could be staged, but, at least, you’re certain that a living and breathing person said these things.

Note: If I were you, I’d avoid adding that strip of logos of big brands on my landing page, unless I have actual proof that I worked with these brands.
If I’ve worked with them, I would ask them for a testimonial and publish that.

6. The call to action

You can read about naming your call to action in detail here. In summary:

Your landing page should have one and only one goal.
After you’ve grabbed attention, spiked interest, piqued desire and presented trust indicators, you can ask people to take action
the name of your call to action is very important. A lot of people will back off in the last minute if the call to action text suggests that they have to put in a lot of effort (e.g. “Register now” suggests that you have to fill out a long boring form. Not sexy.), or to give up something, etc. The name of the call to action has to be benefit-oriented. It has to emphasize what peoplewill get or what they can do after they click on that button.
Here’s a call to action that satisfies all of these requirements:

7. Tackle objections

A lot of the people that visit your landing page will be skeptical, especially when you’re selling something.

If you were a salesman doing this live, it would be easier for you. Some people would state their worries and objections, or at least make a face. But since you’re building a landing page, your potential customers are behind screens. You have to guess what their concerns might be.

By tackling objections, I simply mean that you should make a list of FAQs and publish it at the end of the landing page, right before your last call to action.

At first, you’ll have to guess what the FAQs are. With time, when people start contacting you and asking real questions, you will be able to refine this list of questions.

8. Spice it up

Now that you’ve prepared a nice tasty landing page, you can afford to spice it up a bit to increase your conversion rate.

Use these “spices” with caution, though. If your goal is only to trick people into giving up their email so that you can spam them, you will still get exactly 0 sales. If your goal is to sell a crappy product, you will still get refunds and rants all over social media.

So, please use these responsibly.

Everyone loves being different and special in some way. We seek ways to feel more successful, more skilled, more experienced in comparison to other people. On a deep level, this is our need for self-actualization.

Now, in terms of sales & marketing, this means that, generally, people like it when they have exclusive access to some content or an app.

Startup beta landing pages rely heavily on exclusivity to make more people sign up.

But exclusivity is not just about saying “Hey, get exclusive access to SomeUnknownSaaS”. Nobody actually wants that. Because nobody cares about your app.

To employ exclusivity, work on your offer first. When your potential users actually want the product, saying that you’re giving exclusive access to a select few will in fact boost your conversions.

Attract attention. Use your headline + subheadline + hero image to do that. State the main benefit in the headline. Use the subheadline to clarify and support the headline. Convey your message visually through the hero image
Spike interest. Make your page scan-friendly. Place your benefits on the easiest to notice spots—headings, bullet points, bolded/italicized text, bottom line.

Pique desire. Now that your reader is interested in learning more about your offer, you can afford to tell them a bit more about your product. Present the benefits + features in small paragraphs.
Inspire trust. Tell people why you are fit to tackle the problem that your product is solving.
Call to action. It’s important to ask your visitor explicitly to take action after you’ve done all of the above.
Tackle objections. Make a list of FAQs to help relieve your visitor’s anxiety and encourage them to take action now.
Spice it up. It doesn’t hurt to add a little bit of exclusivity or urgency on your landing page.
This is the minimum that you need to attempt to do.

You can find creative designer and developer here: Result Orinted Landing Page Designer


Do you like Muntazir Abbas's articles? Follow on social!
Comments to: How to design result oriented landing and funnel pages in HTML