My Life Below the Fold | npENGAGE

My Life Below the Fold

By on Mar 27, 2013


Sometimes I get so excited about new technology trends on the web, whether through new ways of interacting with a site or a new visual style, that when a question is asked that seems to belong in another age of design I get totally thrown off guard for a moment. Lately that exact question has been thrown my way more than once, so I felt the need to address the topic. That topic? Designing for “above the fold”.

Little history lesson – the term “above the fold” originates from newspapers, where the most attention-grabbing story would be positioned above the midline fold of the paper so it could be viewed easily from a newspaper stand. That term found its way to the web with the thought that the most prominent content of your website should be immediately available when the page loads, lest the audience navigate somewhere else.

So, how does this affect a nonprofit on the web? Is “above the fold” still critical to your online marketing and conversation rates? Lets discuss a few points that may surprise you if you feel that designing for “above the fold” is still critical to your online strategy.

People scroll

Yes, truthfully, people now scroll. They scroll without thinking about it to the point that you may not even realize you are doing it. Modern devices for interacting with the web have embraced scrolling – modern mice have either a scroll wheel or touch-based scrolling. Two-finger scrolling on laptop track-pads has become a standard feature. Your touchscreen tablet, smartphone, etc. all scroll as a natural part of interacting with the device. Scrolling has become so normal that Apple removed the scrollbar as a default interface element in OSX in 2011. It may appear when you start scrolling, but there is no visual cue to tell you to scroll. Why did they do this? Because Apple’s interface testing showed that users scrolled regardless of the presence of a visual cue.

Some of the most effective modern designs embrace scrolling

Scrolling on web designs has opened up new ways of adding interactivity to a site. Parallax scrolling allows your site to appear to have multiple visual layers that increase the depth of the imagery. Section landing pages can be replaced with themed “screens” on the home page that are accessed via a targeted link that auto-scrolls the user down to the chosen content. Most importantly, modern user testing has shown that users now scroll instinctively as a part of “scanning” the site for relevant content. Now, instead of just scanning the first screen of your site to see if anything appears relevant to the user’s search, a quick scroll to the bottom of the page is also used to scan for content that may appeal to them.

So, how does this impact your online marketing efforts?

It has been drilled into the heads of many nonprofits to offer the “reward” for visiting a site – the key call to action, visual feature, etc. – the moment the page opens. This may grab the users attention, but may make it so the rest of the content on your home page goes unnoticed. Consider offering the “reward” farther down the page, using scrolling and intelligent use of content and imagery to entice the user to scroll further. Lets look at a compelling example of this: The Acumen Fund

This site represents the exact point I was just trying to make. The Acumen Fund has made scrolling their site a visual adventure, guiding the user down through a timeline of accomplishments, all the while highlighting the ways in which they are making a difference. And where is the main “Ask”? Where do they make appeal for a user to get involved and donate? All the way at the bottom, rewarding the user for taking this trip through their home page experience that they have developed.

So what should you take away from this? Don’t feel constrained by “the fold”. Break beyond it, explore new ways to interact with your users, and craft a new experience that leaves a lasting impression with your audience.


Leave a Reply

Your email address will not be published. Required fields are marked *