Above the fold

The first time I heard this question was around 20 years ago. I had designed a website, and the client was looking at the home page design. There was a large header, followed by a large banner (hero) image followed by 3 articles. The client asked:

Back then, everything was static in size and responsive websites we have today where just around the corner, so my answer was “It depends”.

Looking back now I think my client was trying to gauge my knowledge, more than wanted an answer but the answer was correct for the time. I elaborated on my answer, but before I do that today I want to explain the fold.

What is the fold?

If you pick up a news paper (they still exist, right?) you’ll see they are quite large and cumbersome to read, but when you first pick up the paper it is folded into 4. There is a fold down the middle for the pages, but there is also a fold halfway down the front page so the papers can be transported and put on the shelf without taking up too much space. Because of this second fold you can only see the top half of the front page before you pick the paper up. This is ‘The Fold’ that is referred to in this article.

When a newspaper editor puts the front page together, they put the main headlines on the front to entice the reader, they also know before the paper is picked up the potential buyer will only see the top half of the page, so they will make sure the headlines are in that space even if the columns are very long.

This knowledge applies to the web and webpages too.

The web doesn’t fold

Now we come to the web, the fold on a Web page is anything a visitor can see before they scroll. Just like the newspaper, its what is seen before the visitor interacts.

The answer is not really the same now as it was then, we can be much more certain. Back then, as now, different devices have different screens and different screen sizes and we still have the browser that can be resized to show a different portion of the website before interaction, but now developers have more control, and devices tend to be more straight forward i.e. we design for the iPhone first.

In the past, a lot was static, and we didn’t have access to the height and width in the same way we do now, so we had to guess a lot. Today we can do a much better job of understanding the device we are rendering on and what is above and below the fold. We can create a website a little differently so we can force things into different sizes without compromising the aspect ratio (so we don’t squash images) and keep things above or below the fold depending on if we are on desktop or mobile.

We also have certain devices we are more likely to build for, in the past it was desktop and browsers that where resized, but today it’s mobile and iPhones with browsers that are full screen.

Take the 3 devices below, we have an iPhone 12 Pro, an iPhone 14 Pro Max and the Surface Pro.

Notice the home page ends for each device in a different place? This is the fold on the same webpage. When designing a page we must account for the device we are targeting to get the fold in the correct place. For Huyton Web Services we decided to make sure image and text is above the fold on most devices, so the visitor knows to scroll. If only the image is above the fold it looks like the pages ends at the image and there is no need to scroll.

Let’s try to answer the question I was asked all those years ago. I had to tell my client to be sure a story title was above the fold we would have to dramatically decrease the height of the hero image over all devices. We ended up sticking with the original design as it was designed for the most used device, PC and Internet Explorer maximized.

The answer is not really the same now as it was then, today we can be much more certain about where the fold is. Different devices have different screens and different screen sizes, plus we have the browser that can be resized for PC and Mac. This will show a different portion of the website before interaction, but now developers have more control, and devices tend to be more straight forward i.e. we design for the latest iPhone first.

In the past, a lot was static, and we didn’t have access to the height and width of the screen in the same way we do now, so we had to guess a lot. Today we can do a much more precise job of understanding the device we are rendering on and what is above and below the fold. We can also create a website a little differently, so we can force things into different sizes without compromising the aspect ratio (so we don’t squash images) and keep things above or below the fold depending on if we are on desktop or mobile.

We also have certain devices we are more likely to build for, in the past it was desktop and browsers that where resized, but today it’s mobile and iPhones with browsers that are full screen.

Where does that leave us?

Above the fold, the part of the page a visitor sees on landing before they interact, is something we can take advantage of in the design stage and is something that should be considered as a website is developed. If you have a huge image at the top and it’s not what you want your visitor to see when they land on the page, make sure you speak to the web designer and tell them what you want above the fold before the website is built.

The fold is part of the Web Design and User eXperience and should be considered right at the beginning when creating a wireframe. After the wireframe has been agreed, it is more difficult to change and any change after could impact on the time it takes to create the design.

And that’s it, the fold is just another part of website creation everyone should be aware of.

If you don’t agree with any of this, let us know with a comment and we can have a discussion. If you have anything to add (like an interesting story about a client) send us a comment, we’d love to hear.