What does Above The Fold Mean?
In web design, above the fold is a concept that refers to anything that appears in the browser when a website first loads, without having the need to scroll.
The term is borrowed from the newspaper industry where above the fold came to represent the area of the front page that faced a potential customer on a newsstand.
In order to read this article you are going to have to scroll, it’s a fact with most websites. A long time ago we learned that we have to scroll to use a webpage; do you know anyone who has broken a finger on the scroll wheel? Even so the above the fold notion still remains.
How to find out where the fold is on your website.
First of all, you’ve got to bear in mind that the fold is an abstract concept, abstract because it relies on the resolution of your monitor. The higher the resolution, the lower down the fold will be. So in fact what we are talking about is the average.
The fold is an increasingly shifting beast. It used to be that everyone viewed the web through relatively similar sized monitors, with the same resolution using Internet Explorer. Those days are gone. Today you might view the web through any number of browsers, via different monitors and on different devices such as your desktop Mac, laptop PC, iPhone and probably before long iPad, each time it is likely the fold will be positioned differently.
If you want to see what your average customer sees, go into your web analytics software and view your visitors screen resolutions, calculate the median average screen resolution from the results. Next change your monitors screen resolution to those settings (if you can) and check out where the bottom of the browser is. This view is what the average person viewing your website is going to see.
Why position things above the fold?
You don’t have to! The temptation is to create a web page with everything above the fold. You cram everything in there, to hell with the white space and readability! But it doesn’t have to be that way.
The fold is a guideline, a rule of thumb, however it seems to have become the defector over-arching rule of web design, one to which most web designers blindly obey without ever questioning.
What was the original “Above the Fold Rule” intended for?
Originally, when the newspaper industry went on about above the fold, they were talking about the best way to grab someone’s attention to entice them to buy and then read the rest of the newspaper.
Ultimately newspapers want the reader to read all the newspaper and that’s how we need to look at web design.
How long does it take to decide to stay on a website?
About 3 seconds, or so the internet stats people would have you believe. If your gut reaction is to throw everything into that first browser screen, stand back a second and ask yourself – what would you rather see, a cluttered homepage or an uncluttered well designed homepage?
Imagine how much of the website would be wasted if all the best quality information was shoved in the faces of your visitor as soon as they landed on your website – would there be any point going elsewhere on the site?
As with every web design standard think about them before you blindly adhere to them.
Informational Build Up vs Transactional Immediacy
I think at this point we need to accept that there are different types of websites and different reasons why a visitor would find them.
If you are giving some information away, then you want your visitor to work their way through your site, you want to be guiding their visit with carefully crafted copy, well positioned and themed call to actions.
If you have a more transactional site, such as an ecommerce site, it may be best to put fewer barriers in the way of the visitor – in this situation it is likely you want the actionable points to be at the top of the page, however that should not stop you having a page with a scroll function to give the visitor more information if they require it.
From an SEO point of view a longer page is generally better, as it means more text is required to keep people occupied to get to the bottom – which keeps text hungry search engines happy.
What’s the best page layout for the web?
I’m not saying burn those bridges, don’t drop every principle of web design you know simply because you now feel liberated, we’re not talking about dropping things for the sake of it, we’re not reinventing the wheel.
That said, what you need to do with every design and page layout is to look at it from the point of view of the user journey and how they will funnel through not only the site (as we normally think of things) but also how the user will journey through the information presented on each page.
Whenever 2am starts a new project the first thing we do is stop. We have a break, a think, we give ourselves plenty of time, we don’t start our designs late in the afternoon which means we’re not rushing and we create designs that focus on the user journey.
Content is king and design compliments it.
Make sure your content tells a story, whether that is told through copy or through images. Put plenty of whitespace in there, people appreciate whitespace (and it doesn’t have to be white!).
Is there any evidence that people scroll?
Ok, so this could just be the opinion of some very opinionated web geeks from Preston. Check out the information in the article Unfolding the Fold if you’re still unsure. In this massively data driven article they show most visitors scroll almost the entire length of the page (about 90% of the page) no matter how big the page is!
Finally. Love Your Scroll Bar.