Above or Below the Fold of a web page?

Tue, Feb 2, 2010 by Erico Nascimento

Designing for the web can often be a tricky task, there are many variables to take in account, some of them of technological nature, some of them of human nature. The fold is something that involves a little bit of both.

What is the fold?

If you’re not familiar with the idea of the fold on web-design, we could say in a nutshell that it is the area of the site that your users will see without having to scroll, therefore, making that region very valuable. Now, calculating how big that area is, is a slightly more difficult task, it involves screen sizes, resolutions, browser type, operational system, how many toolbars the users have, and so it goes. But we’re not going to go that far this time, the point of this post is to argue that the fold may not be as important as it’s been said.

It is commonly said that users won’t scroll bellow the fold or won’t pay too much attention to the content bellow that line. I would agree that to a certain extant. I can’t deny that for most of the sites that area is the most important. That is the first impression you user will get, so there are some important tasks to accomplish on there such as:

  • Informing the user what is the site all about and presenting your brand.
  • Giving the user an idea of where he is on the site.
  • Showing him where to go now.

Now, that's a lot of things to do in a such a small space. How can you expect to have your the rest of your content on top of that? Well, you don’t have to! What you have to do is make the user conformable and guide his visit. As long as he feels he is accomplishing his objectives he will scroll and explore the site. But, how can we accomplish that?

On design there are no formulas that will work 100% of the time. There are a couple of things that could help you though:

  • Images and text that get cut by the fold.
  • Avoid visual clues that would indicate the end page such as big white-spaces.
  • Have compelling and relevant content.

Now, why should you believe on my words? After all the fold is one of the biggest dogmas of the internet still. Well, there is been a lot of research done regarding this subject! Here is some great articles you can look at:

The bottom line is, you should take the fold in account while designing your page, but be smart about it! Don’t just believe that any content below it is dead or irrelevant web-design is not an exact science. And, in case of doubt, why not try some user testing?

What do you think bout the fold? How do you deal with it? We’d like to hear from you!

Andy posted on February 4, 2010 10:16 pm

@Shawn
Apologies, didn't realise it was the same term: I agree that the same term could lead to arguments about 'the fold' that are actually more differences in appropriate practices on paper and web.

@Essay help
How do you know how much content will fit in the end-user's browser without requiring scrolling?

Shawn posted on February 3, 2010 11:35 am

@Andy, yes my last sentence was a little harsh. It's a touchy subject.

I'm not discounting the importance of designing for users. Only that the bottom of a browser and the fold of a newspaper are two different concepts. Similar yes, but different, and as such we shouldn't use the same term.

Andy posted on February 3, 2010 2:53 am

@Shawn
While the W3C and others promote the idea of view-independent content and a semantic web, that doesn't mean there aren't important lessons to be learnt through research of real web use about how people currently browse. The fold clearly does exist if your browser does a visual rendering that doesn't display the entire page. _If_ the majority of current web users were affected in some way by that, it's certainly something we should consider imho (eg the idea of not leaving large whitespaces in places where a large number of users - that is typical browser/settings/OS combinations - have the fold). I imagine that as time goes by user browsing patterns will change, and the importance of the fold may decrease, increase or just change in nature. But to me it seems naive to just lay the blame at print designers and forget about it.

Daryl posted on February 3, 2010 12:29 am

Great article, Erico! I like how you used the phrase "the bottom line is" ... hah.

I find that we don't need to worry a lot about the fold, as long as the design indicates that you're on a different page. I like using visual clues that encourage scrolling: images, blocks of text, and blocks of colour that extend beyond the fold... The fold is just something to be aware of, but we shouldn't really be restricted by it.

Shawn posted on February 3, 2010 12:25 am

There is no fold.

http://www.thereisnopagefold.com/ sums it up nicely.

The idea of a definable viewable area on a website that all people can initially see and in which to place importance is something brought to the field by print designers who didn't know any better.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <h2>
  • Lines and paragraphs break automatically.

More information about formatting options