Web Design

What is the difference between above and below the fold?

5 October 2018

Introduction

In web designing, it is vital for you, as a designer and developer, to know what is meant by the terms above-the-fold and below-the-fold. You should be able to distinguish which part of your HTML markup lies in one fold or the other because this can help you in optimising your webpage with a solid knowledge on what's critical and what's non-critical.

Above-the-fold

Above-the-fold content is simply content seen on an HTML page WITHOUT the need to scroll down.

Whatever appears on a screen, as soon as a web page loads into view, without scrolling is above-the-fold.

What is above-the-fold on one device may not be above-the-fold on another.

Devices differ in their screen dimensions (width and height) and therefore designs can change according to them resulting in more or less content begin shown above-the-fold.

Below-the-fold

And well you can now relate what this term means - it is the exact opposite of above-the-fold.

Below-the-fold content is simply content seen on an HTML page WITH the need to scroll down.

So everything, except for whatever appears right-away on the screen (without having to scroll), is denoted by below-the-fold.

And again what's below-the-fold on one device might not be below-the-fold on another one.

But why do I even need to know this?

Good question! There isn't, uptil now, anything as such special to these folds except for where they lie. True but that is not true!

  1. First of all many resources on the net utilise these fold terms therefore if you don't know what they mean you might not understand what the resources mean.
  2. You want your user base to increase and your site's traffic to boost right? For that you need to understand how to work effectively in above-the-fold HTML. You need to keep the user from pressing the back button and quickly grab his attention in your content. A hook in above-the-fold can get your reader to scroll down the page and become a customer. That's the importance of knowing this fold story!
  3. Website optimisation is another big topic on all-time discussions. A part of it lies in deciding what is critical (above-the-fold) and what is non-critical (below-the-fold) in an HTML page, and consequently making sure the critical portion is loaded as swiftly as possible.

Sometimes its not that you can directly benefit from knowing something, but benefit from other things that utilise it and that is just what these folds are about.

More Courses

Learning shouldn't stop at just one course!

JavaScript

Make your web pages interactive and dynamic

Enroll »
AJAX

Reload content without reloading the whole page

Enroll »
CSS

Give your web page the look you want

Enroll »
JavaScript RegExp

Matching patterns within strings in JavaScript

Enroll »
Advanced JavaScript

The real-pro aspects of JavaScript

Enroll »
Sliders

Divide content into different slides

Enroll »
Lazy Loading

Learn to load images when the need be

Enroll »
Autocomplete

Make searching more efficient

Enroll »
Python

A simple and powerful programming language

Enroll »