If you are a web designer or even involved in print then I am pretty sure you will have heard the term “above the fold”. Not just this, but I bet at some point in your career you have proposed a design idea to a client including a mock up and their response was:
“ I like it but can we push everything higher up the page so all of this area is above the fold. I can see there is quite a lot of white space so if we reduce all that and cram it together then we can get it up there.”
WHERE DID THIS ORIGINATE ?
It all originated in the Print world. “above the fold” corresponds to the the way a newspaper or broadsheet was folded over and the most important news and attention grabbing headlines were placed on this first page. These headlines were then used to entice you to buy the paper and carry on reading.
This theory was replicated in early years of online and Ecommerce. It is in fact good practice still to this day!
The reason for this is that you only have a very, VERY short amount of time to grab the attention of the visitor on a website and you want that “hook“ to make them stay and read on, so it is the same principle, put you most valuable information as near the top as you can to tell the viewer exactly hat they have landed on and what you do and how you can help them.
Also, in the early years people didn’t really know what to do with a scroll bar so it was important to reduce the chance of making them scroll for the important information as much as possible.
Now, the question is:
“In this day and age of different screen resolutions and responsive design does the “page fold” even still exist?”
I constantly read about eye tracking tests and heat maps and the results that appear is that the scroll bar is one of the most used parts on the page, proving that viewers nowadays aren’t against using it and assume there is more information below the fold so they go on the hunt a bit more.
Now the eye tracking tests still show the way we read is from the top left down to the bottom right, so “yes”, it is still common sense to put your most important headings and “hooks” as near the top as you can, so even when the page is resized in different browsers this information will still be visible.
Below Is my own site. I have tried to demonstrate the way I have designed the site to include the main messages above the fold and making sure the viewer knows there is more below.
Juice My Design - Page fold
So, where do this all leave us?
Well, the bottom line is that you have to put yourself in the seat of the visitor. If you think that they may land on your site and not stay then you are doing something wrong. If you think they can’t work out what what services you offer then you are not marketing your business well enough. If they could find out what you do by scrolling then again, you are doing it wrong, but if you get them on your site and they stay and then they want to scroll then you are in a great position.
Just remember in this era of responsive design when blocks of content move around dynamically on different devices how can we as professional design the site layout with an imaginary line? well you can’t but just remember:
Your site is about hierarchy and you need to mention your most important messages first and leave the rest as a discovery and journey for the user.
