Where to put your CTA? Is above the fold still relevant?

What is ‘The Fold’?

‘The Fold’ is a term that originates from the printing and folding of newspapers with the upper front half being prime real estate for any large story/ article while being folded on the stall bringing in the most attention.

On the web, no set height defines ‘The Fold’, but it refers to anything that isn’t immediately visible without scrolling. Setting a standard height for this fold unlike on newspapers is impossible due to the mediums we consume on the internet, via Desktop, Tablet, Mobile or even Tv’s/ monitors. Some sites and agencies define ‘The Fold’ across all their platforms creating similarities, and adjusting their layout based on the browser size, and resolution resulting in ‘The Fold’ never being a static feature.

How to factor in ‘The Fold’

Many companies have examples or try to use a standard for all their sites, this is to create similarity and make the design/ dev process easier. For example, some define 1080px as above the fold; whereas others say it is 768px. These are both correct in their way and depend on the aspect ratio with 1080px being the height for a 1920px browser window, and the former, 768px being for 1366px browser windows (The standard for a 13in Apple Macbook).

Some sites also do away with the idea of content below ‘The Fold’ and in doing so remove the issue altogether. These ‘compact’ designs are normally creative concepts and do not function as websites for B2C or B2B. These sites normally use other features such as horizontal sliders, pop-ups or overlays to add additional content without breaking ‘The Fold’.

How to avoid ‘False Bottom’

The ‘False Bottom’ is a visual error found when you combine the look of a compact site with the functionality of a full site. This doesn’t give the customer/ visitor a reason to believe there is something below the fold and as a result, they will attempt to scroll less often. 

The most common reason for the ‘False Bottom’ is huge hero sections filled with imagery, these take up the entire space above the fold and typically include short headlines and a little to no body text and either a CTA (Call To Action) or an email capture form.

Toggl.com is a tracking/ planning application that has juggled the issue of the ‘False Bottom’ on its Homepage over the past few years, iteration after iteration.

In their 2018 Q3 site, the hero suffered from the ‘False Bottom’, this was achieved by having the background to the hero section be light blue. They did however have a CTA above the fold, this was their main CTA and linked to the Sign-Up user journey.

This style of hero was kept in the 2020 Q1 redesign which involved an animated 3d illustration and a change from a light blue background to pink. The issue of the ‘False Bottom’ still persisted.

In late 2020 Toggl had a rebrand, this was good for the company and brought it into the 2020s removing the branding that had been consistent with the company since the 2010s. In the rebrand, the focus was on video and 3d animated illustration to be used on the website allowing for a full redesign of the site. In the new redesign, the hero section was reduced in size and a video was introduced, this allowed for the content to be viewable above ‘The Fold’ removing the issue of the ‘False Bottom’. They also introduced a content block underneath advertising the 3 products.

Their 2022 and the current site has since changed again, this time opting for a card-based hero section showing off their 3 products introducing separate links for signing up and exploring more detail of each product. 

One way to avoid the ‘False Bottom’ that Toggl currently haven’t tested is the addition of a strong directional cue to suggest scrolling. This could be an arrow icon, a mouse icon or a mask on the hero image that is an arrow.

CTA placement among top sites

We chose 100 sites from various sectors allowing us to compare not just site to site, but also sector to sector. This data we then processed into the data available in the graphs below. 

We found that 83/100 sites did in fact have a CTA above the fold confirming to us that ‘The Fold’ is still important. We also found that sites without a CTA above-the-fold had several reasons behind it and it wasn’t just as simple as we thought.

We then tested the data against the sectors to see how this would affect the data and see if certain sectors over others had more CTA above-the-fold. When looking at the data we found that more than often, sites that targeted B2C rather than B2B had more CTA above-the-fold. We hypothesised that this was due to stronger customer journeys built around quick sales whereas B2B sites focused on building trust and explaining services they offered before asking customers to fill out a form to be contacted by a representative.

Finally, we wanted to look at where the CTA sent customers and to see if our hypothesis followed the results. We found that 53.7% of CTAs sent people to detailed content pages introducing the customer to offers and about us. 24.4% sent customers to product/ services pages allowing customers to make purchases quickly hiding unnecessary content slowing the customer journey. Very few sites targeted Log-In, Sign-Up or Subscription journeys explaining to us that very few sites focused on returning customers in the Hero section and instead focused these actions on either Navigation or different pages other than the homepage.

To gather this data I was helped by our very own Data Scientist Danny Waites. He was able to create an algorithm that checked the sites for button and CTA tags within the hero section streamlining the data collection process. Embryo has taken part in many data-driven projects such as Intermingle (A piece of software allowing us to look at search results pages for ALL the keywords that are relevant to your business).

Why Above-The-Fold CTA is important 

As found in the results more websites use a primary CTA above-the-fold than below. This result is backed up in other studies, mainly by NNGroup and Google.

In 2015 NNGroup completed a study called ‘The Fold Manifesto: Why the Page Fold Still Matters’, this study looked into viewed pixels via in-person participants. They found from an analysis of 57,453 eye-tracking fixations the 100 pixels above-the-fold were seen 102% more than the 100 pixels immediately below the fold. “Seen” during this study was defined as if the users actually looked at that section of the screen as opposed to it just appearing on the screen, this definition separates those that scrolled quickly from those that actually viewed each section. 

In 2014 Google completed a study called ‘The Importance of Being Seen’, this study looked into CTA placement above-the-fold, similar to our study, but looking into even more detail checking the positioning of the CTA above-the-fold to see if placement above the fold made a difference. Google found that ‘The Fold’ is even more important and that the highest view-ability of a CTA was just above the fold and having your CTA higher than this had a reduced view-ability score with a reduction of over 10%. They also back up the findings of NNGroup finding a large drop-off after the fold. 

Why Below-The-Fold CTA placement can be important

Below-the-fold CTA placement is still as important as Above-the-fold, but is never used instead. Including Below-the-fold CTAs can lure more relevant leads meaning profit-generating leads are found more often than not. This is due to the reduced volume of customers scrolling through the site and so the customers that are doing have more of a chance of understanding the service/product on offer.

Below-the-fold CTAs are also very valuable in B2B companies. This is down to customers visiting this site already knowing the service/ product is instead looking for a trust-building exercise or how a company can offer a better price or service/ product than others. 

Conclusion

To conclude CTA placement is crucial Above-the-fold and should always be measured against the target audience you have. With B2C it’s good to be critical & place stand-out CTA Above-the-fold increasing general leads with the hope of converting these. With B2B on the other hand it is less important to be shouty and is more important to create trust and describe the perks of your service/ product.

Embryo has departments in PPC, and Paid Social to help you start your lead generation journey, we also have departments aiding in providing better lead conversion such as Web and Organic. We are experts at helping to convert customers into sales, get in touch with our team to learn more.