by Christian-Peter Heimbach

How to launch an effective landing page for your project

jbcRZPe5VqsqSNCRFVAiTEgRiRrt6omS5c70
Photo by SpaceX — Cape Canaveral Air Force Station, United States

I began my career 10 years ago doing online marketing and advertising for video games. Since then, I’ve worked on all sides of the industry: agency, development, and publishing.

The marketing industry grows more technical every year. This means that ambitious marketers need to start learning how to code — if they haven’t already.

In November 2015, I began my journey with Free Code Camp. Since then, I’ve blended my marketing and coding skills to create a business here in London.

In this article, I’ll show you how to build a central online marketing asset — a landing page for your project.

Landing pages try to convince users to convert. Converting means they do whatever it is you’re trying to convince them to do:

  • sign up for your mailing list
  • create an account
  • pre-purchase your product (like with Kickstarter)

Marketing first, then building

Back in the day, people would develop a product or service in stealth mode. This required a huge amount of time, and usually up-front investment. Only after the product was finished could they evaluate whether it would succeed with its target audience (product-market fit).

Now it’s become much more common to save time and money by testing your product by marketing it before you develop it. This is the basis of Eric Ries’ Lean Startup methodology.

By building a product landing page, you can test user reactions early. This allows you to discover what’s most important: the conversion rates of users signing up for your product or service. With this data in hand, you can decide whether you want to proceed with the risky and costly part: developing your idea’s minimal viable product.

This method can also teach you a lot about your own assumptions, and the effectiveness of different marketing approaches. Note that this is a process rather than a “once done, move on” project.

I recommend you keep an open, curious mindset. You’re going to learn about all the approaches that don’t work as much as you confirm assumptions that do work.

If you’re new to the concept of discovering business ideas, you’ll want to familiarize yourself with terms like value proposition, target market, and cost/revenue streams. If you need help, refer to the Business Model Canvas approach by Alexander Osterwalder.

Before you delve into more detailed topics, I want to stress the importance of user research. You want to optimize your pages for people you hope will become future customers.

This means that you need to begin with a picture of what kind of user visits your page:

  • Who are they?
  • What are their needs?
  • What is making their life difficult?
  • How can you make sure they understand that your proposed solution can help them?

One common way to understand your target audience is to build personas. A persona is an imagined representative. It helps you and your team visualize your assumed customer.

If you haven’t done this yet, have a read about personas in general. You can also use this template to build personas. Three or four of personas should be enough to have an idea of who will be using your product.

Once you have personas in mind, you research how they might search the internet for solutions to their problems. What search terms do they use? How many visits could you expect from different common searches each month?

One good way to explore this is to use Google’s Keyword Planner.

Then you’ll have a strong starting point: a picture of our future customer and how they might search for your solution.

Now let’s talk about the common elements of landing pages and how you can apply your strategy to them.

Common Elements

Here are the basic components of a successful landing page, which haven’t changed much since this chart was created in 2012:

RounRQMLvjTENWsPOpCeoJGO6K1Xk30F39a1
Graphic by Indie Game Girl —Common Elements by Example of a game landing page

Now take a look at my own landing page for actioncy.io, my marketing planning tool that’s still in the prototyping stage. I also put the source code up on GitHub if you’re curious.

The main question on everyone’s mind when they hit your landing page is “what is this?”

You can answer this in a few short sentences. For example, here’s how I introduce my product: “A smarter way to plan your campaigns, track the requirements, and export your deliverables.”

Much has been written about what this sentence should contain. Should it should be serious or funny? Emotional or rational?

I’ve chosen a rational, business language because of my persona assumptions. Only testing with variances will give me a solid answer about whether it works or is too “buttoned up.”

The brand logo is usually embedded into a header section called masthead. It builds an intro part above the fold and is often supported by a photo or video background. I decided to stay minimal for actioncy.io. It’s a cornerstone of my web app to be clean, focused and clutter-free. Also I’ve embedded a screenshot of my prototype to show visitors that this is a web application.

After you build this introduction, you have to understand the strategic importance of generating a conversion. First, do this by displaying a call to action (CTA). Some common CTAs are “Sign Up”, “Subscribe”, “Buy Now”, and “Get Invite”. These try to entice users to take action.

Everyone has their own opinion on what this button should say, and (you guessed it) we have to test it. For example, placing “Sign Up” quite high up on the page before users are ready to decide could be too bold. I opted for only one CTA on my own page, but it’s possible to use two.

“Reason Why’s” play an important role in developing the engagement of your audience. They can improve their will to sign up. It’s vital that the content you provide covers the keywords your user searched for. Always ask yourself whether you would find your page helpful if you yourself had arrived at it after a search.

For me “Reason Whys” are so important that I cover them twice on my landing page. First, factually and only described in short. And then a second time, with a larger image and more story.

I follow a standard I picked up at university: tell people what you are going to tell them, tell them, and then explain what you told them. The wording and the order of different “Reason Why” constellations are classic content experiments. These start out as guess work . You’ll need to experiment and confirm before you can be sure they work.

When you’ve convinced your users that you’re proposing a viable solution, they enter the last element: the conversion funnel. This phrase describes the clicks that take the user from your CTA through to registration or payment.

If your goal is to get users to sign up for your mailing list, this funnel may be controlled by your email list provider. I used Mail Chimp in my case. You could either create your own funnel or you use one provided supplied by your vendor.

Keep in mind that these embedded scripts can make your page load slower. Using an API might be better than using an embedded element.

There are split opinions in online marketing. Some believe the funnel philosophy to be redundant, because user journeys are not linear. Users may visit your page on a multitude of devices. Many visitors might return several times via different channels.

For now, you should concentrate on making your funnel as user-friendly as possible so you can maximize conversions. The idea of losing out on users who wanted to share their data, but failed because of a slow or confusing interface is something that haunts every online marketer at night.

fb1XegsCojZsfTLwlaWnAI2UccI6lp3zFrV8
Landing page concept as applied by H.Bloom

Search Engine Optimization and the Search Console

A key source for traffic is search. For most pages, it’s the biggest chunk of new incoming traffic, rivaled only by social media.

The web has endless resources on how you can improve your search appearance and ranking. I recommend to read Google’s own guide as a starting point, and it has a handy checklist.

Since you’re building a “flat” landing page without additional pages, you can ignore the advice focused on nesting subdirectories and internal links.

Instead, you can focus on some core principles:

Build pages for users, not for Google.

A lot of SEO information out there focuses on technical aspects. Stay away from pages where everything is about Google’s robots. Don’t get distracted because these “rules” change all the time. They exist to make a machine understand how real users perceive quality.

If you built your site optimized for users in the first place, you’re safer than if you’d built for machines. Because whether machines will favor your site depends on hidden algorithms that change all the time.

Structure content by making good use of the semantics of HTML tags

You should use the most important what is this? sentence only once, and tag it <H1>. You should tag Reason Why’s and key features as <H2>, and other longer headlines as <H3>.

A good structure will allow your design to reflect the importance of your content, helping your most important message stand out.

I follow the philosophy that people should grasp the essence of what you propose to them as fast as possible. This makes them much more likely to then engage and spend more time on your site. This in return is a strong signal for SEO.

Page Speed and Responsiveness

Nothing hurts the usability of your site more than having to wait too long for a page to load.

Or having to pinch around on your mobile phone like it’s 2010.

Try to score high on Google’s own page speed insights tool, which checks both of these.

Rich Snippets and Structured Data Tactics

These not only help search optimization — they also give both users and machines more context. This way, you’ll be presented on search results more prominently, as shown in this gallery.

For example, I used rich snippets to categorize actioncy.io as a web app for marketing. I also defined its description, and which image to show when my site’s URL is shared on social media.

One handy tool for developers to aid the process of SEO is the Google Search Console. It helps you better understand how Google’s crawlers access and index your page. It shows if there are problems, and whether the structured data are parsed correctly.

Next ensure that your page is working. The Search Console provides many helpful reports:

  • keywords your content is associated with
  • which search queries are sending us how much traffic
  • who links to your site

The keyword report is helpful for making sure you rank high against the target keywords of your research. If this is not the case, you can adapt the content by rewording and modifying the information structure. For many more details go to the search console guide by Moz, and Google’s webmaster help center.

Get the Data: Analytics

Now you’re approaching the final stage. After building the landing page and designing its content and conversion mechanics, you’ll need to test it. In order to do this, you need to gather as much data as possible. This will allow you to gather evidence of how different changes have led to specific outcomes.

My tool of choice is Google Analytics, at least to begin with. It fits well into start-up budgets, and is feature-rich. It allows you to pass data to Google’s other marketing tools. To learn how to get started with Google Analytics, have a look at its getting started guide.

It’s important to configure goals in Google Analytics. You build a landing page to achieve conversions, then use goals to help track these. When you apply changes to your site, you can immediately see the effect on conversion rates. This also helps you to understand how visits that come from different channels convert at different rates.

You can accomplish even more when you use custom URLs, which Google Analytics can help you track. By adding a parameter that the Google Analytics script will pick up, you can see how many users signed up as a result of a blog post, for example.

Google Analytics allows you to attribute behavior and conversions to a specific source. It will help you to identify the best user acquisition activities and where to improve. For further reading on this, check out the Google guide to URL building.

Staying on top of an ever-shifting landscape

Both online marketing and software development are in a state of constant flux. You need to keep learning if you want to be able to compete with all the other people for attention.

At the same time, you must avoid spending all your time learning. It’s important to start doing marketing: learn, repeat, and get better. This is the “ing” in marketing.

If you’d like any feedback on your marketing efforts, feel free to reach out to me anytime.

And remember that Free Code Camp’s advice for getting help with coding rings just as true with getting help with marketing: Read, Search, Ask!

Thank you and happy marketing!