Build marketing portfolio: html landing pages

Landing pages remain in the centre of generating new leads and increasing conversions, looking at one you’d think it’s as simple as adding some graphic and slapping your proposition next to it.

Today I found out that it’s much more strategic than that, and you will too!

The goal.

Taking the first steps in our marketing portfolio journey. Today’s project is landing pages, according to Unbounce a landing page is a standalone web page, created specifically for a marketing or advertising campaign.

And for today’s marketing portfolio project we will be creating html landing pages.

The tools.

  • Learn some basic HTML, it’s simple enough to grasp and you can do this project whilst you’re learning it.
  • A program to write HTML and CSS (VS code, code-pen…).
  • A pen and paper to brainstorm ideas.
  • A few great examples to take inspiration from.

Why the landing page first?

There’s a lot of reasons anyone would want to go into marketing, for me it’s because of the ability to take on fun, creative and strategic projects.   

Landing pages are almost the perfect mix of all these attributes whilst being beginner friendly, here’s why:

  1. Introduction to copywriting.
  2. Introduction to SEO.
  3. Creating visuals & typography.
  4. Learning HTML
    ,and a bunch more important marketing elements…

How do you create a landing page?

There’s 2 main methods marketers use to create effective landing pages:

  1. Landing page/ website editors – These are the standard, they’re convenient and very easy to use.
  2. Html – Another method is writing down html syntax, which may sound primitive compared to the first but it has its MANY benefits for marketers especially in the long run.

To explore this, we’ll take on our first marketing mock-up project.

Improving BAD landing pages with simple html:

Bad example number #1
Bad example #2

Step 1:  Follow a few good practices to creating an effective landing page.

Source: Unbounce.com

Here I’ll just do my very best to tick most of these boxes whilst still making sure the landing page is selling something clearly and concisely.

Step 2: Find something to work with (on the bad examples).

At first glance they already don’t look like one of the best landing pages out there, there’s just too much going on.

The first thing we’ll do is simplify these making sure the selling proposition, the CTA and the benefits are clearly portrayed.

 Step 3: Decide how the landing page will look, write down some basic html and try to make it look nice with CSS (keeping things simple).

After the second step I ultimately decided not to change the copy too much, it’s not such a smart move since I don’t really understand what they’re selling and who they’re selling it to.

I’ll just trim it down and make it work with the new landing page style and elements I’m using.

The results:

Landing page #1
  1. Think of the people as the human resources of the business.
  2. Formulated a clearer selling proposition.
  3. Clearly highlighted the benefits.
  4. Placed the CTA strategically below the the selling propositions.
Landing page #2

  1. Formulated a heading with a clearer selling proposition and placed the CTA right next to it.
  2. Used neat visuals.
  3. Listed the benefits.

Conclusion.

The improved landing pages are not at all first round picks in terms of looks and especially in terms of the copy.

Landing pages can obviously get much better than this, but that’s not the point of the project.

This project will just highlight the strategy and thinking that goes into creating an “effective” landing page. It’s not simply a matter of attractive imagery and words, with this project you’ll get to realise that yourself.

This was a fun project, would you have done anything differently?

Let me know what you think in the comments…

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top