What is The Difference Between Above and Below The Fold?

Stay updated with our latest articles:

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.

Never miss an article

Follow Codeguage on either of the following channels and stay updated with every latest blog article that we publish.

Improve your web development knowledge, today!