Into The Fold: Why Web Design is More than One “Rule”
R.J. LaCount Jan 24 2013
If you want to call yourself a web designer these days, you’d better be ready to keep up. Daily study is required or you’ll be left in the dust.
I follow countless blogs, listen to podcasts during my commute, and work on random projects at home just to try out new things.
When I start talking about design, my friends’ eyes gloss over and they suddenly need to go home – but what can I say? I’m really into this stuff.
That being said, I have a confession that might make the modern web design community cringe a bit: I care about the fold.
“The Fold” is a dated concept originally stemming from printed newspapers. If you wanted your headline to pop, it needed to be no more than halfway down the page: the point where newspapers were “folded” for display.
When digital media burst onto the scene, the average screen resolution was 1024×768 (or if you lived on the bleeding edge, 1280×1024). Consequently, designers determined that the safe digital equivalent of “the fold” was 600px from the top of the page. If your content was below this point, it was less likely to be seen.
Now, things are a bit different.
In the future, that chart’s only going to become more fragmented. We’re already browsing the web on our phones, tablets and TVs. Pretty soon we’ll be browsing the web on our bathroom mirrors.
So, the fold is dead, right?
A few years ago, I was riding high on the “Fold Is Dead” bandwagon, preaching about how “users these days know how to scroll!”
But working at an Internet marketing agency that deals in real stats and analytics knocks you off that bandwagon real quick.
It’s still true: content above the fold gets looked at more than anything else.
But a couple of other things are also true:
- Users are comfortable scrolling (especially on small / mobile screens).
- The traditional approach to a quantifiable pixel number representing “the fold” is no longer relevant.
The fold is not dead… but you also shouldn’t be trying to force everything important above some arbitrary line.
Alright, I’m pulling my hair out now. What should I do?
Calm down, for starters.
The purpose of defining the fold was never to cram every possible thing above it. Because if everything is important, guess what? Nothing’s important.
Let’s go back to the fundamental: the whole purpose of considering the fold is to entice your audience to continue reading or, in the context of the web, scroll. Take a look at one of my favorite examples:
Notice how there’s almost nothing above the fold on this page, yet it screams “scroll down and continue reading.”
Whether it’s the headline suggesting there is something interesting below or the giant glacier submerged just below the cutoff, you’re compelled to read more. Additionally, simple design and large typography make it less intimidating for the user to dive down into more content. This is how you use the fold.
What I’m hearing is that I should stop trying so hard…
Perfection (in design) is achieved not when there is nothing more to add, but rather when there is nothing more to take away. – Antoine de Saint-Exupery
I love the web’s current explosion of screen resolutions and form factors. It’s whipping a wicked curveball right to the high inside corner of all these “rules” – rules that have evolved over time into completely skewed versions of what they were originally intended to be.
Some of your “above the fold” content is inevitably going to be cut off.
The resolution of screens viewing the web is constantly improving. No one can predict what your site may look like on some Internet-capable washing machine or car dashboard of the future, so don’t blindly obey hard and fast design “rules” without question. The fold is a guideline, not a mandate.
If a user starts scrolling down your main page, the fold has accomplished its goal. Now all you have to worry about is the rest of the site! (No pressure or anything.)
Have you come across any great examples of sites using the fold correctly? Let us know in the comments.
R.J. brings several years of web design and front-end development experience to Portent. His attention to detail borders on neurosis and he always takes care to create pixel-perfect websites for clients. Read More