- July 10, 2014
Behold, the Fold
- @sophshepherd
- Senior Designer
If you’re in the web industry and reading this article, you’re probably thinking, “Over halfway through 2014 and she’s writing about the fold on the web! I thought
we settled this!” But, the existence of the fold is still something that gets debated on many of our projects.
Below is an imagined conversation between myself and a Defender of The Fold, in which I successfully explain why we shouldn’t worry about the fold on the web.
Defender of The Fold: This stuff needs to be above the fold.
Sophie Shepherd: Above the fold, huh? Unless you have one of these, computers do not fold. The term “the fold” comes from a newspaper, which is folded in half so that weak 11-year-olds can hurl them from bicycles before sunrise. Other than the fact that both have words all over them, newspapers and websites are pretty different, and therefore the way we read them is pretty different. This is why we don’t have “Turn to page 5A in the Opinion section” halfway through an article, and why websites aren’t extra big on Sundays.
DoTF: Okay smart ass, but what about the stuff out of sight on my screen?
SS: Even if we were to rename the fold “the horizon”—meaning the point beyond which you know things exist but cannot see—it is impossible to define. The bottom of your screen may be very different than the bottom of my screen. With thousands of devices in use and all with vastly different resolution, there is no way to predict where the bottom of a viewport will fall. If we were to design for the lowest common denominator (the smallest screens on the market), all visitors with larger screens would have a less-than-optimal experience. This is the reason we design for content rather than for screen size—a founding thought of responsive design. There is one exception to this rule, and that’s if you’re designing for the specific market of Blackberry users without computers.
DoTF: But can we still make sure that these Seven Very Important Things are visible when the browser is shorter than 580px?
SS: We can, but that would mean that we’d have to squeeze all of our most important content into a small area, making it near impossible to read or scan. Imagine going to the Met Museum and seeing the whole collection in one room. You wouldn’t even be able to walk in.
This is not to say that we shouldn’t think about the hierarchy of the content on a page. We should design pages with the assumption that users are going to start at the top and work their way down, so the most important things should be at the top. The design and layout should encourage visitors to want to learn more as they move down a page. We would be doing everyone a disservice by squeezing everything up at the top.
DoTF: I don’t know, Soph. Scrolling might be too much to ask of a person…
SS: Scrolling is kind of like breathing; you don’t even realize you’re doing it until someone brings it to your attention. Do you remember the last time you consciously made a decision to scroll down a page? Scrolling is a reflex—most people just need to move a finger or two to move up or down a page, and they do so without thought.
DoTF: Wow, I never thought of it like that! You were right all along.
SS: Thanks, friend. It has been a pleasure working on this website with you.
DoTF: Now, let’s talk about infinite scrolling.
[Sophie hurriedly exits stage left.]