“Above the fold” thinking needs to die. But what does the alternative look like?
It was not obvious to me that “the fold” was not real when I first started writing about Michigan web design, content management, and usability. Like many non-designers, I had to have the Truth preached to me by someone with more experience and insight into the field. But the case only needed to be made once. There is no “fold” in web design, and believing that there is can lead to some huge web design and content mistakes.
That said, it’s hard to rid yourself of the “above the fold” mindset when you haven’t seen (or noticed) design alternatives. So, without further ado, here are four examples that we love of websites that use subtle clues to make better use of their entire landing page—both above and below the fold.
1. Life Below 600px
I’m not sure if this was the first article to state the case against “the fold” in web design, but it’s the first one I saw. There’s a lot to like here. The post is about eight years old, but the design is barely showing its age (the biggest tell is that it’s not responsive—mobile websites were still only barely a thing).
First off, the iceberg image is a perfect (if obvious) metaphor for the argument that content needs to be deep. Not only does the idea resonate, but the shape of the iceberg is a subtle visual clue to scroll down.
Of course, the whole page is about why Michigan web design should focus on more than just that top screen, so it makes sense that it would use good below the fold design. Nevertheless, if you need proof, this page speaks for itself.
2. abovethefold.fyi
OK, it might be cheating to include “Above the Fold Is a Myth” on the list, but like our previous example, it does such a good job of illustrating its point that it’s hard to pass up. Plus, it has an excellent example of a tasteful “keep scrolling” indicator.
Like our previous example, this page is basically purpose-built to state the case for designing below the fold. (It’s not the only one, but by now we think we’ve made our point.)
3. Critical Mass
Here’s another example I love of a beautifully designed page using text as a visual cue for users to keep scrolling down the page. The design of this site feels almost like a glossy magazine, with the full-screen splash image showing the broad panoramic view, and the bold headline overlapping with the body text.
The subtle parallax scrolling action as you move further down the page is also a nice touch—neither disorienting nor overdone. Combined with a well-crafted story, and it’s guaranteed to keep users scrolling till they hit the bottom.
4. What Goes Up
Finally, our last below the fold example comes from this feature piece by Epic Magazine. The whole story is well-designed, perfectly complimenting the story it tells. But the opening does a superb job of laying out the page in a tantalizing way that draws readers deeper into the narrative.
Don’t let space below the fold go to waste.
Of course, it’s often hard to find good examples of below the fold web design because so many designs are obsessed with above-the-fold thinking. Horizontal lines or frames in the top portion of a website are likely to lead to a visual impression that your website stops there. That could create a self-fulfilling prophesy where content below the fold doesn’t get seen because the design itself ignores it.
This example from our favorite coffee tumbler company is an excellent example: from this design, you’d never know there was more to see beyond the top screen. Yeti is actually doing itself a disservice by allowing its design to discourage scrolling behavior. They could make better use of their full website real estate if they used a less constricting design.
It may seem counterintuitive to think past the top screen of your web design, but you should do it anyway. When you focus all your attention on that above-the-fold space, you train your users to believe that it is all that matters. If they have no reason to scroll down, they may not do it—and that will mean all that space goes to waste.
The good news is that you don’t need to try that hard to get users to scroll. In fact, most will do so automatically. Facebook and our own web experience have made scrolling behavior so automatic that we become frustrated by sites that don’t scroll the way we expect. Web users are content hungry. They came to your page for a reason. When you only give them the top fold of your screen, they’re likely to leave disappointed.
Trust your users to scroll down the page. Give them half a reason, and they will.