Above the fold – what does that really mean and does it matter

stack of newspapers used on the above the fold blog post

You’ve heard time and time again – we need to make sure it’s above the fold. Have you ever wondered what that means? Where it came from? Is it valid when you’re talking about web design?

Above the fold originated with the newspaper industry. Remember those paper things people used to pick up on the street or have delivered to their home? When a newspaper is laying on the rack it’s well, folded in half. To peak the interest of potential paper buyers, editors wanted to make sure the hot, important stories were visible should someone walk by. It was to help encourage the sales of the paper. If someone saw a juicy story, they’d FOR SURE buy it.

Google smart phone usage chart from 2013Above the fold has migrated it’s way from newspapers to web design. I hear many times from clients “make sure it’s above the fold” or “is it above the fold”? So is it a valid comment? Before you can really focus on above the fold, you need to consider some things as it refers to your digital web presence. Once you take all things in consideration, then you can explore the term and its use a bit more. Some facts:

Mobile Users: According to W3 Schools the usage for mobile devices to browse the web continues to increase. Numerous articles from 2014 including this article from Smart Insights indicate that mobile users are surpassing desktop users. And according to this 2013 study, 67% of the population use cell phones or smartphones to browse the web.

Google in April of 2015 expanded mobile friendly sites as part of their rankings “signal”. This means that all those folks who didn’t have or don’t have mobile sites, could be effected when it comes to ranking in Google search. This of course only effected mobile searches and not desktop but if mobile users are on the rise, you can bet this plays a pretty important part.

the difference between a website viewed on a desktop vs one on a mobile deviceScreen Resolution: This is how people view websites on their desktop. Screen sizes are getting bigger and bigger which means a multitude of resolutions. W3 School analyzes the various browser resolutions that people are viewing the internet with. As you can see from these numbers, it varies. This means that how your site looks to someone on an 800 pixel wide viewer and one that is 1920 pixel wide viewer can be completely different. The image to the right is a perfect example of how relatively different your screen looks from device to device. What’s visible on the desktop isn’t exactly visible on a cell phone.

So why am I telling you all this? Because above the fold is relative but it’s limited. You can’t put EVERYTHING above the fold and users SCROLL.

If your site is mobile responsive you already know the display is completely different. Some content gets hidden some content shifts. And taking in consideration the view port, it is much much smaller than a desktop screen resolution so you are very limited on what you see initially as you load the site on your device. Scrolling has become a natural function to users on smartphones. So above the fold takes on a whole different meaning when you throw mobile devices in the mix.

Okay so now what? Strategize. Plan out your design and content. Sit down with your team and discuss what’s important to you. What do you want users to accomplish when they get to the site? The first impression is important. And because statistics show more people are using mobile devices, you have to consider first how your site is going to look on a phone.

A bad user experience no matter how much you put above this invisible fold is no bueno. It won’t matter.  A good designer will work with you if you help them understand your needs and the direction you want to go.

Other things to consider

Call to Action: This is the key to a successful mobile presence. What is your call to action? What is going to get users what they need right away? What is going to make users act. For example, if you’re a non-profit, consider having your donation button at the top of your website and on all pages. Or if you are a restaurant owner, making sure the menu or reservations button is at the top. Want users to call instead? Make sure your click to call phone number is at the top.

Relative Content: Instead of concentrating on the fold, focus on the content. Good, rich relevant content will cause any user to browse further. Entice them from the homepage with teasers and snippets. Use strong calls to action to promote clicks to maybe that fabulous blog post or that special event you are hosting. The fact is Google and search engines alike are looking to see if the content on your site is relevant not whether it is above the fold.

I hope this helps you understand a bit about the fold and how it applies to web design.