Evolution of a Landing Page

Published: 6/2/2013

I forked over a chunk of my "start-your-own-thing" stash to fly to Philadelphia for BaconBizConf. If you are a bootstrapper, this conference is worth the trip to Philly. It was packed with speakers I respect giving actionable advice. My to-do list got a little out of control after the conference.

At the end of the conference Patrick McKenzie suggested doing a few teardowns and I was one of the lucky few selected. What followed was 20 minutes of Amy Hoy, Patrick McKenzie, Nathan Barry, Brennan Dunn and Marc-André Cournoyer dismantling my landing page.

This is before and this is after.

Here is all of their advice and how I put it to use.

"Say why they want the thing sooner." — Brennan Dunn

You have to read half of the original landing page before you know what's in my book. And if you miraculously cut a swathe through the jungle of shitty writing between you and this important information, you are rewarded with limp and flaccid copy. We'll come back to this.

The first edit I made was to move the section about the book to the very top. I also added a header, "What you'll get out of this book" to make it even more obvious.

Now potential readers will have no trouble figuring out what's in it for them.

"Climb the ladder of abstraction." — Amy Hoy

I didn't know what this meant when she said it but I wrote it down because it sounded insightful. Later I googled around and discovered Writing Tools — 50 Essential Strategies for Every Writer. Tool number 22 is "Climb up and down the ladder of abstraction." I'm not sure this is what Amy was referring to, but you should know about Tool number 22.

Good copy moves strongly from concrete to abstract. Anything in the middle, between abstract and concrete, is in the danger zone.

Here's an example of what not to do from my old landing page.

• "Finally understand how to use code in your design process."

Here is the new version.

• "How to use the new flexbox module to get exactly the layout you want."
• How to use css combinators to style elements with surgical precision."

WTF is a "design process?" Sounds like something you would find buried in the middle of some corporate PowerPoint deck.

Maybe the reader doesn't know about the flexbox module, but it's a real thing they can use to get exactly the layout they want. This beats the pants off of "code" they can use in their "design process."

"Make the headlines readable all the way down." — Amy Hoy

Amy's landing page for Charm is very long. But if you are just skimming you can read only the headlines and it still makes sense.

I took the same approach. If you just read the bold bits it still makes sense.

"Short pages convert better for collecting emails." — Nathan Barry

"I've had success with longer landing pages." — Amy Hoy

What converts better for collecting email addresses? A short page or a long page? On this point I received conflicting advice, so I decided to split the difference.

The first section of my page stands apart and functions as a short landing page. My call to action is at the very top and repeated near the bottom.

Verb + Benefit [+ immediacy] — Patrick McKenzie

Buttons should follow this formula. Patrick mentioned this in his talk and during my teardown.

I changed my button copy from "Sign me up" to "Get your free chapter".

"The testimonials should be shorter and speak to the benefits of the book." — Marc-André Cournoyer

I shortened up the testimonials but I don't have any about the book yet. Once I get a few chapters done I'll see if anything can be done about that. Adding photos was also mentioned.

More active phrasing

I dumped words like "learn" and "discover" in favor of words like "bend to your will" and "blow away".

I'm not even sure these new verbs are more "active" but they are stronger than wimpy words like "learn" and "discover".

Handling objections with an FAQ

If you are going to take the space to address objections your prospects will have, do it with an FAQ section. Marc-André made this suggestion and Brennan Dunn has a great example of this with hgis landing page for The Blueprint.

I added an FAQ and filled it with questions I know my potential readers will have.

Design

There were several problems with the initial design.

• There was too much contrast in the dark section which made it tough to read.
• The word Sketch was blue which made the H1 read as, "Write css as fast as you can. Sketch."
• Blue is low contrast on white, so it made some text hard to read. It also looks like a link.
• There was too much spacing around the call to action form.

I addressed all of these with the new landing page.

Given my book is for web designers, having a bad design is big problem. To help offset this I've called out in the FAQ that I'm not a designer.

"Finally I can strangle Photoshop." — Amy Hoy

"Cut a step out and get my work done faster." — Nathan Barry

Everyone agreed that I really needed to call out the pain.

I thought I had. It was right there in big red letters on a black background: designers feel guilty about having trouble writing code. They are frustrated that they can't just do their designs directly in the browser.

That's pain, right?

Amy and Nathan threw out some suggestions, and since they are designers I listened carefully. But they weren't saying anything I hadn't heard before, and just throwing their suggestions onto the landing page would not help.

I spent my entire flight home to Chicago ruminating on my "pain" problem.

Using this framework solved my pain problem.

After the conference a friend sent me a link to something Brennan wrote. The important bit is the section "Marketers have already blazed the trail" which contains an outline for a landing page.

I started from scratch, ignoring the first version of my landing page, and just started filling in the outline.

• Pain — The root problem is web designers don't have a tool that is just for them. This causes all kinds of pain as they are forced to jump through hoops with tools like Photoshop.
• Solution — One solution is to dive into writing the markup and CSS for the page and use Photoshop less.
• Offer — I wrote a book to show designers how to do this.
• Objections — Some designers may object to this solution because it's tough to think creatively while writing code. My answer to them is if they learn the right tools the technology will get out of the way.

Oops. It turns out the first half of my old landing page belongs in the section where I address objections.

The new flow progresses sensibly from problem and pain to a solution and then an offer. I was too meta with my first version and following a formula kept my mind from wandering.

And now I have an awesome new landing page. Thanks to everyone at BaconBizConf for the excellent advice.

If you have any questions about your own landing page I'm happy to help. I'm @sfioritto on Twitter.