For many years we used content above the fold as a gateway for users to access pretty much anywhere on our sites. We would fill these 600 or so pixels of valuable space with all the important sections of our site we wanted our users to know about (we were particularly guilty of this on homepages, as Rand discussed in this Whiteboard Friday).
However, the arrival of smartphones and tablets has forever changed the way people consume information and navigate around the web. Smartphones taught users how to scroll and swipe, and as such have reinvented the way webpages are designed. So, what about the fold? How has this changed in this multi-screen world?
Space above the fold is still hugely important, but instead of just sharing everything there, the fear centers around the idea that users may not want to scroll. Instead, we now need to narrow down our focus, using space above the fold to share our main ideas that will make people want to read the rest of the page.
History of the fold
The term "above the fold" originates from the world of newspapers; papers are generally shown to customers folded in half, therefore only the top half of the page is visible. Editors would use this space to grab attention using important stories, powerful headlines and strong imagery to encourage users to buy the paper.
On a webpage, the fold is the area of a page displayed to the user without them having to scroll. Based on a 1366x768 pixel screen resolution (a little more on this choice later), the area highlighted in red is generally how content is presented to users on a landing page (i.e. above the fold)
Is space above the fold still valuable in 2014?
At the end of 2013, Peep Laja spoke at SearchLove about the Principles of Persuasive Web Design. He had observed that despite it being 2013 (now 2014) and us living in a much more scroll-oriented world, content placed above the fold was still grabbing 80% of our attention.
This continues to make above-the-fold space highly valuable to capture a user's attention. The main difference today is that users no longer have the patience they once had. This is due to the high volume of content users have access to, making earning their attention increasingly competitive.
Therefore, this space should no longer be filled with clutter and overwhelming amounts of information. Instead, above the fold content needs to contain a strong value proposition that explains to the user exactly what the page can offer.
With so many devices, how can you possibly design for above the fold?
The multi-screen world we now live in has changed the face of above-the-fold space. With such a range of devices and responsive designs the fold will appear in different places dependent upon numerous factors (such as screen resolution, thickness of the user's toolbar, and whether the page is zoomed).
How do we design for this? There is no one-size-fits-all solution to this problem, but what we can do is ensure our important content is towards the top of the page and is optimised to serve the majority of our users.
To find out which screen resolutions the majority of your users use on your site, complete the following steps:
1.Open Google Analytics
2.In the "Audience" tab, view "Technology" and select "Browser & OS"
3.Choose "Screen Resolution"
How to view your site in different resolutions
To see where the fold is for various screen dimensions, use the "Inspect Element" feature in Chrome to override your own screen resolution.
1. Right-click anywhere on the page in Chrome, and select "Inspect Element"
2. Click on the settings gear in the bottom-right corner of the screen
3. Select "Overrides" and check the "Enable" box. Check "Device metrics" and input the screen resolution you would like to view the site at. Note that closing the override window will return your browser to its default resolution.
Designing for beyond the fold
Okay, so we know that space above the fold is still incredibly important for engaging user attention. What about the rest of our beautifully created content? A study by Clicktale shows that if a page has a scroll bar it will be used by 76% of users to at least some extent. 22% will scroll to the bottom of the page. So, as pointed out by Usability Expert Jakob Nielsen, space above the fold still grabs the majority of attention and people do scroll, but we should make sure that we are designing to encourage that scrolling.
While mobile devices have developed scrolling as natural user behavior we have to ensure that our page layouts are designed to showcase all our content. So what should the fold line look like? Ideally, we want to make content on the fold line draw the users eyes down the page.
Three ways in which we can encourage scrolling
1. Staggered content columns
By making content different lengths in each column we prevent the issue of having empty space across the width of the page, making it seem like the page has ended. One paragraph or image is always broken by the fold, encouraging the user to scroll down to see more information. This is a style often used by newspaper websites such as the New York Times and the BBC.
2. Page trails
Using a footpath that walks users through the page is a great way to encourage users to scroll. The fold simply dissects the path, which the user will naturally continue to follow. A great example of this in action is the Guide to Wordpress by Simply Business.
3. Sometimes you just have to tell them
Sometimes rather than trying to use subtle visual cues to guide users down the page it can be beneficial to simply tell the user there is more content for them to see. This is the approach Put Things Off uses to introduce further features of their mobile app.
Key takeaways
- The fold still matters. While space above the fold used to serve as a portal to explore all the sections of a site, its purpose is to now grab attention and introduce the user to your brand/product.
- We live in a multi-screen world and scrolling is now habitual. If we are building pages that require scrolling we need to ensure we encourage this behaviour through visual prompts and remind the user there is deeper content below the fold.
- Continue to monitor user behaviour particularly in relation to the most commonly used screen resolutions in order to ensure valuable content remains above the fold.
Great read "users no longer have patience" I completely agree. Users are always in a hurry to find what they're looking for. Web pages need to load quickly and deliver the info right away.
Something that we should all realize too is that a webpage makes it's first impression within 1/50th of a second, or about the amount of time it takes a popcorn kernel to pop.
The human brain can also identify images within 1/13th of a second, and the human eye will instinctively navigate towards whatever text element loads first, unless the attention is grabbed by something else.
If you really want that "above the fold" content to stand out, you should be considering what the hero image, typeface & value proposition are saying about your brand. And are these elements doing it as quickly and as clearly as possible?
Most of this stuff is happening subconsciously, so keep that in mind when you select all of the elements that (indirectly) speak about your brand. It's exhausting to think about, but damn is it worth it.
Good to remember the fold and even test for it where we can in our mobile & multi-device world. I think we'd all be astonished if we knew *exactly* how business gets conducted these days. I see people checking out on the bus, searching for the local pharmacy while out for a walk ... hitting ALL of them? Tough - but focusing on where they come from is great!
Great advice, Tim.
Having a trail is crucial - like you say - so that less-savvy web users realise that the page continues. I always try and make sure that the page's main heading and some body copy is visible at the very least.
Funnily enough I ended up on an E! Online article the other day (don't ask me why...!) and with adverts (including a background takeover), a wide menu and links to other sections of the site (e.g. E! Red Carpet), you can just about catch the title (and in fact, if you get the cookies notification, it'll cover the title). Very bad for UX IMO - I'd love to know their bounce rate. Here's a random example I grabbed.
Hi Steve,
Thanks for the comment. Great point about less-savvy web users. Whilst more and more people are now web-savvy there are still a huge amount of users who need guidance. Remember these are the people who could be your future customers.
Amazing(ly bad) UX example you shared with me from E! Online. Perfect example of the need to test screen size! On my 1440x900 I could just about see the start of the article. Drop it down to my smaller laptop screen of 1366x786 and all I could see was adverts. Like yourself I would love to see their bounce rate etc.
Tim
Good point actually... On a different device I can see a bit more of the article without scrolling down. Just goes to show though that you should either a) test on multiple devices and at different screen resolutions, or b) simply not have so much unnecessary junk above the fold, just to be safe...!
Great stuff, totally agree that thinking about the fold is critical. It is important to remember that Tablet's can usually be viewed in potrait or landscape. While responsive designs (done properly) are still not the norm it is worth considering how the page looks in both. There's been some interesting inovation around scrolling and eConsultancy has collected some of the best: https://econsultancy.com/blog/9582-14-fantastic-scrolling-websites-that-tell-a-story
Another thing to consider is page load speed as it is a key factor in both user experience and SEO. Consider lazy load of images and cutting the page weight below the folder, or at least setting the load order so it loads last, as most visitors won't even see it.
I have noticed the 80/20 percentage in every aspects of time and work division. Why is it that you must pay 80% on that thing and 20% in the other hand? Now relate this to Seo and Social Media Marketing, so are you trying to say that we must put 80% attention to Social Media/Content Marketing and 20% for Seo?
People are addicted to information, yes it helps to encourage them to scroll down the screen, but when someone is truly looking for something they just tend to keep going.
I always scroll, but then again I'm in Facebook and Twitter all day long so I'm used to scrolling to find information.
I think it's more important to deliver the right information when the visitor needs/expects it, that way you can keep them scrolling or clicking until they get to where they want to be.
Thanks for the post! Seems Chrome on Mac os X has not the "Device metrics" option... or?
Good points, you should always think of the user when creating content. The thing I hate the most is "sticky adverts" that is annoying when trying to read a article.
Another way which we have used in some projects is to use a smooth jQuery scrolls on the page. In other words, keep the content short above the fold but include link which on click scroll the page downwards thereby encouraging scrolls.
Excellent post. While "above the fold" is the golden space, it is also very important not to try and cram too much in that area and then have the rest of the page looking bare. Like Mr. Miyagi from Karate Kid always said, "life is about balance". :)
I come from a publishing background myself and was taught to make the most important content "big, bold and above the fold"! I don't think that will EVER change unless design takes us to a new place where users don't land at the top of the page. It will always be our most valuable real estate and we will always need to design it with a "compel and convert" goal.
Wow, this article is great! I was just arguing with one of my company's consultants about having sub navigation, links, and content below the fold. They claim it's the best for SEO?? Can't wait to see what the analytics show.
80/20, works everytime.
A very interesting image in the first fold that can make me scroll. How does google take care of this use case?
Great post! How about tabbed content? It helps keep lots of information over the fold. However, Google might not like this type of content in the future...
https://www.seroundtable.com/google-hidden-tab-con...
From a user stand point I think tabbed content is great. Thoughts?
Quite a new perspective Tim. something non techy people like me would never focus on. Thanks for sharing such great info.
Above the Fold = Products at Display
Below the Fold = Many (Like Displayed) On the Rack.
The methods of display mentioned by you are good to consider while designing. Thanks for the sharing.
Regards
Sasha
Does anyone have an opinion about above-the-fold / below-the-fold for the blog home page, not just regular web pages. Our point of view is that the blog is a central place for content discovery and the blog home page allows people to easily peruse a variety of articles that may interest the reader. While design considerations are important, maximizing content discoverability while minimizing scrolling would seem to be the best practice when it comes to the blog home. Thoughts?
Thank you for a great post!
I was currently talking to a client about the 'above-the-fold' concept with long scrolling and how it should be leveraged in a mobile and tablet world!
Thans for giving me data for my arguments!
Thanks for sharing the origin of this fold concept. We knew the importance of marketing pitch text in the fold region but that was a good info.
Consider the possibility that the reason 80% of visitors' attention happens above the fold is that we as site designers shove all our most important content above the fold.
Thanks for the great post Tim. It's easy to sometimes get carried away in the design process and lose sight of the 'above the fold' concept. Another great sight for anyone looking to test a website on different devices is https://mobiletest.me/
Are there any studies to back this up the statement that users have shorter attention spans these days, or is an assumption that users are more likely to have addition distractions when using the web these days? If anything I'd say that users are more discerning these days.
It's easy to blame the user for having a short attention span, while neglecting that perhaps your site it's your website's fault!
I often get clients complaining that the content they think is important (which is usually call to actions) aren't above the fold, without considering what the user wants to see on the page. Chucking a call to action above the fold won't encourage users to click if they don't know what your product does.
It's more important to think about how the fold impacts on the overall user experience of your page, as opposed to simply focusing on what you think needs to be above it.
I think it's important to consider "above the fold" your 3 second opportunity to break through the clutter. People search their iPhone while using their laptop and streaming a Netflix movie on their TV. I can't quote any studies, but I know from me and my family's behavior that there is little patience for a website that won't deliver what I'm looking for immediately. I think short attention spans online is also a result of designers conditioning users to look for certain patterns of how a website "should" behave, which results in bounce when they don't get it.
Hey Tim, awesome post.
I have a question about using Chrome's inspect element feature to view your site in different resolutions. When I go to the Override menu, I don't see any of the options available in your screenshot. Do you have any idea why I might not be seeing the same options?
Thanks!
Hi,
So it seems that Chrome literally changed this today! Here is what you now need to do:
1. Right click and select inspect elements
2. Choose settings
3. Select Overrides and check "Show Emulation view in console drawer
4. Close the overlay
5. There will be a console below the elements section at the bottom of the screen with Console, Search and Emulation as options (expand this by dragging)
6. Check screen and enter your screen resolutions.
Much simpler right? :o(
Thank you sir!
I think i'm pretty savvy, but I couldn't get passed step 5 in the new format. Maybe they changed it again? Anyways, I found a chrome extension called "Resolution Tool", which is even easier to use - https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal
. Thanks for a great post Tim.
Too many blog posts try and dismiss the power of "above the fold" and the strategy that comes with it. Great explanation as to why it still matters and how to prepare and design for it.
Whenever I am discussing re-design with clients - I always emphasis the above the fold - and good call to actions. I believe it is still one of the most important variables to good CRO.
Your pal,
Chenzo
Tim, great change of pace in the Moz blog landscape for an article discussing a design approach to web usability across all devices/browsers and THEN how it could affect things SEO's worry about ie: time on site, ad placements, navigation flow, bounce rates, page views, content links, etc.
A little breath of fresh air before going back into other SEO focused articles during the day. Thanks for updating the comment for the Inspect Elements change implemented today. Good useful tip, I never even knew about :)
I should send this to the executive that recently told me we would sell more software if we had more links in our footer...Seriously great post though. Advice on how to measure, track and optimize with some great explanatory examples - love it.
Tim, great post - I totally agree that user's are becoming more and more impatient. Gone are the days when they are willing to fill in tedious registration forms and spend minutes on your website just to find out what exactly it is that you do. Users want to know what you offer in under 30 seconds, if they are interested then they will proceed to find out more. Point being - users need an incentive to scroll down - the three methods you share are great examples.
Interesting updates on above the fold contents. It is clear that above fold is very much important and relevant to web marketing in 2014 since stats has shown that about 80% increase in attention is attributable to this concept.
Its now left for marketers to encourage a situation whereby the above fold concept would be properly embedded into the mobile responsive designs.
The takes on how to view this fold in multiple screen resolution is very instructive.
Thanks for sharing this! Web design is definitely evolving at a breakneck pace! I have over a decade of experience designing for the web, but I'm still trying to wrap my head around designing for mobile.
Thanks for insights, Tim!
You're definitely right about having the right information "above the fold," even in this digital age. I don't think people ever had a good attention span, even back in the solid newspaper days. That's why everything I learned in journalism school is still relevant today, despite what people say about journalism being a "dying" industry.
In fact, journalism hasn't died at all; it's just evolving. And this is a good example. I also really like your thoughts on providing visual cues for sites that require scrolling. Sometimes people don't know there's more unless you tell them.
Great post Tim and I agree with your points; but just to play Devil's Advocate slightly, do you feel that by placing the most important content "above the fold" it becomes a self fulfilling prophecy? By giving users nothing else of importance or relevance, they have no reason to scroll.
Whilst describing putting "the most important content" above the fold what I meant is the following. Instead of placing everything up there take the most important element of the page and place it there. Give it a really great proposition value (that is the hard part) to engage the user.
Its that part where we are fighting to win their 80% of attention and keep it. This is the point we try to encourage our users to scroll further down to find out more.
Great post Tim. Not very surprised that the content above the fold attracts so much of our attention. If the content above the fold is not interesting i'm definitely not interested to see what they put under the fold. So i'm not scrolling down at all. But it is more difficult with all these different devices and resolutions to design your website in such a way that above the fold looks awesome and interesting everywhere. Responsive webdesign and just good content help with this of course :)
Excellent post Tim!
I love the ideas for designing beyond the fold. I think too often it is assumed that users will know to scroll. Option 3 is awesome!