Above and Below the Fold: Stop Talking about the Stinkin Fold

WP Tips

above and below the fold

The 90's want their Design Rules Back!

Yesterday I wrote about sliders, comparing their performance to see which one was the most lightweight solution. My friend Brian followed up by declaring (rightly so) that sliders suck. But who is to blame? Is it the client that keeps demanding that we put them on sites? We both know how easy it is to blame our clients. All the time. But let me ask you this – do you have a lot of clients asking you for:

  • blinking text?
  • frames?
  • animated GIFs?
  • cheesy icons as bullets?

I'm asking the question because at one point every client asked for those things too. I know, I was designing sites back in 1994 & 1995. So why were clients asking about them then, and not asking about them now? Simple.

We educated our clients.

Why do so many ask us for sliders? Because they believe that it's the easiest way to get great content above the fold. They think that's the critical space for calls to action, branding, making a seven digit income without doing anything, and the answer to so much more. But they're wrong. Sliders aren't the answer and the above and below the fold discussion is a design paradigm that needs to keep animated GIFs and blinking text company.

So here are the five things I'd like you to share with people when they start asking you about the fold.

1. We know how to Scroll

Show them a picture of a mouse and ask them if they know what it is. Show them that wheel on the top half of the mouse and ask them if they know what it's for. Show them how “technically advanced” they truly are. Because the argument, when it was first made in 1994-1996,  was that 80% of the people didn't scroll on web sites because they didn't really know how. Today we all know how to scroll.

In fact, invite them to go to Expedia.com and search for a hotel. Pick Anaheim and look for hotels near Disneyland. Do they only review the first six hotels? Or do they ….you know….scroll? You bet they do.

The first studies were giving us hints about overall usability, and since people were new to the web, it was a logical thing to think about. But the web has been around for a few years now. We know better. Our experiences have changed, so our logic should as well.

2. We all have different Monitors & Resolutions

Oh the good old days where everyone was looking at things with 800×600 screen resolutions. That's why we were told the “fold” was 600 pixels. It was what showed up without doing anything (scrolling). But tonight I'm looking at a 27″ monitor with a resolution of about 2500×1400. So how would you define the screen size I see when I land on a page? It's not a measly 600 pixels, that's for sure. But don't design for my desktop because I use a laptop. You too? Great. But I bet each of our resolutions are different. So given that, do we really have a screen size that we should be targeting? Not globally. Instead, make decisions that make sense for your own site. Look at the resolution of the devices that are visiting your pages. You can do that with Google Analytics. Make an intelligent choice that is based on actual facts, rather than stories your mom used to tell you about the internet superhighway.

3. There's no “Fold” on my Phone

What percent of people are visiting your (or your client's) site using a mobile phone? Do you know? You should. Because if it's more than a few single digit percentage points, and it's growing, you should be thinking about a mobile strategy. I particularly like the approach that First Page Mobile takes, because it lets me design a landing page for mobile users with my key info right there. They can always jump into the site after that, and then the use of a responsive theme framework also helps (I use Catalyst, but Genesis has been releasing a ton of responsive child themes). Either way, there is no special part of the page that people view, while everyone else ignores.

4. Compelling Content drives Attention

There's a reason you would scroll down the page when looking for a hotel on Expedia's site. It's because you were interested in the content they were showing you. Yes, 80% of the people that hit this site may not spend a lot of time reading this paragraph, but that isn't because of it's placement. It's because this article may not be useful to them. But I try to make every page useful at some level. It's why I have big titles spanning the post. They can get the gist of the article just by a quick scroll. Each section is self-contained, so they can read it without reading anything else. And if they decide to really read the whole thing, they can scroll up and start again. But they're not doing any of that based on pixels. They're doing it based on interest. It's my job (or my content's job) to engage their attention. Period.

5. Above the Fold Design can lead to Distracted Design

I have a friend who joked that when a client asks for tons of stuff “above the fold” that they should shrink the text to 6px and then put the whole site up there. I loved the joke but unfortunately, some people take that approach. Don't get me wrong, they don't shrink the text, but they design in a similar fashion – trying to jam everything above the fold. It's why they put sliders up there. To put 10 things in the space of one. But sliders are like billboards. When was the last time you were driving down the highway (fast) and you saw a phone number and you stopped and dialed it? Never. Billboards are great for impressions but horrible for calls to action.

If you put your top articles, an ad for your upcoming event, your bio, and more all above the fold, it's like handing me a business card with two addresses, three titles, several phone numbers and a couple urls. The chances that I'll even keep your card are really low.

In Conclusion…

Don't blame your client because they ask you for sliders. Don't blame them when they ask you to put more and more above the fold. Instead, stop them. Politely. And then educate them. They deserve to know the truth. And you deserve to be a professional who doesn't have to design crappy sites just to make a living. Hold your head up high as you educate the world and make the interwebs a better place to enjoy.