Web Design 101: What Does “Above The Fold” Mean?

 What Does “Above The Fold” Mean In Web Design?

Wikipedia definition:

Above the fold is sometimes used in web development to refer the portions of a webpage that are visible without scrolling.

Wikipedia's definition of “below the fold”:

The part of the page that is not above the fold. The part of a webpage that can't be seen without scrolling down.

Understanding what “above the fold” means is a basic, but critical component in web design. You want to be sure to design your website around this concept with your best and most appealing attributes shown in this area to entice readers to continue to scroll down to the content below the fold. If your place boring, dull, or misleading content above the fold, chances are your readers will leave the page without scrolling to the rest of your content.

The catchy part about “above the fold” is that the fold can vary based on your visitor's resolution. This can get a bit confusing, but according to statistics the above the fold portion is on average larger than it has ever been in earlier years with an average resolution over 1024 x 768. For more tips on designing a website above the fold, scroll down and view the excellent infographic!

Real Life Example Using Our Homepage

above-the-fold-ttrdotcom

Tips For Designing A Website “Above The Fold”

Credit: Basekit

Have a question about this concept? Ask it in the comments section below!

  • So what can I use to test my companies website? I’m particularly interested in the feedback about the “above the fold” section of our site. (Good, bad, how to change so it’s working). Is there something I can use to track the states of our page? My boss has someone else that designed and maintains the site, so I can’t use anything I have to actually link in the page. Ideas?

    Thanks

  • >