• Share
  • Share
  • Share
  • Share
  • Share

Posted by Claire Cahill on 02 April 2015

With so many different types of device screen sizes to cater for we look at why there's now no such thing as 'the fold'

What is ‘the fold’?

A newspaper folded in half to just show the top half

It’s an old idea that originally came from newspapers. Often when they’re stacked for display in shops they’re folded over so that you can only see the top half of the front page, so this is where the editors put the most important stories to catch people’s eyes.

In the early days of web design when screen sizes were fairly consistent (i.e. desktop computers) it transitioned over to apply to content that was visible when the page first loaded, before users started to scroll the page. 

The example below shows the difference between the Russell Investments site from 2004 and how much cleaner it is in 2014:

In the early days of web design when screen sizes were fairly consistent (i.e. desktop computers) it transitioned over to apply to content that was visible when the page first loaded, before users started to scroll the page. 

The example below shows the difference between the Russell Investments site from 2004 and how much cleaner it is in 2014:

Comparison of a website in 2004 when all content is crammed together, and the same website in 2014 when it is much cleaner and more focussed

                                             

 

 

 

 

Image from http://blog.kurtosys.com/

 

Why is it different now?

The idea of ‘the fold’ is out of date with how we access the internet these days.

Birdseye view of people using their laptops and devices at a table

Following the launch of the first iPhone back in 2007, the number of devices and screen sizes we use to access the internet has grown massively. These days it’s quite possible that the same person has access to multiple devices - for example, a desktop at work, laptop at home, along with a mobile phone and possibly a tablet as well.

This presents us with lots of different screen sizes to cater to - from a big desktop screen to a short wide netbook laptop screen to a tall thin mobile phone.

I am the fold is a great way to see this visually - it shows the different screen sizes from a random sampling of past visitors to show how many variations there can be.

9317-iamthefold.png

 So how can I make sure my users see my message?

Scary as it may seem, the internet has now been around for over 25 years. In the 90s people may not have been as familiar with scrolling down a page to see the content but now we have a whole generation of people who know nothing else and scrolling is a very natural action.

As a result, there is no longer the need to try and squeeze everything right at the top of your website. In fact, this can have a negative effect as scrolling has been shown to make content easier to scan and read.

Encourage people to scroll the page

We can help by using the design to capture users’ interest then lead their eyes down the page to see the rest of the content. Less content above ‘the fold’ can actually help with this, as it encourages users to explore the page more. Try and avoid design elements that might make it look like the page is finished and instead hint at further content being available.

The Life Below 600px website is a great example of how this can be done, have a look for yourself.

Screengrab of the website 'Life below the fold'

Focus your call to actions

It is better to have a single clear call to action than users not being able to see any because they’re all shouting over each other. It is worth getting to know your users and identifying what their goals are, then designing your site around this. You can’t please all the people all the time, so focus on the majority audience and make sure you get it right for them (the ‘80-20 rule’).

Provide the call to action where the user is ready to take it

It may be the case that your user wants to take in the content on the page first before acting on it.

We should offer them the call to action they need, when they need it - rather than shouting it at them as soon as they get there or making them hunt around for it later on. For example, we can’t expect people to sign up to a subscription without first reading about the service and why it’s right for them.

On longer pages it can also be worth repeating the call to action more than once, perhaps with a less prominent link at the top for users who might be coming back having already read the information, and a more prominent call to action further down the page.

Sketch showing how it can be worth repeating a prominent call to action at the bottom of the content

                                              Image from https://www.goodui.org/#5

Focus on user experience

As ever when we’re designing sites, we need to remember to focus on our users and what their objectives are, rather than what we may want to push at them. Understanding our users is vital and will lead to more effective websites with higher conversion rates.

Further reading:

If you are interested in learning more about the research I’ve mentioned, why not have a look at these links:

 

Images courtesy of Shutterstock unless otherwise stated 

Comments:

Line of 4 young people sitting on a pavement kerb all using different mobile devices

What is Website A/B Testing?

We take a look at different website areas that can be tested & highlight some successful examples

6 Minutes

Girl standing in a field wearing winter coat and wooly hat with her back to the camera and arms widespread

Should we remove sharing buttons?

Why you should consider removing sharing buttons

4 Minutes

pile of colourful CDs

What does IA mean?

Understand what IA (Information Architecture) is and the value it brings to a digital project

5 Minutes

Interested?

If you think we might be a good fit for your business, fill out the form at the link below and we'll send you our agency playbook. It contains lots more information about us and what we're like to work with.

Send me the playbook