5 Keys to Nonprofit Website Engagement

Ever notice how websites today all look the same? Many resemble stock templates—a hero image, some copy, and a call to action (CTA) are the first things you see when you load the page. The popular view of Marketers is to argue that the CTA should always command the most prominent position on a webpage to have the biggest impact, and that occurs “above the fold,” the area of a website that is displayed on the initial load without any scrolling.

There is a good reason—this area of the website commands 57% of a user’s viewing time. But is this the best way to design a site for maximum engagement, usability, and impact, or is it just what marketers have assumed as the default because it’s easier to execute?

Even though we have our own communication needs as agencies, organizations, or brands trying to get a user to take a specific action on our website, users have their own needs they want to be fulfilled from our website, too. Sometimes they want immediate access to a click—but more often, they want to be informed, entertained, engaged, to have an experience of some kind that makes them curious to find out more. In fact, users have come to expect more—and anticipate that some level of participation on their end, most notably scrolling, is where the most compelling interaction takes place.

Why? Depending on your audience, there’s a good chance that at least half of your site visits are coming from a mobile device. People didn’t always have an automatic inclination to scroll, in fact, ten years ago only 20% of time spent on a website was spent below the fold. But with the increase in mobile usage, visitors’ habits have changed, and scrolling has become a reflex. Users know they can scroll anywhere with just a flick of their fingers, and they want to be asked for that simple gesture to draw them in.

But here’s the catch: even your most interested users won’t scroll if you don’t give them a reason to.

…but how (and why) does the internet have a fold?

The term “above the fold” comes from the old print days, when the biggest headlines were above the fold of your daily newspaper. Today, that term is used to refer to the area of a webpage that’s initially displayed on a screen without any scrolling. One important note here: not all “above the fold” experiences are created equal, since your initial view can vary pretty significantly from desktop to mobile, and even phone to phone.

To get a good sense of where the fold lies for your particular website, take a look at your analytics to see what devices (or screen sizes) most users are viewing your site through. Once you’ve figured out what the top dimensions are, you can view your site at those sizes to see what content appears on the screen first. As you do this, ask yourself a couple of questions:

• • Does what’s displayed first make sense?

• • If a user knew nothing about your organization, would they immediately learn enough to be intrigued, but not so much that they’d stop viewing the page right then and there?

• Is the design, the story, and the user flow compelling enough to get them to scroll and engage more?

If the goal is to get people to scroll, what SHOULD be above the fold?

You want to set your visitor up for a successful interaction with your website, which means giving them a reason to stick around right from the top. How you do that, though, is going to vary based on your story, your mission, your audience, and the goals for your website.

For example, if the primary goal of your website is conversion—getting email signups, purchase, donations, etc.—then consider structuring the content above the fold to answer the user’s most basic question: “what’s in it for me?” You can give them a quick way to convert via a prominent CTA button if they just happen to say YES in the first 4 seconds, but really aim to use your “above the fold” space to start answering their question in a way that necessitates them to keep engaging, and scrolling, past the fold to uncover all the reasons to click.

If the primary goal of your website is informative, you can use the “above the fold” space to tease ideas or information that may be surprising to the user. Start your story there—but don’t finish it. Give someone enough to get the basic idea of what you’re communicating, but lean into their natural inclination to scroll to uncover the rest.

How do I create a website the user will want to explore?

1) Start by evaluating your website. Open it up in a phone and desktop browser. Does the content at the bottom of the screen just end, rather than having some element of what’s below peeking up? This is called a “false bottom,” and it gives users the feeling that the content stops there—in other words, they don’t have a clear visual cue or indication to scroll for more. (This is especially important if your users tend to skew older, and scrolling isn’t as much of an instinct.) If your website suffers from a false bottom, there are a few corrections. You can start by showing just a sliver of content to indicate there’s more to read. Another way of doing this is with an arrow or text prompting the user to scroll. A subtle animation with these prompts goes a long way.

2) Think about the story you are telling. There are many ways to go about this depending on your industry. A trend with e-commerce companies is to tell a story about the product—why should you buy it? Where did it come from? What are the environmental effects? Does it help the world? This goes back to answering the “What’s in it for me?” question mentioned earlier. Everlane tells a great story about recycling plastic bottles into clothing on their ReNew landing page. Note the placement of the CTA’s—we aren’t asked to shop until the very end, after they have shown the value of the product and told us the difference we can make.

3) Visuals FTW. You don’t have to get all fancy to encourage scrolling. Strong use of color and powerful imagery can go a long way. charity: water does this eloquently, never having a “false bottom” and seamlessly blending sections to encourage visitors to continue exploring more of their story.

4) Micro-animations: all day, every day. Like the Everlane example, having animations paired with text or images encourages scrolling. This is becoming a popular way to blur the “above the fold” lines. Everlane takes it to the next level by timing these animations, so they feel natural and improve the scrolling experience of your page. Don’t be afraid to bring pages to life. Just be careful…a little goes a long way.

5) Work your content to your users’ needs. We naturally want everything to apply to everyone, to make sure we’re not leaving any opportunity to get someone to click, to read, to give, on the table. But remember that every user is going to come to your site with a different background and a different set of needs to be answered. Some will be ready to take action immediately. Others are in a consideration phase and are somewhat familiar with who you are, but are looking for just a little more information before making a decision to engage. And still, others are interacting with your organization, your brand, or your mission for the very first time (if that’s the case, way to go on your other marketing efforts to get them to your page in the first place!). Great writers, UX designers, and content strategists can help craft messaging and page hierarchy that speaks to each of these users at the right time, giving them the right path to reach their goal—and ultimately, yours.

Let’s Scroll.

Using these website design strategies and approaches, we can move away from trying to shoehorn everything, including CTAs, into the standard “above to fold” space as a failsafe way to drive action. By more thoughtfully constructing the design and story on our homepage, and by extension, our entire site, we can start to craft websites that answer our users’ needs as well as our own, giving visitors multiple paths and opportunities to scroll, to engage, to be surprised, to be informed, and to be compelled—when and where they’re ready.

Interested in going beyond the fold? Media Cause can help! Get in touch.