Complete Guide To "Above The Fold"

What is "Above the Fold" term means and how does it affects a website, its role in design? Read here a complete guide to fold with some useful tips.


Complete Guide To "Above The Fold"Above the Fold - The part of the page which is visible without having to scroll down. The concept originally came from newspapers. Anything on the upper half of the front page was considered "above the fold". The words 'Above the fold' is a term that has raised a lot of question with designers in the past. The main topic of conversation is what should be kept above the fold and what should be kept below. With the rise of mobile internet browsing, tablet usage and evolution of computer screen sizes. The role of the fold is forever-changing. Therefore, it's not a rule that should be lived by but rather something to consider.


Screen resolution - These days people use screen size larger than 1024 x 768. Here's how it has changed over the last 5 years. As the screen size increases, more information can be included 'above the fold'. Therefore, the term fold becomes undefinable.

Scrolling - It's really useful to bear the statistics in mind to act as a rough guide. Fold is a lot less relevant these days and that is actually quite difficult to define. Behind aware that there is a fold but not dictating your web design to it will produce the best results. 23% of visitors scroll on their first visit to a website. However, if you have a well designed layout then visitors are more than willing to scroll.

Browsers used -  In web design the fold was based on the most common browser sizes. Studies have shown that Firefox, Chrome and Internet Explorer are the most popular browser. This also demonstrates that there is not necessarily a set browser which makes the fold less relevant.

Design Tips
  • Don't try to cram everything in at the top of the page - spread your content out land divided into digestible chunks.
  • Include a clear heading and description of what your website offers your visitors at the very top.
  • Make sure you have a clear navigation system in place directing your visitors to useful pages and areas that they are looking for.
  • Your copy should be engaging and lead somewhere. This will encourage your visitors to carry on reading and scroll down the page.
  • Include useful information below the fold as well. You need to spread your information out so have things such as contact information at the bottom.
  • Test your website across different browsers and devices to make sure you are making the most of your fold.
Source : Basekit.com/designing-a-website-above-the-fold-infographic
Previous Post Next Post