How to Design and Code a Squeeze Page That Converts 51% of Traffic

Prospects’ e-mail addresses are the single most powerful asset in online marketing. Fans, followers, and website visits are cool, but it’s hard to reach them. Email, on the other hand, offers a way to communicate directly with your interested targeted prospects, at any time you want, and it’s actually quite cheap. However, getting people on your list in the first place is a different story, and this is where squeeze pages come in.

Squeeze pages are one of the most powerful tools in an online marketer’s toolbox. I’ve read many guides like this one proving that squeeze pages are the single most effective way of building a list — as long as you have something valuable to offer, of course!

In this monster-sized post, I’ll guide you to a beautiful, fully-functional squeeze page that you can use to deliver your freebies and quickly build a targeted email list.

This is the exact squeeze page I use to get people on a list from my book “Free & Unlimited Website Traffic”. This squeeze page template has been converting at an awesome 51% conversion rate. And now, you can follow this tutorial to build your own.

Impatient? You can grab the done-for-you files right now and work off of them. Just swap the images and text, change the Mailchimp’s form code and you’re good to go.

Just give me the .sketch file! (no email required)

Tools and Skills Needed

You’ll need:

• Sketch app (or any graphics software you’re comfortable with)
• copy for your page (text and image of the freebie) — read this
• basic understanding of HTML, CSS, and web hosting
• text editor like Sublime or Notepad ++
• hosting and (optionally) a domain to host the squeeze page (I recommend BlueHost)
• MailChimp account

This tutorial is made from two parts: first, we’ll design the page, and then we’ll code it up in HTML and CSS and then set it up with MailChimp to deliver the freebie we had offered. Each of the parts also has a video tutorial that you can watch instead of reading through the steps.

The main goal of squeeze pages is basically “squeezing” an email address out of the visitor. Because of this, these pages must be left pretty stripped-down and focused. This makes it the perfect learning project if you’re still unsure in your HTML abilities.

After completing this tutorial, you’ll have a very own custom squeeze page that you can start marketing right away and a new skill to put into your marketing toolbox! Both parts of this tutorial are kept pretty basic so that you can get to understand the process better. Now, let’s get started!

PART 1: Designing a Squeeze Page

Set Up the Document

First, open up Sketch app. As you can see, it has already created a new document for us. We’ll create an artboard of 1440x1024px and we can just name it “squeeze page”.

Then, I’ll go under View -> Layout Settings and input these settings:

Don’t forget to click “Center” after making any changes and then submit the info. This will create a nice grid to base our design on.

Base Elements

I’ll draw a 6 columns wide rounded corner rectangle into which I’ll place the copy and form. Add some shadow to the box and remove the default gray border.

You can use one of the free stock photo sites to find a background photo for this page and paste it to the bottom. Then add some blur to it.

Adding Copy

Then paste in the image of your freebie. In this case, it’s a free ebook I’m offering to all email subscribers.

Hit T on the keyboard to bring up Text tool and paste in the text. You’ll need to pick web-safe fonts that are available for embedding — you can find those in the Google font directory. I picked Roboto Black and Light Italic for this example.

It’s a good idea to make the headline extremely heavy in contrast to subheadline and the rest of the text. Align the text to the middle and set headline text to 36px, and the body text to 20px in size.

Designing the Form

Add a rectangle with gray stroke for email input and type in the placeholder text (something like “your email here”). It’s best to only ask for the email and nothing else to make filling out this form as easy as possible (and increase conversions).

To create the button, draw a rounded corner rectangle and then apply a gradient fill with a nice orange transition. By adding some thick shadow, you can add simple 3D effect that is easily recreatable in CSS.

You can play around with spacing a bit, but we’re practically done with our design. What remains is building our squeeze page in code.

PART 2: Coding the Squeeze Page

Prepare the Assets

First, extract the image of your freebie and the background photo. Sketch app has a neat feature called “Export” at the bottom of the screen — all we need to do is click this export button and type in a filename.

Since the background photo is quite large, it may cause some performance issues with our page. We want it to load smoothly and instantly, so let’s size it down by running it though the tool called Compressor.io.

Before you get started with code, open up a new Mailchimp account and create a new list. You’ll also need to download the latest version of Unsemantic CSS framework found here. Then, you’re all ready to start.

Clean Up the File & Folder Structure

Unzip Unsemantic and locate the file “responsive.html” and folder “assets“. Delete all the rest. Inside the “assets” folder, delete all but “demo.css“, “ie.css” and “unsemantic-grid-responsive.css”. Create an “images” folder in the root directory and drop in the two images we extracted in the previous step.

Test If All Works

Rename the “responsive.html” file to “index.html“. Then, open it up in your text editor of choice. Delete everything that’s between body tags, but leave those script tags at the end. Basically, just clean up the file so you can add your own HTML code.

First, we’ll go and change the title tag where it now says “Unsemantic CSS Framework”. Change it for something more descriptive.

If you now save this file and open it in browser, it will surely say “Epic Freebie for Travellers” in the title:

Create the HTML

Unsemantic is offering a couple of very neat pre-made classes to use. For the beginners in HTML, I’d like to point out that these are not default to HTML, so if you’d use a different framework or no framework at all, just assigning these classes to elements wouldn’t have any effect.

This is the code we’ll need in between our body tags:

<div class="grid-container">
  <div class="push-30 grid-40 mobile-grid-100">
    /add form here/
  </div>
</div>

I suggest that you watch the video above to hear explanation for each of the classes used.

Now we’ll replace /add form here/ with the content. First, I’ll add the ebook image:

<img src="./assets/images/book.png" />

Then, I’ll paste in the headline and wrap it in H1 tags:

<h1>Are you tired of paying lots of money for luxurious travels?</h1>

And the subheadline in paragraph tags:

<p>Download this free ebook with 99 epic travel hacks now!</p>

Here’s where the Mailchimp’s form comes in. After logging in and creating a list, click on this arrow and click “Signup forms”. Select “Embedded forms”, and then pick “Naked”, and then remove all ticks from selections on the left and click “Only required fields” here.

You can now copy the code on the right or simply use this cleaned-up snippet:

<form action="PASTE YOUR FORM'S ACTION HERE" method="post" target="_blank" novalidate>
     <input type="email" value="" placeholder="your email here" name="EMAIL" />
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_c04cd82a4b4aba8b1001530d5_ce362ce076" tabindex="-1" value=""></div>
    <input type="submit" value="Get free ebook" name="subscribe" class="button" />
</form>

You need to change two things in the code above: replace the form’s action (with the one from your embedded Mailchimp form) and (optionally) change the value of the download button into something other than “Get free ebook”.

Add the CSS

First we’ll need to embed fonts into this page. This is to make sure the page renders the same way even to people without Roboto installed on their systems.

Search for your font(s) in the Google Fonts directory and pick the versions you need. Then copy the embed code and paste it in just before the closing head tag.

Now let’s add the background photo. Open up “demo.css” file and delete everything there. Then, type:

body {
    background-image:url(../images/background.png);
    background-size: cover;
}

The first line will call our image (make sure to add the right path), and the second will stretch it to the size of the window.

Sketch has a nifty feature “Copy CSS attributes” which does exactly that — it generates some of the styles for you. You can then switch over to your CSS file and paste the generated code in.

Here’s an example of using this code for the button in this template.

Even with the code generated, the button doesn’t look 100% right. We’ll make it expand the entire width of the containing box, remove the ugly gray border, add some more padding, make the text uppercase, and make the cursor look right:

.button {
    /* This gets generated by Sketch app: */
    background-image: linear-gradient(-180deg, #FFA400 0%, #E07709 100%);
    box-shadow: 0px 7px 0px 0px #B86100;
    border-radius: 8px;
    font-family: Roboto-Black;
    font-size: 36px;
    color: #FFFFFF;
    line-height: 48px;

    /* We add this: */
    text-transform: uppercase;
    width: 100%;
    border: none;
    padding: 10px 0;
    cursor: pointer;
}

You’ll need to figure out the rest yourself; if you get stuck, you can always watch the video tutorial where each step is carefully explained.

Wrapping Up

By now, we have a functioning squeeze page. If you simply copy the main index.html file and throw out the form and change text, you can create a custom thank you page where your subscribers can download the freebie after they’ve signed up. Simply replace the link in MailChimp under Confirmation “Thank you” page to redirect new subscribers.

A different way of doing this would be to simply send out the download link for your freebie in the welcome email.

Your next step is to upload the files to a server with FTP. The process is actually quite simple, so I didn’t include it in this guide — but you can follow this video to finish the process.

Thanks for reading this tutorial. Don’t forget that you can download the files for free by clicking here.