Above The Fold – What it Means & How it Affects Your Website

Above the Fold

If you’re in the design or journalism industry, you have probably heard the term ‘above the fold’ before. Whether you know what it means or not, it’s time to talk about it and how it can affect your website. Understanding the term and knowing how to strategically place things on your website will increase how many people click, read, and scroll through your content.

Above the Fold

What is the fold?

In terms of web design, above the fold is a term that applies to the content that a person can see when they arrive at your site without scrolling at all. The term was first invented before web design, when the term applied to newspapers. Above the fold meant the content that people could see when a newspaper was folded. This content had to be interesting and attention grabbing, so that people would pick up and unfold the newspaper to see more. It wouldn’t do much good to place your inciting headline below the fold, where no one could see it without opening the paper. In the same way, you want to place enticing content ‘above the fold’ on your website, so people see it and are inclined to scroll more or click through rather than just leaving the site. In today’s application – the term is actually ‘above the scroll’ but people still commonly use above the fold to refer to both.

Where is the fold?

Obviously the problem with computers that newspaper designers never encountered is that screens are responsive and change sizes, which also means that the location of the fold is going to change. The accepted measurement is that the fold lies at 600px from the top of the page, but again, this changes depending on the device and screen size. Where is the Fold can help you determine what different people see when they arrive on your site, by showing lines to represent the folds on different screen sizes.


The theories

The general theory behind ‘the fold’ is that what is above it is important. People must see interesting and promising information when they arrive on the page without having to take any action. If they don’t see that – they will leave. If they do – they might just scroll past the fold and onto more of your content and links. Research shows that, on average, only 20% of people ever scroll past the fold on a website, and 80% leave without moving lower. I can speak to this myself because I often open multiple pages in multiple tabs and only read the ones that look interesting, and I close the rest. Whether it is blogs that I am looking to read or search results that I am looking through for specific information, I often judge pages on what I see above the fold. You probably do this too. Though we’re not consciously thinking about the fold, that is what we are doing.

The problems

Some people argue that the fold really doesn’t apply anymore in web design. Some studies show that a large portion of people automatically scroll down on a page without even thinking about it. Other studies show that things have to be interesting above the fold to keep people scrolling. Some studies show that a blog title or a call to action button will either be enticing or not, regardless of where it is placed. Just like serif vs. sans serif, the fold is something that has many different theories, arguments, and opinions, and there will likely never be a definitive answer.

What it means for you

Whether you’re a web designer or not, if you have a website, you should be thinking about the fold. Start looking at the websites you visit. Try to think consciously about the ones you scroll down, and the ones you don’t. Think about why this might be. Then look at your own website and see what it offers people above the fold. Is it enough to entice people to scroll further? Maybe it’s the first half of an interesting story, or an image that promises more below. Whatever it is – try to think about your site if you were seeing it for the first time and whether you would want to scroll.

In terms of blogging – it’s a little different. People go to normal websites and they have a homepage with a message. On a blog, the homepage is always changing (unless you set a static homepage) so you need to think about the layout more than the content. Most blogs have a header image at the top – and the only other things visible above the fold are the title of the first post on the page and a small portion of the sidebar. So this means that you need to make sure your sidebar has an enticing message or call to action at the top, and that all your post titles are interesting enough to draw interest.

So, the bottom line is that you need to bear the fold in mind, but don’t design around it. Know that people only see a portion of your site when they arrive, and be aware of what it is they are seeing. If your site is interesting and well designed as a whole, then what’s above the fold will be just as good as what’s below it – and users will be inclined to scroll.

2 thoughts on “Above The Fold – What it Means & How it Affects Your Website”

Leave a Reply

Your email address will not be published. Required fields are marked *