Is there a fold on the web?

Ah, the fold. Bane of many a UXers conversation with their teams and clients. Subject of satirical, tongue-in-cheek websites. Several actually. So what’s the deal? It’s 2016, is there a fold on the web?

History of the Fold

The idea of the fold comes from the print industry (alarm bell number one). That is to say it is a relic from a previous medium. Newspapers were, well, folded, when they were displayed and sold. The idea was that it was crucial to draw people in with the headlines and images that were seen ‘above the fold’. And voila, a design consideration was born.

In the early days of the web, we brought this idea with us. Dealing with a new medium, we looked to what we knew from the past to try to design well.

Ok, so is there a fold on the web?

Let me be clear that there is always what is visible on screen when a page is first loaded, and so in that sense there is a fold, or a cut off point. However, in today’s web environment, there are too many variables to be able to design with the fold as a key constraint.

Device bonanza and responsive design

There are so many screen sizes and resolutions out there… and it’s only getting worse. Responsive design emerged in response (pun intended) to this. Responsive design allows us to create fluid web layouts that adapt to the screen size they are being viewed on. No more fixed width and size of site means that the fold becomes increasingly irrelevant.

clinton

whereisthefold.com will take a URL and visually overlay various ‘folds’

We are now designing in an environment where the fold will be in different places (alarm bell number two) depending on how a user is coming to the site, i.e. what device they are using to view the website. There are tools that illustrate this. Analytics tools can provide insight into the common screen resolutions of traffic to site. 

Internet Users Screen Resolution Realtime Statistics for 2016

stats

Chart generated with data for top 20 screen resolutions from real time data at screenresolution.org

The thing is, that this is changing rapidly, as new devices get released, as so called ‘mobile’ browsing increases.

Hmm, so what’s a UXer to do?

The good news is, none of this really matters. The location of the fold is irrelevant. What is crucial for good UX is providing a compelling and usable experience that allows a user to complete their tasks, and support a website’s business goals.

People will scroll, if is clear to them that there is more to see, and if the proposition of doing so is compelling enough. Now that we are familiar with the web and how it works, scrolling behaviour is very common. One eye tracking study found a hotspot over the scroll bar. This can be interpreted as meaning people evaluate how long a web page is.

How do I design for scrolling?

canvas

This site uses an illustrative element on the page to instruct users to scroll.

One common solution, particularly for one page websites, is to include a down arrow or indication that the user should scroll. These are often interactive and will trigger scrolling when clicked or tapped. They provide the affordance that there is more to see. However, it is important to note that ideally the user experience should not rely on this type of intervention to ensure scrolling. If you have to tell people to scroll, it may indicate that the design is not giving them a compelling enough reason to do so.

Many content heavy or news sites do a good job of having cut off content, which entices the user to scroll and ensures that it is clear there is more to see.

Many content heavy or news sites do a good job of having cut off content, which entices the user to scroll and ensures that it is clear there is more to see.

Another approach is to have cut-off content that provides a visual teaser that there is more to see. It needs to be very clear to users that there is more content than what they are currently seeing on the page. In one usability test, I witnessed the negative effect that ‘false floors’ can have on a website, in that particular case blocky horizontal lines which divided the pages. Users thought that they had seen all there was to see on a page and so would not scroll. The way to avoid this is to have content that peeks out or cuts off.

A Word About Calls To Action

indesign

The Adobe InDesign CC page has purchase CTAs in several locations – in the top menu to support a user who is ready to buy straight off the bat, and at the end for a user who wanted to look through the information first. Note the secondary CTAs throughout.

A key concern that people often have is whether a call to action button (CTA) such as ‘buy now’. ‘subscribe’ or ‘sign up’ will lose effectiveness if it is not placed ‘above the fold.’ When conversion rates are at stake, it can seems crucial to make sure the CTA is immediately visible. The key takeaway from experts is that the most important aspect of CTA placement is whether it comes at a point where a user has been convinced to take an action. The hierarchy, design and content of a page should account for the information a user needs to be ready to make the decision to ‘buy’, ‘subscribe’ or ‘sign up’, effectively when they are ready to make the next step. To account for learning styles, accessibility and different user flows, this often means having the key CTA in a couple of strategic locations.

To fold-ly go…

As device fragmentation continues, and we see more use of split screens, it will become harder and harder to tell just how much of a webpage a user is seeing when they first load it. The great news is that good UX is timeless. Hierarchy, clarity and affordances will support the scrolling behaviour that people are already used to as they look for what they need. It is also worth remembering that not everyone is using the web in a visual way – people may be accessing using a screenreader or solely by keyboard tabbing, which de-emphasises the importance of the visual fold even more. In all of these cases, user centred UX will make sure the web is fold-proof.

Get Started

Free TrialInspired by what you've read? Kick off your next project with Dreamweaver. It's part of Creative Cloud. Download a trial for free!
  • Dennis van Leeuwen says:

    I didn’t realize there was more to read after loading on to this page.

    Thank you for folding my mind. 🙂

Share your thoughts

Your email address will not be published. Required fields are marked *

*