Have you ever heard of someone reference “the fold” pertaining to a website?
More specifically, “above the fold” or “below the fold”.
This is a common term used in web design that you should become acquainted with.
So what exactly is “the fold” and why does it matter?
Defining “the fold”
When you think of the fold, you can picture a website like a newspaper’s front page.
As you may know, a newspaper comes folded in half, where you can only see the top part of the front page.
This section features the most notable headlines and stories you want everyone to see, and in order for them to want to read more they’ll have to unfold the paper to keep reading.
Now, switch gears to your website and picture that newspaper — where the fold is the end of your browser window.
And in order to continue reading, a user will have to scroll.
Everything seen in your browser window without scrolling is known as “above the fold” — and everything below the cutoff of your browser window is known as “below the fold”.
Much like that newspaper, you want your most important messaging and actions to appear above the fold.
If you require a user to scroll before they can understand what they’re reading or take any additional action, you’re losing out on the most valuable real estate of your webpage.
Taking advantage of the fold
As I’ve touched on, you really need to pay attention to the content you’re putting above and below your fold.
You cannot expect the reader to scroll down to the bottom of a page to take action — whether that’s sign up, buy, shop, or just get intrigued to want to keep scrolling.
That’s where the area above the fold comes into play — showcase the top and most important information right away, and include a call to action or avenue to continue to browse.
Now, depending on the user’s device, will dictate how large the fold is — they can have a small 11″ laptop, a mobile device, or even a 30″ monitor.
So you cannot guarantee the same height above the fold for everyone, but unless you’re using 100pt font size or something, you should have no issues fitting in your content above the fold to be viewed by most.
I took a look at some sites online to compare how they handle the fold:
In the screenshot above, you see Taco Bell’s website — and above the fold of their homepage you’ll find a few things:
- Enticing imagery
- A navigation menu
- Two calls to action: order or view menu
In addition, you’ll see you can just see a headline announcing a menu item is back. This helps you to see what’s to expect below the fold and entice you to keep reading.
Now, let’s take a look at Target:
On this retail giant’s site, they treat the area above the fold like the prime real estate it is by featuring their latest sale.
Big, clear headlines, crisp imagery, and an insight into some of their sales really make you want to keep scrolling to see what other kinds of sales are going on.
Design-wise, they also do a great job of utilizing color to help your eye focus on what’s important — those red discount numbers.
Across my research, I found that most retail websites used the section above the fold for advertising their current sale.
Now, one final site I wanted to showcase was one of our own:
Calabria Pizzeria, a local pizza joint that AWD designed the website for, features several important pieces of content above the fold:
- An enticing image of their food
- Dual call to actions in the hero (View menu + read reviews)
- A call to action bar with delivery and pickup options
The added call to action bar is imperative for a restaurant website — it’s probably one of only 2 main actions users look to take on a restaurant site anyway: view the menu, and order.
By incorporating this above the fold, gives the user the opportunity to see what they already need without scrolling.
So now that you know what “the fold” is — take a look at your site and determine if you’re utilizing that area to your advantage.
Remember, it’s like the front page of a newspaper — it’s what everyone will see first with zero effort, so make it count!
Thanks for reading,
