The “Fold”
At my early years of being a web UI designer, I have heard to never put calls to action below the fold. The old mantra that things on web pages had to be above the fold is an antiquated idea from the very early days of the web. When people didn’t know what the internet was or how to use a browser. Back then, yes, the “above the fold” idea mattered. But that was back in 1999 – today people know what a browser is and how to use it. So fold or not fold, let’s talk about it.
What’s the Fold and Where Is It
“The fold” comes from the newspaper world, and it refers to the top half of the front page — the part of the paper that appears above where the physical paper is folded. That’s where the most compelling headlines go, as well as (usually) some or most of the front-page photo. Since newspapers are displayed and sold flat – if the headline or photo was compelling it could increase sales. And of course, readers are more likely to read and be interested in things placed on the top half of the front page. So “above the fold” was born.
For computers made in the past several years, 1280 × 768 is the smallest common resolution. A full-screen browser window on such a computer is about 700 pixels high, depending on browser toolbars, etc. On my 27″ iMac, it’s about 1200 pixels high. But if you’re going to plan for the fold, you have to plan for the smallest common screen—thus the 700 pixel guideline.
Why Doesn’t the Fold Matter Anymore?
People have been talking about “the death of the fold” since about 2010, not long after the radical explosion of internet-connected smartphones. By then, people were accessing the internet on anything from a 60-inch wall-mounted television monitor to a tiny hand-held device, with every dimension of laptop and computer screen in between.
Many studies of been conducted to test the validity of the “above the fold” hypothesis and they’ve all shown that today’s users do indeed scroll. The above the fold myth has been debunked. CX Partners, a user-centric design firm from the United Kingdom, does a lot of eye tracking research for their clients. And they’ve consistently found that the “fold” is no longer relevant. But to paraphrase their results – often less content above the fold will encourage exploration beneath. And if the design tantalizes that more exists below – scrolling is almost guaranteed. In essence, if something bridges the fold people with scroll down to see more. Further, people now recognize that scroll bars on a browser indicate more content lies below and know that the scroll bar can also visually indicate the page length.
How Do I Design If It’s Not for the Fold?
“The fold still exists and still applies, but it’s not what it used to be. There’s no way to anticipate what resolution and window size will be used to view the site, so there’s no true “fold” to identify.
Instead of using the fold as the guidepost, design for the user. Ultimately your design needs to convince the website viewer to scroll, so the idea of the fold still matters even if the specific dimensions of a “fold” can’t be determined. Instead of looking for a fold, take into account what calls “the hierarchy of the content on a page,” and understand that the most important material should go at the top.
As you plan your design, determine what your “above the fold” material is and then place it at the top of the page. Most viewers will still see it, even if they need to scroll a bit to see all of it. Scrolling isn’t the hurdle some people make it out to be, but if this is a new concept for you. Ultimately you can use the idea of “storytelling” in web design to lure the reader in at the beginning (the top) and keep drawing attention further down the page.