Conversion Rates

The Clueless Marketer's Guide to Building a Landing Page from Scratch

By Dan Shewan April 21, 2014 Posted In: Conversion Rates Comments: 13

We talk about optimizing landing pages a lot here at WordStream, but how do you go about building a landing page in the first place? You need something to optimize before you can start optimizing! There are many ways to go about building a landing page, from rolling your sleeves up and diving into coding one with HTML, CSS and JavaScript to using web services that allow you to customize landing page templates.

In today’s post, you’ll learn how to build landing pages from the ground up and see which option is right for you. By the end of this post, you’ll be ready to start building a landing page that will drive conversions. Unless it looks like the one above, in which case you’ll probably want to rethink your life choices.

Building a Landing Page the ‘Hard’ Way

Before we dive into the nitty gritty of building a landing page from scratch, let’s get one thing out of the way – yes, HTML, CSS and other web technologies have a learning curve. However, learning how to code web pages isn’t the same as programming an app, building a supercomputer or breathing (artificial) life into a murderous robot intent on world domination. It takes time and effort to learn HTML, CSS and JavaScript, but it’s not as difficult as you might think.

First, let’s look at each of these web technologies and what they do.

HTML

Hypertext Markup Language, or HTML, is the “language” of the web. Note that HTML isn’t a programming language, but a markup language (as its name implies) that is used to define the content and structure of web pages. Let’s take a look.

Image credit: Mozilla Developer Network

See how the content and structure of the page are defined by the code?

The basics of HTML are beyond the scope of this post, but there are several excellent resources on the web that can help you learn. Some of the best are:

  • Codecademy (free interactive coding exercises on HTML, CSS, JavaScript and more)
  • Treehouse (extensive video library, free trial, monthly subscription)
  • Mozilla Developer Network (free text-based tutorials on various web technologies, including HTML)
  • HTML Dog (more tutorials with plenty of code examples)

CSS

HTML defines the content and structure of web pages, while Cascading Style Sheets (CSS) define how web pages look. Style sheets are referred to as cascading because changes made to a top-level style sheet can “cascade” throughout the entirety of a site, allowing you to make wide-scale changes to the appearance of your site by adjusting the code of a single style sheet. 

In the past, CSS code was inserted directly into HTML documents, but this isn’t a best practice – sure, it’ll work, but don’t get into bad habits. Keep your CSS and HTML code separate.

Here’s an example of what CSS code looks like:

Again, we’re not going to get into properties, values, selectors and declarations here, but there are plenty of resources to help you get up to speed, including the sites listed in the HTML section above.

To get an idea of how powerful CSS can be, check out Dave Shea’s CSS Zen Garden. Although it might be hard to believe, each of the example styles you’ll see there are applied to the exact same HTML code. Pretty cool, right? By making changes to your landing page’s CSS, you can experiment with radically different designs without having to go back and manually adjust the HTML of every page.

JavaScript

So, you’ve created a functional (and achingly beautiful) landing page – now you need to add some interactivity. This is crucial for landing pages, as you want your prospective customers to actually do something, whether it’s download a whitepaper or request a sales call. This is accomplished through calls to action powered by JavaScript.

JavaScript is a “real” programming language, but it’s most commonly used as a client-side scripting language. Simply put, this means that JavaScript makes your browser do most of the work.

Here’s a snippet of JavaScript:

JavaScript can be used to add functionality to a web page, such as:

  • Submit information to servers through web forms
  • Create pop-up windows
  • Authenticate user input such as login credentials
  • Animate navigational elements…

If you’re serious about making your own landing page from scratch by hand, you’ll need some technical skill, but the rewards can be great. For one, you’ll have complete control over exactly how your page is structured, displayed and interacts with your servers. You also get major bragging rights for having designed and coded your page singlehandedly. Templates? We don’t need no stinkin’ templates!

Still, this approach is time-intensive for the coding newbie – not to mention a little intimidating. There has to be an easier way, right?

Building a Landing Page the Easy Way

So you need a landing page fast. What do you do? Use a template! Don’t feel bad, though – in many cases, this is the best way make a landing page.

There are plenty of sites where building a landing page is a breeze. We’re going to look at two of them – Unbounce and Wix.

Unbounce

The landing page at the top of this post was built from an existing template using Unbounce, which bills itself as “the landing page builder for marketers.”

One of the main benefits of using Unbounce is that it includes a range of functionality specifically aimed at people who are primary focused on conversions. Another advantage of using Unbounce is that you can A/B test two versions of a landing page to determine which is more effective at improving conversion rates – bonus!

Unbounce offers more than 80 templates for just about every type of landing page you could ever need, including product launches, email newsletter subscription pages, eBook downloads, online learning pages and more. I chose the “Click Through Minimalist Desktop Light” template for the example at the top of this post. You can also choose to start with a blank page and start with a clean slate if you’re feeling ambitious.

Let’s say you want to create a landing page for a lead-generation PPC campaign you’re running. The “York” template is a great place to start for this type of page.

Unbounce allows you to adjust every single element of the template to suit your needs. You can change copy, use different fonts, switch out images and even move entire elements wherever you like. In just a few minutes, I was able to come up with this variation:

It’s not terribly well-designed, but that’s not the point – this quick and dirty redesign took less than 10 minutes to throw together and required zero coding. Imagine what you could do in a few hours!

Overall, Unbounce is an excellent platform for building a landing page. It’s not free (pricing starts at $49 per month for entrepreneurs and new businesses), but you can sign up for a free trial to start getting your hands dirty.

Wix

Whereas Unbounce is aimed specifically at marketers hoping to drive conversions, Wix is a bit more general purpose.

Wix offers a range of templates to start from, categorized by type of business and industry. For this example, let’s say you run an e-commerce site specializing in handmade arts and crafts.

Once you’ve selected your business type, you’ll be presented with a range of templates designed with your type of business in mind. These are some of the templates for online craft and hobby stores.

Now it’s time to start customizing your page. I chose the “Lil Pillow Shop” template because I’d secretly love a pillow with a video game console controller on it. Shame my cat would probably destroy it – this is why I can’t have nice things.

Wix offers some customization options, though not nearly as many as Unbounce. Of course, if you don’t need to tinker with every last page element, this may serve your needs just fine.

One of the biggest drawbacks to Wix is that many of the templates can’t really be considered landing pages, as many of them lack calls to action, forms and other elements your landing pages really need to have.

Something else Wix lacks that many marketers and business owners will find frustrating is the inability to add custom forms and other elements to a page – if it’s not there to begin with, you’re out of luck. This could be particularly irritating if you find a template you really like but lacks the functionality you need.

Overall, Wix is a great service for small businesses that need a web presence quickly, but for building a landing page it leaves a lot to be desired.

Notable Mentions

Of course, Unbounce and Wix are far from the only tools that can help you build a landing page. Other notable mentions include:

  • SquareSpace (strong analytics support, domain registration, hosting services)
  • Moonfruit (responsive designs built in HTML5, e-commerce-friendly)
  • Weebly (drag-and-drop UI, analytics support, low monthly pricing)

Bear in mind, though, that while each of these services makes building a landing page easy, they might not offer the functionality you need, especially if you’re planning to create landing pages with highly specific calls to action that will compliment your PPC efforts.

If You’re a WordStream Customer …

Of course, it would be remiss to talk about building a landing page without mentioning WordStream’s Landing Pages and Leads. Built into our WordStream Advisor software platform, Landing Pages and Leads enables you to quickly and easily create landing pages that are highly optimized and connect directly with your existing AdWords account. We provide a range of templates, and our easy-to-use customization options enable you to build a landing page that adheres to best practices with zero hassle. We even host the pages for you!

Get started with your WordStream Advisor free trial today!

AdWords Performance Grader




If you enjoyed this post, please consider leaving a comment.

Comments

Monday April 21, 2014

John (not verified) Said:

Good Article but was wondindering why there was no mention of Word Press Landing pages, as well as some of the

Word Press plugins?

Tuesday April 22, 2014

Dan Shewan Said:

Hey John, thanks for reading.

I certainly could have mentioned WordPress as a platform, but since the article was divided into two sections ("tech" versus "non-tech" for the sake of simplicity), I felt it best to stay away from self-hosted WordPress sites/pages, given their slightly more technical nature than the "out-of-the-box" landing page builders I looked at.

Definitely a great platform, though. Thanks for taking the time to comment.

Tuesday April 22, 2014

Arun Kallarackal (not verified) Said:

Informative post! It suggested some good methods and tools to create a good landing page from scratch. Well, the hard way takes some effort and time to complete and look good. Building it up from scratch using HTML, CSS and JS is tough, especially for those who have not much knowledge of coding.
 
I'll prefer the easy method described in the article. The templates made by Unboune looks cool, by the way. The tools mentioned, apart from unbounce also seems oromising. They must have some stuff in them to be mentioned here! :)
 
A good read. Some useful tools suggested in it. Worth giving them a try.
 
I found the link to this post on Kingged.
 
Arun

Tuesday April 22, 2014

Dan Shewan Said:

Thanks, Arun!

I agree, I think most marketers are probably better off using a template builder. However, it didn't feel right writing a post about how to build a landing page without adding a section on the technologies necessary to do it from scratch. Hopefully anyone considering this route found some useful information.

Wednesday April 23, 2014

Tia Kelly (not verified) Said:

Hey Arun! Glad you like the look of our templates. If you have any questions about Unbounce please just let me know :)


Tia Kelly
Social Strategist, Unbounce

Tuesday April 22, 2014

Ryan Biddulph (not verified) Said:

Unless you are super driven Dan going the template route is the way to go. Learning even basic coding is a chore; I'm thankful to have attented tech school a while back as I call on my html skills from those days. Without the techie knowledge I'd be in the absolute dark on this landing page building stuff ;) Super helpful tutorial here. I found it on Kingged.com and gave it a thumbs up too!

Tuesday April 22, 2014

Dan Shewan Said:

Hey Ryan,

True, learning to code is a challenge, but I think it's definitely become easier in recent years, particularly with the rise in popularity of interactive tutorials vs. poring over lengthy textbooks. Still, it's definitely not for the casual marketer.

I'm glad you found the article interesting/useful - thanks for commenting!

Tuesday April 22, 2014

joannapaul (not verified) Said:

Going about with a right template and better fonts will definitely mark the success of a landing page. Not being more stuffed or fuzzy in its design is mandatory to move ahead with the landing page. Also checking for all the page elements and its attributes can help in building an successful landing page.

Tuesday April 22, 2014

Dan Shewan Said:

Hey Joanna,

While choosing the right starting template can be important, I'm not sure font choice is as crucial to the "success" of a landing page, especially considering the typical limitations of how many fonts a user has installed on their machine.

True, using Comic Sans (or some equally "novel" font) is probably a great way to deter prospective customers, but I'd say that layout and functionality (the inclusion of forms etc.) trumps minor aesthetic considerations like font, button color etc.

Still, if in doubt, A/B test your pages and see what your users' behavior is actually telling you!

 

Tuesday April 22, 2014

Eddie Phillips (not verified) Said:

Wow you sure packed a lot of info into one article!

I agree with John about using WordPress to build landing pages. I have several and they work fine.

Weebly works ok, but using their site builder is a pain at times.

Thanks for the good info.

Tuesday April 22, 2014

Dan Shewan Said:

Thanks, Eddie! If anything, I'm pretty sure I could have gone into more detail! Thanks for reading and taking the time to comment.

Wednesday April 23, 2014

Tia Kelly (not verified) Said:

Dan, thanks so much for mentioning Unbounce and the other page builder options.

I appreciate how you also included some additional resources on HTML :)

Props for spreading the word on how landing pages can help improve campaign performance!

Tia Kelly
Social Strategist, Unbounce

Thursday April 24, 2014

Ann07 (not verified) Said:

Hello, Dan!
 
This is such an informative content, and thanks for this! You have just shared some good methods and tools to use in creating a landing page out of a scrap.
 
Cool!
 
There’s a hard way, but why take it when there’s an easy way to build a landing page that will surely drive conversions? It takes some time and effort, but it can be a simple task to enjoy.
 
Great guide, Dan.
Two thumbs up for an awesome work! :)
 
 
Best,
Ann07
 
 
By the way, I found this post shared on kingged.com

 

Leave a Comment

Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.
 
Free Keyword Tool

Get thousands of relevent keyword suggestions - more,
faster, free!

Free Keyword Niche Finder

Discover profitable pockets of keywords for your
business.

Free Negative Keyword Suggestion Tool

Identify wasted spend before it happens and increase
your paid search ROI.

Contact Us | Company | Support | Site Map | Trademarks | Privacy Policy © 2007-2014 WordStream, Inc. All rights reserved.