The “Above the Fold” Myth Debunked

By Eugen Oprea

eletavr point 7 click list buildingHave you ever found yourself saying: “I just need this above the fold so it will be more visible”?

Well, we’ve all been in this situation, but things have changed since 1994 when people were not that used to scroll.

Even if everyone is not willing to admit this, people have learned how to scroll. It’s 2013 after all.

“Above the fold” comes from newspapers because the upper half of a newspaper was where the most important stories and images were added.

But this is the present and there is research that supports the fact that “Above the Fold” is a myth.

Plus, I will show you in this article a better place to put your calls to action (CTA).

Nowadays, we use “above the fold” to mean the visible part of a screen (usually the first 600px) where most people like to stick everything they can to make it visible.

If you are willing to dig into it, you can see what’s below the tip of the iceberg.

Research has shown that while users spend 80% of their time reading the information above the fold, they do know how to scroll. And it turns out that scrolling beats paging, because it’s easier for the user to just keep going down.

Additionally, Bnonn Tennant, who wrote about “Why “The Fold” Is A Myth – And Where To Actually Put Your Calls To Action,” has an interesting perspective on the “above the fold” myth the Kissmetrics blog.

Again, backed by research and testing.

He starts by mentioning research done by MarketingExperiments which got a 20% increase in conversion rate just by moving the call to action from above the fold:

… below the fold.

And then he shows research done by Michael Lykke Aagaard from Content Verve (among others) who revealed a test where he moved the call to action (CTA) way below the fold. That move led to a 304% increase in conversion.

Bnonn also mentions that “Higher conversion rates have nothing to do with whether the button is above the fold, and everything to do with whether the button is below the right amount of good copy.”  I completely agree with him.

If you do a good job writing good copy that will keep your visitors engaged, it will have a positive return for you.

A CTA always does better if it’s accompanied by some really well written copy.

Chris Lema also ads some compelling reasons why we should stop talking about the fold.

Now, let’s see how you can apply this to your website and what is the best place to add your calls to action.

How does this apply to your website?

Based on some of the above research, last year after I redesigned my website, I decided to do my own research on this topic.

I started by getting myself an account with CrazyEgg and installed the tracking software on my blog.

After the website received a fair amount of traffic (over 1,000 visits) I started to look at heatmaps. They looked like this:

You can see that most of the visitor’s attention is essentially below the fold (look for the brightest areas) and interest areas, such as the email signup form from the top of the sidebar, are essentially invisible for them.

This was the point when I started to think at what I later called the “Cloud Box”.

What is the Cloud Box?

The Cloud Box is essentially a floating box generated by a script, which moves along with the reader when reading an article.

You can add some code in a text widget, link it to a script and boom! there you have it (read more and I will show you how to create one for yourself).

You may not know this yet, but you are already familiar with the Cloud Box. You have already seen it just by looking at the right sidebar now.

However, I am not the only one that is using this. It has been successfully used by Neil Patel on his QuickSprout blog…

… and on the The Daily Egg, which is CrazyEgg’s blog.

In one of his articles, when talking about how you can convert blog readers into customers, Neil even mentioned the fact that the ad he has in the Cloud Box gets clicked on 2.58% of the time.

And if you compare this with .94%, the CTR (click-through rate) of the static ad in the sidebar of the same blog, that’s a difference of 274%.

Just think about improving your CTR with 274% or 670%!

For my ads, out of the total traffic that this site sends to Elevatr through the sidebar ads, 87% is being sent by the Cloud Box. This is essentially 670% more traffic than the static ad from the top of the sidebar sends.

But it’s not just for ads!

I found more smart people who use this with success, such as the Freshome blog.

Mihai Micle, the founder of Freshome, says that he has seen significant improvements for the Pinterest and Facebook widgets.

You can get really creative with this and add quite anything you want to promote on the Cloud Box, such as:

  • Twitter follow buton
  • Facebook like widget
  • Pinterest button
  • Your about me/us information
  • Information about your products

Essentially, anything that you want to be more visible for your readers.

But it’s important to rotate what you promote in the CloudBox because people get “widget blind” and will not see it anymore.

This way, your visitors will always have something new to interact with.

That is why Mihai started with a Pinterest button, now he uses a Facebook like widget and at some point he may use that spot for ads.

Additionally, you may have noticed on the Kissmetrics blog a call to action to signup for the Kissmetrics app, which I bet will be effective if they keep it there.

What Happens When the Ad is Replaced With an Email Cloud Box?

This one of the first things I was thinking about when working on Elevatr.

Elevatr is a premium WordPress plugin that helps you easily create signup forms and one of my goals was to also have a Cloud Box.

Before Elevatr, I was successfully using the cloud box on my blog for list building and kept adding people to my email newsletter by adding the Email Cloud Box manually.

But after I launched Elevatr, more people started to use it, like Henri Junttila from Wake Up Cloud.

He started to use Elevatr soon after I launched it and just in January alone, the Email Cloud Box was responsible for 15% of his subscribers.

But, you should be aware of the fact that Henri had already optimized his blog during the most recent redesign and placed the signup boxes strategically.

How to Create Your Own Cloud Box

Now, because I am really happy with the results that the Cloud Box can bring, I want you to be able to use it.

So I put together the code that you need and a short tutorial on how you can add it to your website below.

First, you will have to download the following JavaScript and upload it to a directory called js, within your theme folder (wp-content/themes/your-theme/).

If it doesn’t exist, just create a new one and upload the file to that location (wp-content/themes/your-theme/js/).

Again, just to make sure that you get it right: download the following file and upload it to wp-content/themes/your-theme/js/.

Remember to unzip the file before you upload it.

Next, you need to add the following code to your functions.php file. You can do that from [Appearance > Editor] in your WordPress admin account. But please do this with caution as if you delete something from this file, you can break your website. In case you are now familiar with this, please ask someone to do it for you.

Finally, all you have to do is just upload your ad image and include it in a text widget at the bottom of your sidebar.

Here’s an example of what I use for my Elevatr ad:

Just copy the above code and paste it in a text widget after you replace the links.

What About an Email Cloud Box?

If you want to have an Email Cloud Box in your sidebar, all you have to do is just replace the link and image with your signup box code.

Remember to keep the code within the tag.

Looking for a simpler way of adding the Email Cloud Box?

In case this looks like a language that someone from Mars is speaking or maybe brain surgery, then you may want to look at a simple way to do this.

And yes, there is a simple way of adding an Email Cloud Box to your sidebar and get more subscribers.

You can actually create an Email Cloud Box with my premium plugin, Elevatr and it should take you about 5 minutes to do it.

With Elevatr, all you have to do is just connect to your preferred email marketing provider (MailChimp or Aweber + iContact coming soon) using your API key and choose Cloud Box while building your form.

And creating the form is a darn easy process – just point-and-click.

You should check out Elevatr today.

Back to you

Before I ask you to go and try this, what are your thoughts about the “Above the Fold” myth and the Cloud Box?

I would love to hear your opinion.

So, once you leave a comment below with that go and test the Cloud Box and then come back to let us know your findings.

Source: http://feedproxy.google.com/~r/eugenoprea/~3/WgT_O4nmEi8/