Web Design: What’s Unfolding Above the Fold Matters

What is meant by “above the fold” in web design?

Just as a newsstand newspaper folded in half, all you could see is the top half, so the Big Headline stories are there.

It’s the same with webpages, everything that is visible without scrolling, or panning on a mobile device is what in the industry is known as “above the fold.” Since designers started developing webpages, they have tried to fit everything that was important in the space above the fold, fearing users would not want to scroll.

How did that happen? Well, when people started using the internet they weren’t familiar with the practice of scrolling, some didn’t even know it was possible. Therefore, designers wanted everyone to see what was important. They wanted that call-to-action (CTA) visible above the fold, so that users would answer the CTA without scrolling. Even though scrolling is widely used today, designers still try to squeeze as much as possible above the fold.

With the ever-increasing use of mobile devices to view webpages, designers have to be more creative in their approach toward keeping readers on the page, panning, and swiping to get more information regarding the owner’s products or services.

In fact, Google’s Page Layout algorithm penalizes website owners that have too many ads above the fold. What is too many? Google, as always, has been reluctant to announce numbers, but what that should tell website owners and designers is just how important that space above the fold is to users and not everyone has the luxury of a 24-inch monitor.

How can Designers make the Most of that Real Estate above the Fold?

Aside from the obvious, keeping the advertisements out of prime real estate, there is a lot that can be done. Remember the old adage, “Location, location, location?” Place what matters most above the fold. Ensure the all-important CTA, quality content and relevant images are by necessity placed above the fold and not squeezed down or out by ad space.

When designing a website, one should be mindful of graphic size. A large graphic or slider at the top of the page leaves little room for meaningful content. Many people do not stay on a website long enough to read several slides of a slideshow. Search engines are looking for meaningful content as well.

Designers and developers should use a Screen Resolution Share or Screen Resolution Tester to test the visibility of those items that will convert visitors to registered guest or paying customers. Using these tools can aid a developer to set screen resolution by the operating system or to a setting that most users will employ. Since Android or iOS are the operating system most preferred for mobile devices and those are perhaps the smallest resolution screen, a developer would probably be safe with either operating system setting. Alternatively, take it one-step further and look at the display on several mobile devices.

How Relevant is the Fold Today?

According to data compiled by Click Tale in their article Unfolding the Fold detailed that more than three-quarters of all internet users scroll below the fold to some extent and nearly one-quarter scroll all the way to the bottom. Therefore, does that make everything I have written up until now irrelevant? Not at all, it is still important to have that CTA above the fold, as many users today are merely scanning the page and the sooner they see that CTA and answer it, the better chance you have of making them a repeat visitor or customer.

In fact, Jakob Nielsen, in his article Scrolling and Attention points out that, “Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.” In addition, he goes on to say that, “The real estate above the fold is more valuable than stuff below the fold for attracting and keeping users’ attention.”

Although, designers should use every portion of a website for quality content and images, it is a designer’s duty and responsibility to the website owner to prioritize the most important information available on the site and place it above the fold, just as Mr. Nielsen said, “If everything is equally prominent, then nothing is prominent.”

Ready to get started?