Was haben analoge Tageszeitungen und digitale Homepages gemeinsam? Zeitungen dienten den ersten Webseiten vor allem in den Anfängen des Internets als Inspiration. Viele Begriffe sind daher aus der Print- in die Digitalbranche gewandert. Eine dieser Bezeichnungen ist „above the fold“. Was es damit auf sich hat, erfahren Sie hier.

→ 13 praktische Vorlagen für jede erdenkliche Situation in Vertriebsgesprächen [Kosenloser Download]

Wo liegt der Unterschied zu „below the fold“?

Alle Informationen, die nicht im direkt sichtbaren Bereich der Webseite liegen, fallen unter die Kategorie „below the fold“. Der Begriff bedeutet frei übersetzt „unterhalb des Knicks“ und steht für das genaue Gegenteil von „above the fold“.

Bevor Smartphones zur ersten Option bei der Nutzung von Webseiten wurden, haben Nutzer und Nutzerinnen Homepages vor allem über Desktop-PCs aufgerufen. Die Optimierung der Inhalte auf den sichtbaren Bereich war verhältnismäßig einfach. Die Größe dieses Bereichs auf einem durchschnittlichen Monitor beträgt in etwa 1024 x 786 Pixel. Alle Informationen unterhalb dieses Bereichs liegen „below the fold“ und damit außerhalb des Sichtbarkeitsbereichs ohne Scrollen.

Die Wahrnehmung der Wichtigkeit dieses Bereichs hat sich jedoch verändert. Expertinnen und Experten beschäftigen sich im Hinblick auf die Suchmaschinenoptimierung damit, ob „above the fold“ in Zeiten von Smartphones überhaupt noch notwendig ist.

Die folgende Grafik zeigt den Unterschied zwischen „above the fold” und „below the fold” deutlich:

Grafik Unterschied Above The Fold und Below The Fold

Wie lässt sich im „above the fold“ Bereich das Nutzerverhalten steuern?

Grundsätzlich muss der obere Bereich die folgenden Informationen bieten, damit Nutzer und Nutzerinnen weiter scrollen:

Er muss zeigen, dass die Besucher und Besucherinnen der Webseite genau das finden, was sie suchen. Gleichzeitig muss er veranschaulichen, was Sie als Anbieter oder Anbieterin zu bieten haben und dass Sie vertrauenswürdig sind. Je professioneller, transparenter und seriöser Ihr „above the fold“ Bereich gestaltet ist, desto eher sind Ihre Webseitenbesucher und -besucherinnen bereit, sich länger aufzuhalten und sich auch den Rest der Seite anzusehen.

Gehört der Call-to-Action in den „above the fold“ Bereich?

Mit einem Call-to-Action (CTA) wollen Sie eine Handlung bei Ihren Nutzern und Nutzerinnen auslösen. Für überzeugte Besucher und Besucherinnen ist er sinnvoll, bei unsicheren Besuchern und Besucherinnen ist hingegen Vorsicht geboten.

Ob Sie einen Call-to-Action „above the fold“ einsetzen sollten, hängt somit davon ab, an welcher Stelle der Customer Journey sich Ihre potenziellen Kunden und Kundinnen befinden. Sind diese von Ihren Leistungen überzeugt und haben schon eine Kaufentscheidung getroffen, wird diese durch einen CTA unterstützt.

Unsichere Kunden und Kundinnen, die das Produkt zwar kennen, aber noch keine Kaufentscheidung getroffen haben, suchen zunächst einige Sachinformationen. Wenn Sie diese im „above the fold“ Bereich bieten, können Sie anschließend einen CTA anfügen.

Unsichere Kunden und Kundinnen, die Ihre Services noch nicht kennen, könnten sich von einem Call-to-Action abgestoßen fühlen. Hier sollten Sie sich im „above the fold“ Bereich auf reine Sachinformationen beschränken.

„above the fold“ bei mobilen Geräten

Wer mit seiner Webseite vor allem eine junge Zielgruppe anspricht, sollte sich mit deren Nutzer- und Nutzerinnenverhalten beschäftigen. Ein Ergebnis: Die Internetnutzung mit dem Smartphone liegt im Trend und deutlich vor der Nutzung eines klassischen Desktop-PCs.

Die Darstellung von Homepages auf dem Smartphone sollte daher dem Responsive Design entsprechen. Unterschiedliche Hersteller und Herstellerinnen, Bildschirmauflösungen und die Option, zwischen Hochkant- und Querformat zu wechseln, machen das nötig. Ein Nebeneffekt betrifft die Wichtigkeit von „above the fold“: Der sichtbare Bereich ist nicht auf jedem mobilen Endgerät gleich, die Bedeutung des ursprünglich so relevanten Begriffs schwindet also.

SEO und „above the fold“

„above the fold“ und „below the fold“ spielen im Content-Marketing eine große Rolle. Ihre Aufgabe besteht darin, Besucher und Besucherinnen Ihrer Webseite zu begeistern, damit diese möglichst lange auf Ihrer Webseite verweilen und gegebenenfalls Produkte und Dienstleistungen kaufen. Da Sie hierdurch die Verweildauer erhöhen und für eine hohe Relevanz bei Ihrer Zielgruppe sorgen, wirken sich diese Maßnahmen positiv auf Ihr Ranking bei den Suchmaschinen aus. „above the fold“ und „below the fold“ sind daher wichtige SEO- und Marketing-Komponenten.

Suchmaschinen wie Google ranken Homepages nach diversen Kriterien. Um diese bestmöglich zu erfüllen und damit in den Google SERPs möglichst weit oben zu landen, sollten Sie einige Punkte beachten. Auch im wortwörtlichen Bereich „above the fold“ gibt es Faustregeln.

Google veröffentlichte schon 2012 ein Update, das sich unmittelbar auf die Inhalte „above the fold“ bezieht. Übermäßig viel Werbung in diesem Bereich auf der Webseite wirkt sich seitdem negativ auf das Ranking aus. Gleichzeitig führt eine Überfrachtung zu einer erhöhten Bounce Rate, die sich ebenfalls negativ auf die Suchmaschinenoptimierung auswirkt.

Wenn Ihre Besucher und Besucherinnen nicht auf einen Blick erkennen, was ihnen Ihr Webauftritt bietet, sondern von Werbebannern und Nebeninformationen überschüttet werden, wirkt sich das negativ auf die User Experience und somit die Conversion Rate aus. Das sollten Sie unbedingt vermeiden und mit einem ansprechenden Webdesign entgegenwirken.

Warum ist „above the fold“ wichtig?

Die einhellige Empfehlung diverser Expertinnen und Experten ist daher simpel: Im Bereich „above the fold“ sollten Webseitenbetreibende die wichtigsten Inhalte der Homepage darstellen. Zudem gibt es weitere Möglichkeiten, Leserinnen und Leser zum Verbleib auf der Homepage zu animieren:

  • Verlinkungen, sogenannte Anker, auf relevante Inhalte „below the fold“
  • Angeschnittene Inhalte, die zum Scrollen bewegen
  • Pfeile und Hinweise, die weiteren Content darunter ankündigen
  • Mehrere Spalten, die verschiedene Inhalte andeuten

Der auf den ersten Blick sichtbare Bereich einer Webseite ist wie ihre Visitenkarte. Das Interesse des Besuchenden muss geweckt werden. Um herauszufinden, wo Nutzerinnen und Nutzer scrollen, verweilen oder abspringen, gibt es diverse Tools, die Sie einbinden können.

„above the fold“: CSS und blockierte Ladezeiten

CSS ist eine Formatiersprache, die das Layout und das Aussehen von HTML-Objekten bestimmt. Das kann das Logo einer Webseite sein, ein Bild oder auch Designobjekte wie Pfeile oder andere Icons.

Das Laden aller Inhalte wird Rendern genannt. Je länger dieser Vorgang bei einer Webseite dauert, desto negativer wirkt sich das auf Ihr Suchmaschinenranking aus. Das bedeutet im Umkehrschluss: Je schneller vor allem der Bereich „above the fold“ lädt, desto besser für Userinnen und User, aber auch für das Ranking bei Google und allen anderen Suchmaschinen.

Um die Ladegeschwindigkeit zu optimieren, ohne relevante Inhalte auszusparen, gibt es einige Tricks. Über Critical CSS können Sie mithilfe verschiedener Tools und mit etwas Aufwand renderblockierende Inhalte – vor allem im unteren Bereich – entfernen. So ist sichergestellt, dass alle relevanten Inhalte „above the fold“ so schnell wie möglich laden.

Fazit: „above the fold“ ist immer noch relevant

Die Zeiten, in denen die Inhalte „above the fold“ ein immens wichtiges Kriterium für den Erfolg einer Webseite waren, sind vorbei. Smartphones und Endgeräte diverser Hersteller und Herstellerinnen, unterschiedliche Bildschirmgrößen und der Wechsel zwischen Hoch- und Querformat machen es schwieriger, den Bereich „above the fold“ exakt zu definieren. Dennoch nimmt dieser obere Teil einer Webseite eine zentrale Rolle in der Wirkung auf Userinnen und User ein. Die Optimierung des sichtbaren Bereichs ist daher nach wie vor ein Muss für jede Homepage betreibende Person.

New call-to-action

 New call-to-action

Titelbild: oatawa / iStock / Getty Images Plus

Ursprünglich veröffentlicht am Aug 8, 2023 2:00:00 AM, aktualisiert am August 08 2023

Themen:

Webdesign