Above the fold

Above the fold refers to the part of a web page that is displayed directly to Internet users without them having to scroll down the page

While it was possible to display several elements in the upper part of a web page, this is no longer the case

  • What does this notion really mean?
  • Is it useful?
  • What are the best practices to take full advantage of it?

These are some of the questions I will answer in the following lines.

Chapter 1: What does Above the fold really mean?

In this chapter, I explain what the expression “Above the fold as well as its importance and implications.

1.1. above the fold: origin and meaning

To understand the origin and meaning of the expression “Above the foldto understand the origin and meaning of the expression “Above the fold”, we have to go back to the time when the printed press was still one of the main sources of information

In those days, in fact, when newspapers were displayed, they were folded so that people could see only the most exciting headlines.

 le sens de Above the fold

This is actually a marketing action whose objective is to attract people’s attention by showing them the most important headlines

This idea will be taken up later in the design of websites and we will talk about “Above the fold” or waterline to designate the area that is displayed when one arrives immediately on a page without having scrolled down.

1.what are the different elements that are usually found in an “Above the fold” area?

Generally in the upper part of a website, you will find the following elements:

les elements qui se trouvent dans above the fold

1.2.1. The logo and the name of your brand

This is a graphic element that you use to establish your brand image and allow your visitors to get an idea of what you stand for.

Le logo et le nom de votre marque

1.2.2. The site’s navigation menu

This is the set of arrangements you make to allow your visitors to have a framework that will allow them to explore your site and learn more about what you offer.

 La navigation du site

This framework must be intuitive and simple

1.2.3. Contact information

Another element you can include in the “Above the fold of your site is the way by which the Internet users can contact you.

Les informations de coordonnees

This is an important element for the internet user, as it tends to prove to them that you are a legitimate business.

However, it should be noted that this part is not above the waterline on all websites. The same is true for :

1.2.4. Social media buttons

Today, it is more than difficult to imagine an online presence without social networks.

Les boutons des medias sociaux

Indeed, they allow users to subscribe to your social accounts and follow your news.

1.2.5. The key selling point

The key selling point is what allows you to instantly show visitors to your site what you offer.

 L argument cle de vente

It must be

  • Simple ;
  • Concise;
  • And brief

It is usually one line long and displayed in large type.

After this presentation, if you are wondering about the interest of talking about the part that is “above the fold of your site, let me tell you why it is important.

1.3. How important is the “Above the fold” part for a website?

In web design, the “Above the fold” part is an important element in web design. This is justified by the fact that it is the first element that appears on the screen of visitors when they arrive on a website. It must therefore make a good impression and hold their attention.

cequ est above the fold

In addition, being the first element that is seen on a website, it has a certain visibility that makes it conducive to hosting the information that we would like to put first on the site.

This is precisely what the study on the importance of being seen carried out by Google.

In this study, you will learn that the ads placed in the “Above the fold had a 68% visibility as opposed to the ads that were towards the bottom of the page whose visibility was around 40%.

 les annonces placees dans la partie Above the fold avaient une visibilité de 68 %

The most important elements of the site can therefore be placed at this level to have more success

But remember that there is no question of positioning several important pieces of information at this level

The strategy to adopt should rather consist in using this part to push the Internet users to go further in the scrolling of the site pages

In any case, when it comes to the “Above the foldit is important to take into account both the mobile-friendly design requirement and SEO requirements.

1.4. Some mobile and SEO considerations for the “Above the fold” area

1.4.1. Mobile considerations

It is almost impossible to identify the location or give the measurement that the “Above the fold” area should have

Because today, the location depends more on the settings and characteristics of the devices (sizes, screen resolutions, browsers, etc.) used to access the website.

Considerations mobiles

Moreover, Internet users adopt new habits depending on whether they are browsing with their smartphones or on their computers.

 l habitude des internautes avec la navigation sur differents appareils

For example, the fact that browsing on most mobile devices is done in portrait, Internet users are more willing to scroll down to discover their content

1.4.2. SEO considerations

It is true that ads displayed above the waterline have more visibility than those displayed towards the bottom of the page

However, abusing them is not beneficial for referencing of your site

Sites that do this can see their SEO traffic decrease. I would therefore recommend that you ensure a certain balance between ads and the user experience of your site.

 81 % des internautes ont ferme un navigateur a cause d une publicite pop up

Indeed, the ambition of a high quality user experience led Google to launch in 2012 its “To heavy” layout algorithm

Its task is to search and punish web pages that have a high number of ads above their waterlinesns.

 le role de l algorithme To heavy

This algorithm was subsequently modified three times

  • First in October 2012: About 10 months after the launch of the layout algorithm, it was changed. And according to a tweet from Matt Cutts this change affected 0.7% of English queries

  • Then in February 2014: Specifically on February 6, 2014, Google to perform the update of its algorithm, but no explanation on the impact had been notified to web designers ;
  • Finally in November 2016: When you are hit with a penalty due to a large number of ads above the fold of your site, this penalty could only be lifted if Google bots crawl your content The 2016 update solved this situation by dedicating the automation of the algorithm. This allows it to take into account changes in real time

Beyond these various changes, it should be noted that google’s layout algorithm does not systematically penalize everyone who has put ads above the fold on their site. It is rather intended for those who make an excess.

This is precisely what Matt Cutts defends when he says:

 l affimation de Matt Cutts

So as you can see, Google’s layout algorithm helps get webmasters to consider user experience in their site design

Now that you know what the term “Above the fold” and how it is useful for your site, I suggest you discover in the rest of this article the best practices for their design

Chapter 2: Best practices to consider when designing the “Above the fold” part of your site

Here are some tips you can use to efficiently design the “Above the fold” part of your website:

2.1. keep the design simple

Don’t load a lot of elements in the above the fold area. This could prevent your site visitors from easily finding what they are looking for or cause slow loading time.

As you know, both of these elements are likely to cause bounce of your visitors. Instead, keep it simple and create a user-friendly, well-organized top of page.

creez un haut de page convivial

Consider, for example

  • Adding a featured GIF content to give some animation to your page
  • Identify your key selling point by trying to be as simple and concise as possible
  • Add a short sentence if necessary to explain the selling point.

2.2. Make the content attractive

Each time a user arrives on the “Above the fold” area area of your site, he gives you an opportunity to convince him

Take this opportunity to really convince and delight them.

contenu attrayant

To do this

  • Build your web pages in simple ways;
  • Adopt a writing and design style that reflects your brand;
  • Adopt and show your brand colors in the content you write

2.3. design your pages to be user-friendly

To have a greater effect on Internet users, the content you create must offer an optimal user experience and be user-friendly.

conception de pages conviviales

In fact, before you make your content public:

  • Test it and make sure it works properly;
  • Check that it is easy to interact with;
  • Check that it loads quickly.

2.4. Fix the challenges of your “Above the fold” area for visitors

When designing this part of your site, there are a number of things you should check

  • Make sure the content is mobile-friendly;
  • Check how it displays in the major browsers (Chrome, Firefox, Internet Explorer, etc.);
  • Also consider responsiveness to make sure the site displays properly on different screen sizes

2.5. Avoid creating a “false background” on your site

A “false background” is when a section of your site gives the impression to the user that there is nothing left at the bottom of your site.

faux fond

You must avoid this by including visual clues in your design that will allow them to understand that there is content towards the bottom of the page:

 crer des visuels permettant de comprendre le contenu

You can integrate directional cues to ask them to scroll down or up.

Integer des signaux directionnels

2.6. integrate identifying information into your content

Placing identifying information on a website helps to build trust with users.

 Integrer les informations d identifications

They will be able to easily connect with you, but also search to see if you are a legitimate business or not

A publication of the wpforms has proven that putting contact and security information on a website leads to a higher conversion rate.

2.7. Don’t forget to focus on the quality of your site’s content

Even if you follow all the best practices and have done a good design in the “Above the fold of your site, you should always keep in mind that content is important

above the fold 2

In fact, meeting the requirements of attractiveness and so on does not always guarantee you a high conversion rate

This is partly due to the quality of the content you offer. It is indeed thanks to this quality content that visitors will be interested in what you offer and will be more inclined to scroll down the page

Keep this in mind and always associate quality content to your “Above the fold”

In summary

The creation of a website always includes the design of an “Above the fold” part

If you have always overlooked its importance, this article will help you understand what it is and what it means.

It also provides you with various tips on how to set up “Above the fold parts on your site.

Leave a comment