Logo for DinoBaskovic.com
From the Desk of Dino Baskovic

There is no fold

Dear friends and fellow web designers,

There is no fold. Get it through your heads right now. Now I know what you’re thinking: "But Dino, yes there is! I’ve known about the fold for years, and you never go below it, and I think when I had you in class you told me that once, no?"

Oh, what I would’ve give for a wormhole so I could travel back in time to never utter the words "above the fold." Hey, it was a simpler time and a decade ago, and web designers had little choice but to follow their own advice they’d later regret and eat.

A bit of history: the "fold" refers to the actual fold or crease most daily newspapers have when they are, well, folded in half. You get the masthead, major headlines, photos and copy blocks. Beyond that, you must physically unfold the paper to get the bottom half of the front page. Seems simple enough, but you make a conscious effort to unfold the paper. The content compels you to carry on.

Early web development borrowed heavily from the graphic and publication design fields, with many tenets still applicable to this very day. As a web designer, you follow basic design patterns and conventions like readily identifiable navigation. As content grows, the designer must create a user-friendly layout, though for a screen and not a page. And there’s where things got trickier over time.

Take the following sketch that I conveniently stole from some SEO dude’s blog:

Behold, the fold

It’s your average homepage concept, nothing fancy but bear with me. Homepages in the ’90s took on a storefront mentality, especially when ecommerce emerged, so placing only the most essential, appealing and actionable page elements "above the fold" became a best practice. This was easy enough because, even though there is no physical fold* on a screen, most monitors built between the middle-to-late ’90s defaulted to 640 x 480 pixels, later to 800 x 600 and eventually to the 1024 x 768 standard resolution of today. My big honkin’ 30" Apple Cinema Display notwithstanding, most web designers go to great lengths to assure their customers that "Yes, all of the primary page content will appear above that imaginary fold thingy, where ever you think it is."

And therein lay the myth. What fold? It was up here a year ago, now it’s down 20 or 30 pixels, maybe 40? Of course, those pesky adverts and browser toolbars push pages down. You can’t ever assume the browser chrome is fully stretched over the entire screen, vertically or horizontally. And for those poor developers still struggling with fixed- versus flexible-width CSS-based designs years ago, fear not: Your hell has only begun.

See all of those mobile smart phones you’re supposed to be pushing content to whether you like it or not? All those new user agents to learn? A lot of them are pretty darn small. Not everybody views your website on a monitor. And just when you were happy with your iPhone-driven design, out comes the iPad. "Aw, crap" is right.

To top all that off, usability studies are rolling in stating that, contrary to years of popular belief, users don’t mind scrolling down after all. That former belief was a big reason we designed above the mystery fold in the first place, right? To prevent hapless users from scrolling into the abyss? Take a good look at any number of modern news and organizational websites and the vertical page heights are becoming monstrous. Even the footers are out of control in my opinion.

So what’s a web designer to do? Abandon years of fundamental wisdom and convince your clients to scatter content up and down pages like so many windows on a skyscraper? Rely on object detection, user agent trickery and infinite CSS hacks to account for every possible scenario? Or can the "fold" be saved, even if I can’t convince you no such thing exists?

As a former student of architecture, I fall back on Ludwig Mies van der Rohe and his minimalist principle "Less is more." And speaking of structures, no homepage should look like a skyscraper. If you find yourself cramming so much content your scrollbar works overtime, then perhaps you should take a long hard look at what it is you are truly trying to do. Mind you, I’m not staying it makes no difference whether your primary content horrifically cuts off in the viewport. Hopefully you gave up pixel precision the day you abandoned table-based design and never looked back, so this won’t hurt as much. Your design may have to make some minor compromises, but users will subconsciously thank you in the end. If it helps you to establish an imaginary dotted-line guide (dare I say, a fold) so be it, but err on the side of simplicity and ask yourself: "What critical content wells and candy-like clicks do I want my users to focus on when they find my site?" Some content may stretch, appear, disappear and reappear in ways that will drive you batty, but such is life. The key word is "focus," as in focus on what I said: What your users’ focus should be, positioned as gracefully and as simply as possible.

Thank you for your time. I shall now return to my morning paper…

Sincerely,
Dino

* Of course, OLEDs may change this. And talk about scrolling. Can they pepper the top of the page with any more ads or what?

Screen resolutions have blown well past these initial ratios as of early 2016. Also, the advent of responsive design, “endless” or “infinite” vertical scrolling and swiping up and down on a touchscreen versus clicking with a mouse have all but made the fold completely moot. Not that this has stopped some of my “more traditional” web design clients from demanding I design for it. Hey, whatever pays the bills.