Landing Pages and JavaScript Closures

Apr 26, 2010
Episode 22
This week, Nick explores some new trends in landing page design and Jim unravels the mysteries of JavaScript closures.
Spotlight

Thanks to those who make Doctype possible!

Landing Pages

A landing page is a special webpage that’s very focused on a particular goal. Perhaps you’re trying to direct the user to a sign up form. Maybe you’re trying to persuade them of a political movement. Or, maybe you’re creating an interactive experience to help market a movie or a video game. Whatever it is, the goal should be crystal clear from the start, because it will drive the rest of your decision making.

Once you have a goal in mind, you’ll want to think about the overall user experience. Where are your visitors coming from, and where do they end up? So for example, if you’re selling a product or service for a major brand, you might have several advertising campaigns via several outlets like direct mail, television, online ads, and social marketing, that direct visitors to your landing page. But after they’ve seen your landing page, where do you want them to end up?

Traditionally the end goal is to sell a product or get users to sign up for something, and you’ll hear the term “conversion funnel” thrown around a lot. I feel like this term is starting to become a bit dated however, because often times the user experience doesn’t resemble a funnel at all. For example, in the case of Doctype, new viewers usually hear about us via word of mouth, bookmarking sites, social networks, and several other sources. Then they’ll typically end up on our website and maybe watch a few episodes. Finally, they’ll often visit our Facebook fan page or start following us on Twitter, so that they can participate in community discussions, see additional content, and hear about new episodes. And the cycle continues.

None of this is any good if you can’t track it. Tracking offline sources can be difficult, but you can use tricks like special URLs or special coupon codes for each medium. For tracking your websites, you should always be using specialized tools like Google Analytics, Get Clicky, or any other service you decide you like.

Design

The whole user experience is more than just skin deep, but the aesthetics are still a very important component. When designing your landing page, staying focused is the key. With the goal of your landing page in mind, you should be able to deliver a very direct, clear, and focused message. There shouldn’t be any unnecessary elements and the page should be clutter free.

Right away, even without reading a single word, your visitors should be able to tell that they’re in the right place. The colors, imagery, branding, and overall experience should feel very similar to where they came from, especially if they’ve heard about you via a visual medium like a video ad spot, a banner ad, or a movie trailer. Next, the most prominent text on the page should tell your target audience where they are, and what it is that they’re looking at. This is usually just one sentence long, but it should be understandable by everyone, even if they’re outside your target audience.

Finally, you should have a call to action. This usually should be a large clickable area, that directs the user to the next step, whether that’s watching the latest episode of Doctype, signing up for a newsletter, or purchasing a product.

Facebook and FBML

In television ads and more traditional marketing, you’re starting to see brands direct visitors directly to their Facebook fan page. The reason it’s a great idea to direct people to Facebook, is because the effects are more long term. When a visitor Likes your page, you form a more long term connection with them, rather than the one time visit that another type of landing page can generate. Additionally, you can leverage all the social aspects of Facebook. Sometimes a brand will have a default landing page, but I recommend using the Wall as the landing page instead, so that you put the focus on the community.

Resources
Closures

You may have heard the term closures when talking about JavaScript. The idea can be confusing to begin with, but understanding what closures are and how they work will allow you to use JavaScript in really powerful ways.

Closures have to do with how variables are tracked inside of JavaScript, and how JavaScript allows functions to be defined within other functions.

Garbage Collection

Let’s take a look at an example:

function sayHello(){
  var person = "Joe Smith";

  alert('Hello, ' + person + '!');
}
sayHello()

Here we have created a function called sayHello, and inside it defines a variable called person. It then creates an alert with a greeting using the person variable. When we actually call the function sayHello, JavaScript creates a variable with the name ‘person’ and value “Joe Smith”, and makes it accessible from within the sayHello function.

When our call to sayHello ends, and we return back to the global scope, we have no way to access the person variable, since it is only visible from inside the sayHello function. Since JavaScript knows we can no longer access the person variable, it removes it from the system to save memory. This is known as garbage collection. If there were no garbage collection, we would just take up more and more memory remembering variables that we no longer need. Bugs or errors in the garbage collection are known as memory leaks, since more and more system memory is used.

Closure example

Now let’s look at a similar example, but let’s use JavaScript’s ability to define functions inside of functions

function helloBuilder(){
  var person = "Joe Smith";

  function sayHello(){
    alert('Hello, ' + person + '!');
  }

  return sayHello; // return the function
}

var mySayHello = buildSayHello();
mySayHello();

Here, we have a function that is called helloBuilder, and inside it creates a person variable, and a sayHello function that we will then return. Inside of the inner sayHello function, we can actually use the person variable that is defined in the outer helloBuilder function.

When we call helloBuilder, JavaScript creates the person variable, creates a function and returns that function. You might think that when helloBuilder finishes that it can delete the person variable using Garbage Collection, but it can’t. We returned a function from the helloBuilder scope that can access the person variable. If person was garbage collected, calling our sayHello function wouldn’t work because there would be no person to greet.

What happened is when we created our inner sayHello function, JavaScript looked at all the variables sayHello can see and said, don’t garbage collect these, I might need them later. We say that the sayHello function closed around the person variable, or it created a closure. As long as our inner function is still accessible in the system, all of the variables it can reach will be kept safe.

Loops

Closures are most often encountered when attaching event listeners to elements. It can also lead to some very confusing errors, and this is the most common.

var divs = document.getElementsByTagName('div');
var i;

for(i = 0; i < divs.length; i++){
  divs[i].onclick = function(){
    alert('I am div #' + i);
  }
}

Here, we gather all of the div tags on our page, and attach a click listener that will alert which number that div is in the order of the page. We use a normal for loop to go through each div in our array and assign a click listener to it. Inside that click listener we use the variable i to indicate which number div it is. So when we click the first div on our page we want it to say I am div #0, and the second will say I am div #2, etc.

What actually happens is that no matter which div you click, you will get the same number, which will be the total number of divs in the page. Why is this? When we refer to i in our individual onclick functions, we are actually referring to the variable i itself, not it’s current value. By the time we actually click our divs, the i variable will have been incremented to be the total number of divs, so that is what’s displayed

var divs = document.getElementsByTagName('div');
var i;

for(i = 0; i < divs.length; i++){
  (function(number){
    divs[i].onclick = function(){
      alert('I am div #' + number);
    }
  })(i)

}

To fix this, we actually do something tricky. We wrap the inside of our loop with a function, and then immediately call it. We let our new function take one argument, which will be the number of the current div. When we call our new function we pass i, and the current value of i will be assigned to the number argument of our new function. Then we can assign each of our listeners, and refer to number instead of i. This will work because we have created new separate closures for each of our divs, so they won’t interact with each other like before.

Closing

And that’s the basic idea about closures. The concept of closures is so important in the JavaScript language that understanding how they work will make you a much better javascript programmer