Fold or Scroll: Above and Beyond the Web Design Myth
BLOG
BLOG
We get a lot of questions about the fold when it comes to web design (the line below which you must scroll to view more content on screen). Many people have come to believe everything important must sit above the fold so people can see it without scrolling. Scrolling, they’ve been told, is bad.
Designed this way, however, home pages quickly become overloaded and, ironically, less user friendly (see below). So where did this idea come from?
On a newspaper (where the term came from), there is indeed a fold. The newspaper sits in a newspaper box, where a passer-by glances at the upper half of the front page (above the fold) and decides whether or not to stick their 50¢ in the slot. Makes sense, right? If you aren’t interested in today’s biggest headline, you won’t pay to find out if there’s anything worthwhile below the fold.
Think back to 1996…the Internet was still losing its baby teeth and the 20 million connected Americans were using their free trial of AOL to browse historical photos on theLibrary of Congress website (one of Time’s top five websites of the year). Most monitors were 800x600px and most websites were built to pretty much fit within that area because the scroll bar was a relatively new concept.
Now come back to the present—it’s 2014. Between computers, tablets, and phones, most Americans spend more than five hours on the Internet every single day. As a nation, we are comfortable scrolling—so comfortable that in 2011 Apple decided we didn’t need the scroll bar in Safari—a controversial decision at the time, but three years later it’s still gone.
We’ve also moved on from the consistent browser size. Now, 99% of all desktop browsers have a screen resolution of 1024x768 or higher. With all those desktop browsers plus an infinite number of dimensions between smartphones and tablets, it just doesn’t make sense to design for fixed sizes anymore. Even if we wanted to design within the landing area of a website, we couldn’t—it’s in a different place on every device. That’s why we use responsive design techniques on all of our clients’ sites.
So what does this mean for the fold?
Evidence shows that people scroll…lots of evidence (See the collection of research). And trying to force a ton of content in the top of a webpage makes for poor design, which makes things hard to find. And nothing makes users more frustrated than when they can’t find what they’re looking for… they tend to bounce. Check out yahoo.com and let the bouncing begin.
I know what you’re thinking…if the fold is so mythical, why has the concept stuck around for so long? Because there’s some truth to it. Here’s what you should worry about in web design instead of thinking about the fold:
Making an introduction. It’s still important to introduce users to your site so they don’t lose interest and bounce. Think back to high school English essays—hook your user with something that will get their attention. (Not everything they could possibly be looking for…that’s a job for the rest of the essay/website.)
Create an experience that makes sense. Every website is different—as it should be. Each is intended for a different audience with the goal of getting that audience to do something, whether that is to purchase a product, submit a form, or to find information. Think about how your users will navigate the site and make sure the design is intuitive for them.
In general, avoid stark horizontal lines in the top 800px or so of the site. This is the closest I’ll get to a fold-style rule. If a user’s browser happens to break where there’s a clean white line running the width of the site, it’spossible they’ll think there’s nothing below that line. This one is really generalizing—content and other visual cues may provide enough juice to get users down the page.
Lastly, don’t blindly follow user-experience ‘rules’…even these rules. The web is full of valuable user experience research that you should definitely read. But every site has a different audience, different needs, and different design. Uncover the nuggets of insight in each bit of research and use that along with knowledge of your unique audience.
And please…forget the fold. Your visitors (and I) will thank you.
Blog
Use CSR data to your advantage - Don't let consumers' imaginations work against you.
Blog
Get with the program or watch your SEO suffer.
Blog
There’s not an app for that.