“Above the Fold” Content: Design Strategies for Better UX

Clients often ask us whether items in a web design need to fit “above the fold.” In order to answer this common website UX question, it’s important to understand where the fold originated and the best practices that apply to modern responsive web design.

What does “above the fold” mean in website design?

The most common use of the “fold” originated from newspapers, referring to the top half of the front page. The most important headlines are always included above the fold, and readers have to flip the paper over to read further.

In web design, the fold refers to the visible area of the webpage, above the line at which the user must scroll to view additional content on the lower parts of the page. In the early days of web design, monitor size and resolution were very consistent. Because of that, websites in general were designed to fit within that area, aside from longer articles. At that time, the concept of the fold was still very applicable.

Does “above the fold” still matter in website design?

Yes and no. The death of the fold has been talked about since the release of smartphones, and today’s users access websites from mobile devices of a multitude of different sizes and shapes, as well as tablets, large and small laptops, and desktop monitors, as well as televisions and refrigerators. Each of these devices has different operating systems, resolutions, screen sizes, and browsers—not to mention that many tablets allow the user to display a page in horizontal or portrait view—which means that “above the fold” is going to be different from user to user.

Our collective use of smartphones and tablets has changed the way people consume information and navigate online. Smartphones taught users how to scroll and swipe default, and in doing so, reinvented the way websites are designed.

Above the Fold Content in B2C vs. B2B Web Design

If you’re selling directly to consumers (B2C), the space above the fold can still be a valuable conversion point, highlighting a promotion or deal that a user can take action on immediately.  B2B is a whole different story. When you’re selling complex, high-value services or products with long sales cycles most visitors aren’t ready to commit seconds after landing on your site. Instead, they need to get to know you first. The space above the fold does need to clearly and succinctly convey who you are, what you do, and why your best prospects should care. Forcing a conversion form above the fold might be more likely to turn prospects away than to lead to a conversion from a qualified prospect.

Think of it like meeting someone at a networking event. You wouldn’t lead with, “Want to sign a contract?” You would start with a handshake, a quick intro, and maybe a story to break the ice. In B2B web design, the fold is that handshake. You set the tone, spark interest, lead with one call to action, but guide people toward your main conversion points once they have enough context to say “I want more.”

How to Encourage Website Scrolling With UX Best Practices

So, instead of cramming everything above the fold and following B2C website structures, unique best practices for B2B website design have taken shape. The fold is utilized for a main value proposition, a keyword-optimized headline, and a few strong visual cues. Then, using intentional hierarchy and layout design we can encourage visitors to scroll down the page to learn more. Here are a few ways that we prompt scrolling with UX:

1. Use a variation of content columns:

By staggering different column lengths, we prevent bands of empty space across the bottom of the page, which makes it seem like the page has ended. Having paragraphs or images continue beyond the fold line indicates that more content exists on the page and encourages scrolling.

2. Storytelling and page trails:

Using a trail that leads the user down the page is a visual way to encourage a user to scroll. The trail is cut off at the fold, so in order to view more content, the user will need to scroll down the page.

3. Be straightforward:

There is nothing wrong with telling the user to scroll; this can be done through text or a nicely designed graphic. The graphic can be locked into the bottom of the browser window and disappear when the user scrolls.

Designing Websites for Different Scrolling Styles

We can also consider, not every user will scroll in the same way. Visitors of different demographics and reading styles may move through your page at different speeds and in different patterns, so we should optimize our web design and page layouts accordingly.

Fast scrollers are those who zip down the page right away, scanning for something that catches their eye. For them, sticky navigation, floating CTAs, or quick “jump to” links are ideal. They can hop straight to what matters most without losing their place.

Methodical readers take their time, digesting the content section by section. They need clear visual anchor points. Including things like bold subheadings, descriptive pre-headers or alternating background colors help them keep track of where they are and what’s coming next.

Skimmers are somewhere in between. They don’t read every word, but will stop at something that grabs their attention. Break up your text with subheads, bullet points, short paragraphs, and visuals to keep them moving down the page.

The best web pages cater to all three styles at once. If you can hook the fast scrollers, engage the methodical readers, and give skimmers something to grab onto, you’ll naturally boost time-on-page and improve conversions at your most important CTAs.

The Importance of the Website “Fold”

Ultimately, the fold still matters, but differently than it once did. In B2C, it’s the prime space for quick CTAs. In B2B, it’s about building trust and context before asking for action. Use above-the-fold design to hook attention, encourage scrolling with clear UX cues, and account for different scrolling styles to keep visitors engaged from top to bottom.

Contact us to learn more about creating a custom website for your business