abive fold article banner

Above or below the fold?

by Nick Mackay

27 June 2017

Think of the last time you had some important content to publish online – where did you end up placing it? Did you think about where it would sit best in the overall design of the page? Or did you just stick it all right up the top to make sure everyone who visits the page would see it?

In the past, there was a general agreement that the second approach was the smartest. But as knowledge around user behaviour has increased, and as mobile devices have had more and more of an influence on design, this is not the case anymore. But it’s an idea that won’t seem to go away, and in a lot of cases can have a negative effect on how websites are designed.

What is above the fold?

Above or below the fold“Above the fold” is an old term that comes from newspaper publishing. Above the fold referred to the top half of the front page - this is where the most attention-grabbing news would appear because anything below the fold would be invisible when sitting on a newsstand. For a web page, above the fold refers to the area of the page that is visible on initial page load, without the user having to scroll.

Back before responsive design was the standard, when most people had similar sized desktop screens, it was a lot easier to identify where exactly the fold would appear on the screen. For a number of years, 600 pixels was generally agreed to be where the website “fold” would sit. Now websites are viewed on a massive range of screens, and properly designed websites change or “respond” to best fit the size of the screen. So it’s actually impossible to know exactly where the fold sits for every user.

To give you some idea of the range in where the fold can sit, in the past year the Spark Green website was viewed at over 100 different browser heights, ranging from 320 pixels to 1610 pixels.

But even though we don’t know exactly where the fold is, should we still stick the important stuff at the top? Not necessarily, and this is an area where mobile devices have again had a big influence.

Mobile scrolling

Mobile devices are generally viewed in portrait mode, at a screen width much less than that of a desktop screen. This means that elements that may all fit above the fold on desktop will need to be stacked on top of each other when the design responds to a mobile screen, forcing the user to scroll to view all of the content.

Infinite scroll

Use of “infinite scroll” functionality in hugely popular apps like Facebook, Twitter and Instagram have further reinforced mobile user’s expectations of needing to scroll. Their feeds endlessly refresh as users scroll down, adding content dynamically to the bottom of the page. Given the amount of time we spend on these apps it’s no surprise that scrolling has become second nature for most people!

Mobile first design

With so many people now viewing the web on mobile devices, many sites are now built with a “mobile first design” approach – giving preference to a site’s useability on mobile rather than how it appears on desktop. Web designers have taken advantage of users’ willingness to scroll, placing long streams of content on a single page.

Scrolling on desktop

Smart and creative web design can capitalise on this and create a better desktop experience. Freed from the constraints of needing to fit everything onto a desktop-shaped rectangle, website designs can now go so much further, trusting that the user will scroll to view more than what is visible on page load.

Check out some of these innovative websites that have used a scroll based design to create immersive and engaging experiences on desktop.

So how should web design take advantage of scrolling?

Regardless of design and user evolution, important content should always be easy to find.

When creating a page with a lot of content, it’s important it’s designed in a way that entices the user to scroll, and makes clear that there is meaningful content below the fold.

As long as it’s made obvious that the site continues below the bottom of the screen, you can trust that the user will scroll. There are a variety of ways to do this, and doing so allows you to include more important content and spend more time expanding on why it’s important, as well as providing a better UX.

the #1 digital agency for finance

Contact us

You must tick the checkbox to continue

Unfortunately, something has gone wrong and your enquiry can't be submitted at this time. Please contact us on 03 9696 9711 for help.

* Whoops! Did you forget to fill a field in correctly?

Thanks for contacting us

We'll be in touch shortly.

Also, thanks for subscribing to our digi-bytes quarterly newsletter.

×

SUBSCRIBE TO DIGI-BYTES

digi-bytes is Spark Green's quarterly email newsletter. A collection of interesting and topical articles from our blog, the web and beyond.

Sign-up to our mailing list by filling in your details below.

* Whoops! Did you forget to fill a field in correctly?

Thank you

Thank you for subscribing to our digi-bytes quarterly newsletter.

×