Moving beyond “the fold” to a design language that makes sense for the Internet.
How often have you sat down in a meeting to discuss web design and heard someone talk about putting certain information above or below “the fold?”
I’m betting we all have. In fact, despite our better judgement, we’ve probably used the term ourselves. We say things like “let’s put a nice hero image with a strong call-to-action above the fold, and put these service descriptions below the fold.” Or “this client testimonial is important, let’s move it above the fold to add some social proof.” Maybe you’ve even had someone insist that the “above the fold” space should be filled with as many content boxes, headlines, and buttons as possible, because they’re afraid that anything below the fold will be consigned to oblivion.
But the truth is, the fold has never made much sense to describe the Internet. Even back in the days of Web 1.0, everyone had different screen sizes, different font sizes, etc. All “the fold” has ever meant, in terms of web design, is “what we can see in the first screen on this individual’s computer.” It has no relation to what other people see on their computers. And yet, it has persisted as concept! Given this, it’s time we either abandoned this idea of “the fold”, or radically change what it means with regard to user-friendly web design.
So where does “the fold” come from?
To understand why the fold doesn’t makes sense to describe web design, let’s take a step back and look at where the term originates. It is, in fact, a holdover from newspaper publishing, where newsstands only display the top half of the front page. In newspapers, which deal with physical print space, that area above the fold is intensely valuable. Newspaper editors want to make the most of it by both grabbing attention with a large headline and image, but also squeezing in as many other items as will fit into that print real estate as possible. After all, a newspaper page is a finite amount of space; the top half even more so.
This conventional wisdom might have made sense for newspapers, but it is needlessly limiting online. Neither screens nor web pages come in a uniform size, making it archaic to design as if everyone will see the exact same thing when they land on a page. In fact, this was the big breakthrough of responsive design: instead of binding your website’s content to specific dimensions, you could design them to fill a screen proportionally. The content areas adjust based on screen size, so no one is ever stuck with a confusing user experience.
It also has some important ramifications for fold-based design. Namely…
You don’t know where the fold lies.
It’s time to state the obvious. The painfully obvious: there is no fold. At least, there is no universal fold that exists in the same place for all people.
Instead of the fold, what we really have is a top screen. And what I see in that top screen will vary based on my screen size, my screen resolution, and the dimensions of my browser window. It’s just one element of the cohesive user interface that is your website. If you’re on a computer right now, you can test this for yourself: make sure your browser window isn’t full screen, then click on a corner of your browser window and adjust it to different sizes. Look how different websites adjust to accommodate these shifting parameters. It’s a thing of beauty, but it eloquently illustrates that there is no common fold for each of these screen sizes.
This is dire news for anyone who believes in the sacrosanct authority of “above the fold” content. Part of the reason the fold has such staying power is that the newspaper industry has convinced a lot of people that no one looks at any content that appears below the fold. Fortunately, we have some good news.
Your users know how to scroll.
Trust us. We know. Not only has Facebook has conditioned as all to scroll on for infinity, but plenty of usability testing stands behind the data that your users will scroll so long as the opening screen doesn’t make them bounce. The question you need to think about is “how do I keep my visitors from bouncing?” And, just a hint, you don’t do that by overwhelming them with content.
Instead, you want to entice them further into your site. To move past the top screen’s worth of content and into the meat of the page. A compelling site pulls visitors in and encourages users to stay, to explore, to enjoy themselves. So give your content room to breathe, and embrace your space!
None of this means the top screen doesn’t matter.
It does! Part of the fold’s staying power is that it makes a certain kind of intuitive sense. Yes: visitors who land on your site will see the topmost portion of the page first. Yes, you should design that portion carefully to achieve the best results in terms of engaging and retaining visitors. The problem is, treating that top portion as if it is the only part of your site the visitors will ever see and then shoving all your information there is actually driving them away.
It’s like inviting guests for dinner and throwing a seven-course meal in their face while they’re still standing on your front doorstep.
It’s like proposing on the first date.
It’s desperate, and needy, and overwhelming, and it’s the reason your visitors bounce.
That top screen is incredibly important. Research shows that you only have three second—maybe less—to give your readers a reason to stay. It’s your chance to make a good first impression. To establish a relationship. To greet your visitors and welcome them in. To highlight the most important action that you want users to take. But it’s not your whole site, and you shouldn’t try to design it as if it is.
The bottom line is, whether you want to talk about “above the fold,” the “top screen,” or any other term, too much content in that area will dilute your message and lower the impact of your design. So stop obsessing over a top-heavy design, and start creating a website that will draw your visitors in.
Are you interested in the kind of web design we’re talking about? If you’d like to work with us to design a new website for your business, contact us! We’d love to help.