Above the fold

Above the fold is the immediately visible area of a website without scrolling. It should load quickly, be well-organized, and prioritize content over advertising – important for users and SEO.

The changes in user behavior, brought about by increased surfing with smartphones and tablets, are also causing web designers, website operators, and search engine optimizers to rethink. Specifically, in this context, the area "Above the fold" is relevant for web design. What does this mean for page design? And why is this so important for visitors?

Origin in the print media

Originally, the term "Above the fold" comes from printing and referred to the so-called fold line. It means the line that forms when a newspaper is folded. In relation to web design, the term describes the visible area of a webpage that is visible to the user after loading, without them having to scroll.

Associated areas of a page in this context would be:

Header and brand logo
Upper primary navigation
Layout structure
body-Specification in CSS
Navigation menus
The H1 headline
Article preview

These areas in an HTML document each have CSS specifications that are important for the page loading. They determine the appearance of the HTML objects. With Critical CSS, the loading speed of the objects can be reduced. Low loading times are ranking factors on Google and other search engines. This should be considered in every design.

Overloaded website – a common problem

Because internet users—in the past, at least—were quite lazy in their web-scrolling behavior, many website operators made efforts to make the most important information visible above the fold. In theory, this was certainly a good approach to provide users with the necessary information immediately upon visit and to set an anchor point for further content. The opposite, below the fold, accordingly includes the content that is located below this digital fold line, meaning it is only accessible by scrolling.

In practice, however, the above-the-fold pages looked very cluttered. The visitor was literally overwhelmed by a flood of information. The above-the-fold area was no less intrusive and unattractive when ad banners were placed instead of content. Sometimes online advertising was really intrusive.

Nowadays, internet users are accustomed to scrolling on websites to find additional content. This is because they have to do it anyway due to the narrow displays of smartphones and tablets to access the desired information. Therefore, "above the fold" doesn't need to be so crammed and shouldn't be overdone. Quite the opposite: an enormous amount of information, notices, and advertising banners in a single area of the website can indeed deter the user because our brain prefers clearly structured information. This is also no longer in line with effective SEO measures. Therefore, a rethink in web design is called for in this regard.

Design Above the fold – how does the area affect SEO?

Since 2012, the search engine Google has been increasingly addressing the area above the fold. In January 2012, with the Page Layout Algorithm Update, an algorithm update was rolled out to evaluate the ratio of content to ads in the immediately visible area of a webpage. Matt Cutts, who was the head of Google's web spam team at the time, reported the following about this change: "Pages that don't offer much content 'above the fold' may be affected by the changes. If you click on a webpage and the part you see first either doesn't offer much content or is specifically dedicated to ads, that's not very user-friendly. Such pages are likely not to rank as high in the future."

Since the user-friendliness of an online page plays an important role for Google, above-the-fold content is part of search engine optimization. However, search engine-friendly web design is important. According to Google guidelines, this means placing ads and content intelligently without overwhelming the user.

What does the ideal solution look like – for users and SEO?

While Google, which is instrumental for SEO, appreciates when the top part of a page is clear, this section claims almost 80% of user attention. So how do you achieve a good mix of search engine optimization, user-friendliness, and information placement? A good website, not just from an SEO perspective, should cleverly utilize the above the fold area. The motto is: don't clutter it and simultaneously creatively entice users to continue scrolling.

Above the fold and below the fold in interaction on the page

In general, it can be said: Both the content visible above the imaginary fold line on a website and the content below it are very important for online marketing and SEO. For above the fold, the web design should be created in a way that stimulates interest in more. It requires a specific content point that catches the visitor and encourages scrolling. It is useful to present the USP in the visible part of the website and make it clear what it is generally about. With staggered columns and tables, scroll prompts can be set— for example, in the form of a text deliberately interrupted by the separating line. When designing a pillar page, a sidebar can be the element that piques interest. The subsequent content below the fold then has the task of retaining the page visitor and increasing the dwell time. High-quality web content can also help increase the click-through rate and direct the user to subpages.

Important in web design above the fold

In every web design, formatting naturally needs to be considered. A webpage and its elements are displayed differently on various displays with different sizes. This results in folds appearing in different positions on a page. Key factors in design include screen resolution and page magnification, which can vary from user to user and thus must be taken into consideration.

And what about the call-to-action?

Whether the CTA on a page should be placed above the fold is a topic of debate among online marketing specialists. It naturally depends on the context. Potential customers who are not yet familiar with a product should be called to action only at the end, after they have been thoroughly informed. It is different, for example, for very complex products in the B2B sector, where visitors are already well-versed in the subject matter. Here, it may be sensible to place a call-to-action at the top — for instance, to download important whitepapers that contain in-depth information. A link to a webinar would also be conceivable.