from our blog

Why Above the Fold of a Webpage is Important (For Marketers)

Let’s rewind the clock a decade ago. There’s an interesting marketing strategy we see in the Wal-Mart stores and other giant brick and mortar stores. An experiment was conducted in a retail store where they placed certain products at the eye-level shelf and observed the sales pattern. Items placed at the eye level or close to the eye level were bought first than those places above or beneath the eye-level shelf. That's why brands fight for the right shelf in the retail stores.

 

Eye level is Buy level

 

In digital marketing, a similar concept is tried and tested on the landing pages and webpages. Your screen is the top shelf. Anything you see after scrolling is the bottom shelf.

 

Webpages that had the most important information, the Call to Action above the website fold on desktop had higher conversion rates than those needed scrolling.

 

Above the fold means all the information displayed without scrolling the page. Now, you might be thinking that putting everything putting above the fold would make the webpage messy. But, it’s quite the opposite. Knowing that there’s limited space, the copywriters carefully choose the words to display the information. They eliminate the fluff and deliver the same message in a concise manner.

 

The designers then make room for graphics, content, form, and a CTA. If your webpage demands more content to give information, remember to put the most important elements above the fold.


Let’s take another example. In print publications, the editors and news writers follow the method of the inverted pyramid.

The Inverted Pyramid Method

The inverted pyramid or inverted triangle method enables the receiver to receive the most important information on the top. This information is presented in descending order of importance. This feature allows the readers to read the most crucial details quickly so they can decide whether to read the whole story or not.

The Structure of the Inverted Pyramid

This technique uses the formula of 5 W’s and 1 H as follows

  • Who
  • What
  • When
  • Where
  • Why
  • How

The inverted pyramid composition works well for two reasons.

  • It is an elite way to attract and keep readers engaged.
  • If the story is written in an inverted pyramids structure, none of the crucial elements will be lost when the reader quits reading halfway without completing a story.

Apart from making things easy for readers, it has been proven a stress-relieving method for editors; since it allows editors to crop the information that is not so important to fit the story in the column. Also, it is a very useful tool for thinking and organizing because it forces the editor to sum up the point of the story in a single paragraph.

 

We all have seen the completely folded newspaper. The headlines are written in bold with the image. Even two important stories are displayed ‘Above the newspaper fold’. People going to the office can read the news headlines from the papers placed at the stand far from them. Just a few seconds of attention span and the papers still inform enough to the user whether they want to read further or not.

 

the inverted pyramid

The same principle is applied to webpages. If the user is interested in the information mentioned above the fold, they will scroll down for more for sure.

 

Now, let’s see some beautiful above-the-fold webpage content examples

 

1. Shopify

shopify-new


Good use of the space by Shopify. Clean text, relevant images targeting the startups in the eCommerce sector, and a fine CTA for a free trial completes the above the fold of the page.

 

2. Evernote

Evernote-new

 

Evernote mentioned all about their product in 4 four words. These are enough for a new user to know what Evernote is all about. The subject text below explains some more features. The images on the right side show that it works on Desktop and on mobile devices. The sign up for free CTA would make everybody click on it.

 

3. PicsArt

PicsArt-new


Simple and elegant with a lot of white spaces, PicsArt displays the editing software interface on the right side. The white space is making the message and CTA pop out.

 

4. WordPress

WordPress has two beautiful versions. Here's the first one

 

WordPress-1-new

Here’s the second one from WordPress

 

WordPress-2-new


Both the versions are minimal. Both look good. The text above the CTA button talks about what every website owner would want.

5. Ahrefs

 

Ahrefs-Home-Page-new


Clear and to-the-point just like a newspaper headline and everything above the fold of the webpage.

6. Adobe

 

Adobe-new

Adobe added a VFX graphic on the page. Offering a free trial is a great move. The users can get familiar with the software. Along with free trial, Adobe also gave an option to see what’s new - another great edition.

 

7. Chevrolet

Chevrolet_Cars_Trucks_SUVs_Crossovers_and_Vans

 

Chevrolet made the screen size slider but kept everything above the fold of the webpage.

I hope this helped you understand the importance of the above the fold of a webpage. it's all about the eye level - started from print publications and retail stores, it beautifully blends with today's digital marketing. 

 

Download your ultimate guide to agile marketing for free.

guide to agile marketing

Simranjeet Singh

Written by Simranjeet Singh

Writer | HubSpot Certified Inbound Marketer and Content Marketer