Sep 21, 2020

Website Scroll for Desktops: Above the fold or below

Ever see what’s under the fold?

The question going through your mind right now would surely be “What in the world?”

Let’s make this simpler! We’re talking about websites!

Desktops and mobile screens are made keeping a particular dimension in mind. Everything a user sees on a webpage without having to scroll is known as “above the fold” The minute scrolling comes in, that bit of information is known as “below the fold”

So, where did this even start?

To answer this, we have to go back to the days of print media where a rule of sorts was formed. Eye-catching material was put on the front page as it would pique the interest of the passerby. It worked wonders for papers! So when the tech advancements came around, the same principle was applied to websites.

However, there was a slight problem.

The dimensions of a digital page were 1024×768 pixels. But when you take away the space taken up by taskbars only 600 pixels remain. This meant having to cram all the important information in that tiny space which led to messy, cluttered, and difficult web pages for users. However, today 1366×768 screens are preferred. Check out what statcounter has to say about popular screen dimensions below:

Below, are examples of an old coca-cola and an apple website that put all of their information above the fold.

Click here to check out “Internet Explorer’s 1996 World Exposition” which has a catalog of old website designs!

See, the problem here?

Thus, came in long scrolling or infinite scrolling websites!

These websites have the information that extends beyond the conventional one-pager! Users do not have to navigate to different pages unless they want to. Everything they may need is available for them just by scrolling!

Check out the revamped Apple website below!

Why is this relevant?

Let’s say, you are planning to get a website developed but you don’t know if short scroll or long scroll is the way to go! So, you set out to do some recon and go through multiple websites imagining yourself as a potential buyer and come across two types:

Short scroll website

Long scroll website:

As a customer, which of the above examples is more appealing based on usability, visual ease, and simplistic navigation?

We’re betting our money on the long scroll! And rightly so, a lot of people would agree with you!

People’s perceptions

According to SWEOR, it takes about 50 milliseconds for users to form an opinion about a website and decide on whether they like it enough to stay. According to Jennifer Krynin in “ How Long Should Your Web Page Be?” multi-page websites see a drop off of around 50% for every page after the first one. In other words, if 100 people hit the first page, 50 make it to the second page, 25 to the third, and 10 to the fourth, and so on. But does this mean every website needs a long scroll and is a sure shot winner with it?

Absolutely not! In the digital world, success is directly attributed to the ease you offer your users! Clicking on an element or purchasing is still a long way to go! If what you’re saying intrigues the user, they’re likely to stay and ultimately purchase! So it depends a lot on the type of audience, the quality of the content, and the usability of your long scroll.

So, how long should a long scroll website be?

You can play in the short or the long page league but it ultimately depends on the type of audience your brand is targeting. Check out Neil Patel’s article on “Follow These Long-Form Content Examples to Boost Your Rankings” for your website!

The “less is more” approach to a short page length, requires careful consideration. Research suggests that long-form content, on average, earns more engagement, higher rankings, and more shares but if you have a single CTA, simpler may be better. In an attempt to fit everything on one page, the users may reach the footer but that does not mean your website is brilliant. By cramming too much into a small space, you’re only making it harder for users to digest your content.

However, the long game league is not for everyone. Check out the statistics on Long Scroll Website in an article by Nielsen Norman Group in their article Scrolling and Attention:

According to Nick Babich, in “Just Keep Scrolling! How To Design Lengthy, Lengthy Pages” it is appropriate in the following circumstances:

For storytelling to create a linear structure that can be leveraged
For continuous and lengthy content, such as a long article or a multi-step tutorial to provide a better UX
When the content cannot be divided into separate parts and should be presented as a whole such as an infographic
To highlight the features, qualities, or attributes of a product in a story.

So, what are the pros of long scrolling websites?

Quick Information Access

Having relevant information on one long page ensures visitors easy access to what they need without multiple clicks.

Draw customer attention with your story

It’s easy to create engagement in a brand's story with a creative, seamless design and dynamic content like imagery with a clear beginning, middle, and end.

Can be optimized for mobiles

With 72% of users searching via a mobile device, it makes sense to use a format that is easy for mobile users however this depends on the percentage of mobile usage in your target audience.

So, what are the cons of long scrolling websites?

Loss of important content

The abundance of information on a long scroll can sometimes be confusing to users. Important items can get lost as users scroll up and down to find what they need.

Slow website speed

With a scrolling webpage, images help to create white space for elements to stand out. However, too many images and animations can reduce your loading time leading to users bouncing off your website.

Damage to SEO

With one page website, combining multiple pages with multiple terms reduces your chances of attracting SEO. Check out “Optimizing a single page: One-page website SEO” by Yoast SEO for everyone

By that context, ecommerce websites should all be long-form, isn’t it?

Wrong.

Strangely as it is, these websites need to be a mix of long-form with multiple pages as they are task and goal-oriented sites. Here,the users want to see definite progress and have a sense of accomplishment after the completion of the purchase. Some websites like Etsy even saw a drop in CTAs when they shifted to an entirely long-form scroll.

A few ways to implement long scroll on ecommerce websites is by:

Using a “View All” option for product pages. This gives the user the option to view the site in an infinite scroll format if they choose to do so while preserving the shorter results pages for users who prefer that format.
Using pagination to help users view the information in chronological order and slow them down to increase consumption.

So, what do you keep in mind while designing long scroll websites:

According to Jennifer Krynin, if you have a long web page, avoid scroll blockers. These are visual elements of your web page that imply the content is over. These include elements like:

Horizontal lines
Lines of text links
Short, wide graphics (especially ones that are around 468x60—a standard ad unit size)
Navigation icons or social media links

Anything that acts as a horizontal line across the entire width of the content area can act as a scrolling block, including images or multimedia.

As we work in tech for many years and have extensive knowledge of what works and what doesn't, there are a few tips we would like to share with you when it comes to long scroll websites:

Tip 1:

Having a long scroll website is great but if you feel the length is a little too much, you can always have the top header anchored to various sections of the website. This ensures that a user does not have to go through all the information to find their required meat. They can simply click on what they need on the menu and the tech would automatically take them there.

Tip 2:

Website enablers often boast of mobile optimization but they do not often completely customize the view, Often desktop elements are broken into a double-section on mobile view. These increases scroll time so bring in your best coding game to make your webpage mobile friendly!

Tip 3:

Web successes are based entirely on UX and at the end of the day, there will always be users who do not like a long scroll. Do not let this % hamper the experience for others who genuinely enjoy scrolling.

Conclusion:

At the end of the day, it all depends on the target audience and the type of service you are offering. Some websites and influencers advocate for long scrolls and the same goes for a short scroll but the best person to decide what works and what doesn’t is your audience.

In a research study by Therese Fessenden, on Scrolling and Attention, it was seen that 57% of the 120 participants spent their page-viewing time above the fold and 74% spent it in the first two screenfuls. This is in direct contrast to their previous study, where it was observed that 80% of the viewing time was made up of fixations above the fold.

So, the choice, between the long scroll and short scroll, is yours.

This article was exclusively for scrolls for desktops. Hold tight as our next blog is on scrolls for mobile views!

References:

https://www.lifewire.com/web-page-length-3468959#:~:text=Conventional%20wisdom%20says%20that%20you,first%20screen%E2%80%94below%20the%20fold.

https://www.smashingmagazine.com/2017/05/long-scrolling/

https://www.toptal.com/designers/ui/long-scroll-websites

https://usersnap.com/blog/long-scrolling-websites-tips-best-practices/

https://www.forumone.com/ideas/how-long-should-your-web-page-be/

https://blog.c-c.com.au/how-far-will-people-scroll-down-a-web-page

https://www.clearsite.nl/kennisbank/from-above-the-fold-to-before-the-scroll

http://www.logaholic.com/website-engagement/

https://www.justinmind.com/blog/10-90s-websites-designs-you-wont-believe-existed/