Forget the Page Fold, use Active Zones.


The page fold is an argument I have battled for a long time, and if it does or doesn’t still apply in modern digital design.

The old consensus was that you have to get a call-to-action, or an engagement point in above “the fold”, and some clients still get hung up on cramming as much information as possible in above the page fold. This generally leads to very messy, heavy, illegible and confusing layouts for a user.


Action Zone - Above The Fold Diagram


The general consensus between designers is that the page fold is now obsolete. There are now better ways to approach designing for screen. Scrolling is a natural behaviour for 99% of people. With the evolution of mobile technology, and the ever-changing landscape for screen sizes and orientations it’s much harder to define standard sizes.

If you have the ability to space things out nicely and use legible size type then why not do so. Obvious right? Maybe not.


Clear and legible design for screen


I have started to use the analogy of Facebook on your phone, the vast majority of people use Facebook, young or old. Everyone scrolls down their timelines to find what else is going on. And due to this, it has become a natural behaviour to immediately scroll now in an app or on a web-page. This is explored in more detail here by design writer Luke Wroblewski.

Luke also mentions being careful not to create a false page fold, this is where the content ends before the bottom of the browser window, making it seem like there is no content below the initial page load.


Image showing a false page fold


What should you be doing?


With the idea of there being a page fold thoroughly debunked, and also being careful to not create any unintentional page folds, the problem now is not that people don’t want to scroll; more people actively seek to scroll so how do we best guide them through the experience.

With that in mind I suggest the idea of an “Active Zone”, just above and below “the fold”, this is much easier to define across conventional industry standard screen sizes – 1400px, 1024px & 320px.

The enabling of “Active Zone’s” can be achieved in many different ways; from language choices, image placement, web animation, call to actions and more.

You just have to keep the user moving through the site, for example: The easiest way to achieve this would be to treat the area immediately above and below the browser bottom, this gives the user a clear indication that they have more content to engage with.


Action zone in action, the type gives a clear indication of further content


A more inventive way to do this would be to use language as your tool, to keep people moving. Using copy like “Want to find out how to increase your team’s productivity by 200%?” instead of “Increase your teams productivity”. This is where you can maybe relax the rule of false page folds, as your language choice is telling the user quite clearly that there is more to discover.


Using language to tell the user there is more to discover


This is basic techniques that SEO and copywriters use to keep users on a page or to keep users engaged on a page. You can see a fun way to do this here on Please Scroll.

The main purpose of an “Active Zone” is to point out to the user there is extra content other than what appears on initial page load, it is not to figure out where to put the crucial piece of information like the old page fold argument of, “It has to be above the fold because that is where people engage.” That has been proved totally false, and nowadays people will engage at any point on their journey provided that their journey is seamless and the content they are engaging with is compelling enough.


Use type and layout to engage users to interact with your content


In today’s digital environment it comes down to content is king and the designer’s job is to display this content and nurture a users journey and interaction with such content in the best way possible.

It’s no longer good enough to blame lack of engagement on above or below the fold. Up your content game if you crave more engagement, make your copy more compelling and you will see results.

Give that brilliant content and compelling copy over to a designer who understands the current digital landscape. Let them use their expertise in the way they see fit and you will start to see improvements in user retention, bounce rate and time spent on page.

Related posts