Clearsite Kennisbank

From ‘Above the Fold’ to ‘Before the Scroll’

Optimalisatie

The rule that all relevant content from your website must be visible above a certain line in your screen is questioned for a long time now. Will this doubt continue or can we expect a comeback?

A long time ago..

When there was no internet and papers ruled, an important rule was born. The most appealing news should be placed on the front page of the paper. Above the fold to be exact. The reason for this was that such news would make a passerby interested in more good news, ultimately leading him into buying the paper. The content above the fold had done its work.

The border of the digital fold

It worked for papers. So good, that the principle of above the fold was passed on to websites. The digital fold was considered the fixed area of the screen before a user scrolled down. The question how big this area should be was not hard to answer in the early days of the internet.

In 2000 only 4% of the users had a screen with a resolution higher than 1024×768 pixels. This percentage grew with the years, but it took until 2009 before the 50% margin was passed. It isn’t remarkable that the border of the digital fold was based on 1024×768 pixels. When you take away the space that the taskbars of a browser occupy, 600 pixels remain. The border of the digital fold.

Above the fold in web design

When we look back on the past we can say that the purpose of ‘above the fold’ in webdesign was considered differently than it was for papers. With papers it was the purpose to get sucked into the rest of the content.

With websites however, it was advised to show all important information. This way it would be directly clear what your website had to offer. Product descriptions, sub-headings, call to action buttons, unique selling points and even forms found their way high up in the page.

In the early days of the internet, especially before the rise of smartphones and tables, this actually wasn’t such a bad thought. The internet was still a new kid on the block when compared to traditional software. In software programs like Word everything you needed was directly accessible from you screen without scrolling. Why should we do this differently on websites?

Can we still speak of a fold?

New web design trends made it harder to place all important information at the top of a page. Think of minimalistic design, the use of white space, big headlines and the popularity of full-screen headers and videos. All developments in the interest of more user friendliness, and less in the interest of placing as much as possible information in the top of your pages.

Also the rise of mobile devices have played a big role. In the beginning a lot of us didn’t care and served desktop versions of websites to mobile users. Soon we realized that this was not very user friendly. Users had to zoom constantly and page load times were nothing to write home about. After this came ‘responsive’ design. This made a page much more user friendly because elements were more often placed below each other instead of next to each other. The technology in this new mobile devices also weren’t suited for a fixed digital border anymore. For example the possibility to change your screen orientation by tilting your device.

Important information that is perfectly optimized for vertical screens disappears when going into horizontal mode.

Speaking about screens: what is a good resolution to base the fold on nowadays? A few years ago you could easily say that you should optimize for screens with 1024×768 pixels. Today 97% of the users have a screen which is larger than that. And don’t let me get started about how many resolutions this could be.

With so many variation in devices and screens you should question yourself where the fold should be and if there even is a fixed fold.

Why not unlimited freedom?

So should we ignore the ‘above the fold’ principle and place website elements just about anywhere we like?

Absolutely not. But we should look at it from a different angle.

Even if the border of the fold is not clear anymore nowadays, there will always be an upper part of the screen that everybody will see, no matter what resolution or device you are using. The developments mentioned above have caused that not all important information about your website can be placed in this upper part of your screen. But that doesn’t mean that you should not think about what you do place here. Brainstorming about this is becoming more and more important if you’d ask us. Especially if you want your website to be future-proof. Our opinion on this matter is closely related to the two following factors.

1. More choice between (quality) websites in combination with less patient visitors
The amount of websites keeps growing with every minute. You only got a few seconds to convince your visitors to stay on your website. 10 seconds to be exact. If your visitor is not satisfied within this time, than he has got a ton of other websites where he will be.

The behavior mentioned above is amplified when a visitor knows there are as good alternatives, maybe even beter, that are waiting for him when he hits the button to return to the search results. And don’t be suprised that this is exactly what Google is improving every year again. Today, you can be quite sure that all search results on the first page of Google are of excellent quality.

2. Being found based on your visitors behavior
One of the new ways that Google recently started using in the search for great websites is the user behavior on these websites. Two new ranking factors that derive from user behavior are closely related to the upper part of a website.

Firstly, there is the percentage of people that immediately return to the search results after visiting a website. This is called pogo-sticking. If this happens a lot, than this is a signal that your website might not be of such good quality and that is should get a lower place in the search results.

On the other hand, your website might get rewarded with a higher place in the results if users stay for a very long time on your website. This is called the dwell-time. Pogo-sticking and dwell-time can’t be directly influenced. You can’t decide what a visitor should or should not do. But you could influence a visitor indirectly through the upper part of your page. If you are able to give a very good first impression in the first seconds when a visitor lands on your website, than pogo-sticking should occur less and dwell-time should increase.

Before the Scroll

The two points mentioned above are reasons to pay extra attention to the part above the fold. Or rather the moment before a visitor scrolls the page, since there isn’t a real border for the fold anymore. Maybe the term “Before the Scroll” is better suited these days. So, how should you set up a page before the scroll and convince a visitor to stay on it and scroll on?

• The content before the scroll must be in line with the intentions of a visitor when he lands on your website. It should be clear immediately that he came to the right place. Make sure your trademark, headline and header picture / background are clear in sight and direct. Don’t use the same headline on more than one page. Also a good page title and URL help a visitor to understand if your website is the thing that he is looking for.

Be aware that you don’t go too far in making things clear. There is a risk of over doing it and confusing your visitor with too much information, resulting into him leaving your website. If you use paragraphs of text before the scroll than cut it into shorter paragraphs and use lists where possible. Throwing every important point you got to offer a visitor might have worked in an earlier era, it does not now.

Artcastle Tattoo Homepage
Artcastle Tattoo – Clearsite made sure that it’s immediately clear that this website is about a tattoo shop. Visitors know this thanks to the logo, headline, call to action button, page title and URL.

• The headline should not only align with the intensions of a visitor. It also should be catchy and challenge a user to read on. A good way to achieve this is not to talk about yourself. A visitor is mainly interested in what he gets from you, not you. So don’t use words as “We” or “Ours” in your headlines or words that you can place behind these, like “We are reliable“, or “Our service is top notch“, etc. These sentences are used so often that they work counterproductive.

Also don’t talk about the features of your product or service, but about the benefits that your users will experience thanks to these features. Be unique and write from the perspective of the user. Do you want to read more about good headline copy? Try these articles from Copyblogger and Quicksprout.

Trunk Club Headline Copy
Trunk Club – It is clear what this website is about and men are challenged to keep reading.

• The more time it takes to load you page, the less time there is to convince a visitor to stay at your website. Make sure that your website loads blazing fast. A score above 80 on Google Page Speed Insights is a good start!

• Being bombed with ads and pop-ups at the top of a page will most likely annoy a visitor and will give him a bad first experience with your website. It’s better to delay ads at this stage or not to use them at all. Visit Death to Bullshit and you can see what I mean when you turn on the bullshit button.

• Don’t forget a search bar at the top of your page. Just in case a visitor has the feeling that he is at the right place but at the wrong page. The search bar can be a quick way to satisfy his needs.

Verstegen Grijpers Zoekfunctie bovenin de pagina
Verstegen Grijpers – At Verstegen Grijpers we made sure that their visitors can search quickly for the grabs that they are interested in.

• Make sure that your users know that your website has more to offer after the scroll. You can achieve this by simply showing a down pointing arrow or by showing a small part of an element at the top of your page. The rest is visible after the user scrolls down. We’ve showed you that the top of a page can vary depending on your device and resolution. So think twice about the position of this element.

Bovenkant van de Clearsite homepage
Clearsite – On our homepage a visitor gets pulled down into our content. This way he can learn more about our services without being bombed with information when he enters our website.

When a visitor has decided to stay a while longer on your website, be sure that he made the right choice. Deliver good content that answers all the questions he could have and show him related articles that also might be important for him.

Are you still placing a lot of information at the top of your pages? Stop that. New trends and developments made this harder and not desirable. Think twice about which content should be placed there to satisfy your visitors and Google from the first second they land on your website. First impressions count, maybe now even more than ever. If you master the moment before the scroll than you’r on the right path to a bright future.