The Fold
In traditional print media, the area literally above the fold of a newspaper was reserved for the most important stories—those headlines were the only section of a paper guaranteed to be seen, and the papers one shot at grabbing a potential reader’s attention to generate enough interest to pick up the paper and buy it.
Once you grabbed the reader and got them to unfold the paper they’d see the content below-the-fold—still interesting, still important (just maybe not as important as that main headline). This content was the second most likely to be seen, with the interior pages being less likely to be read but often containing the continuation of front-page articles, as well regular and consistent sections of content—think weekly obituaries, sports scores, and TV listings—that people turn to with explicit intention.
When the world wide web started (remember, desktop only) the behaviors in which people thought of and interacted with a website aligned to the way they interacted with the then-dominant and familiar medium of newsprint.
The area of a homepage, viewable without scrolling was your one shot to convey value to a visitor, because they likely weren’t going to scroll of their own accord.
As such, marketing efforts were hyper focused on showing the most possible content above the fold, and while this may have been necessary in the past, it’s created a lingering misconception about modern day behavior on the web.
What above-the-fold means online
While the term technically refers to the area of a webpage immediately visible on page load, without any scrolling, the web—unlike a physical newspaper—doesn’t have a fixed definition for what size this region will be.
Designing for the web means designing in a way that is fluid and adaptable across an increasingly vast array of screen sizes. Every device, browser, and screen resolution creates a different cutoff point and your website lives across all of them—from a tiny smartphone screen to a jumbo desktop monitor.
Because of this, a fold on a desktop computer will be drastically different than that on a tablet or a smartphone; and your approach to how and what is visible above the fold should adapt as well.
Less is sometimes more
Like we mentioned earlier, the advice to put as much information above-the-fold as possible made sense at a time. But that time was when our model of media consumption was newspaper first, internet second; and devices were limited to desktop PC’s with a pretty narrow deviation in display size.
At that time users were still learning how to scroll and the understanding of dynamic content was in its infancy—that time, for better or for worse, no longer exists.
Today, media is consumed dynamically and digitally, and our methods of interacting with digital content reflects the shift that has occurred. Our consumption of the internet itself has transitioned to be predominately mobile device driven where narrow screens have made scrolling a required and default behavior.
This shift means there is less pressure to make sure you present everything you want the user to see right away. Research into modern behavior shows people will scroll, as long as you give them a reason to do so.
This shift in behavior shows how mental models and actions evolve with the introduction of new mediums and technologies. It’s important to remember that what works today may not be the case in a year or few years down the line. This is why it’s important to treat your website like a living artifact—it should evolve, grow, and expand as your business, users, and the world around it does.
What to put above-the-fold
Think of the region above-the-fold, typically referred to as the page hero, less like a billboard; and more like a hook. Give your users a sample of your brand’s personality and value, and give them a strong action or hint at what’s in the rest of the site to draw them forward.
Remember, the goal isn’t to fit everything in this space—it’s to create enough interest to get people to engage further.
What to communicate
To help you filter out what should be featured in a modern hero section, focus on the following three objectives:
- Does it communicate who you are and what you offer?
- Does it establish trust at a glance?
- Does it provide visitors with a clear action, an obvious next-step for them to take?
Common mistakes to avoid
1. Trying to put too much information above-the-fold
This is a common mistake, often born out of anxiety. Trying to communicate everything in this space will leave it cluttered, overwhelming, and may actually confuse visitors into taking no action at all.
2. Hiding your most important call-to-action
A strong, direct, call-to-action is not pushy, even it sometimes feels that way on your own website. Remember, your hero should communicate your strongest value-prop or offer, and it’s not pushy or aggressive to present your strongest hook first. If you don’t, you’ll be loosing people before they ever get a chance to see it.
3. Using carousels as a way to get more content above-the-fold
This is a common cheat, and it’s doing you zero favors. Carousels can have a time and place but we promise—it’s never in your hero. People land on a website ready to scroll, not sit and watch slides of different content go by. Implementing a carousel header is only diluting what should be the single strongest statement you have to make.
4. Ignoring the content below-the-fold
There’s so much pressure to pack as much value into the hero region we see a lot of businesses treat the rest of their homepage as an afterthought. If the area above-the-fold is where you tell the user that thing that makes you so great, the rest of your landing page needs to start showing them all the ways your hook is true.