Above the Fold
Autor: Timm Schaffner | Lesezeit: 3 min | zuletzt aktualisiert: 03.10.2022, 15:33
Du weißt nicht, was Above the Fold bedeutet und möchtest mehr darüber erfahren? Wir erklären dir alles dazu!
Im Folgenden erfährst du, was es mit Above the Fold auf sich hat. Gleichzeitig erhältst du Tipps, wie du dein Design entsprechend anpasst, um die Aufmerksamkeit deiner Besucher:innen zu steigern.
Bedeutung & Definition: Was ist Above the Fold?
Der Begriff „Above the Fold“ war bereits vor dem Internetzeitalter bekannt und kommt ursprünglich aus dem Druckereiwesen. Dabei geht es speziell um Zeitungen, die in der Mitte gefaltet sind und beispielsweise an einem Kioskstand ausliegen.
Interessent:innen, die sich dem Verkaufsstand nähern, sehen somit also nur den oberen Teil der Knicklinie (fold). Redakteur:innen sind somit stets darum bemüht, die wichtigsten Inhalte der Zeitung immer Above the Fold zu präsentieren, um die Aufmerksamkeit auf sich zu ziehen und potenzielle Kund:innen anzulocken.
Ähnlich funktioniert es bei Websites: Öffnen Besucher:innen eine Internetseite, sehen sie anfangs nur den oberen Teil. Bei dem sichtbaren Bereich ist ebenfalls vom Above the Fold die Rede. Je nach Gerät und Auflösung fällt der sichtbare Inhalt unterschiedlich aus, weshalb Websitebetreiber:innen Above the Fold unbedingt berücksichtigen sollten.
Der sichtbare Bereich: Warum ist Above the Fold so wichtig?
Fakt ist, dass Inhalte, die sich Above the Fold befinden, fast 80% Aufmerksamkeit der Nutzer:innen auf sich ziehen. Das ist selbst dann der Fall, wenn sie wissen, dass sie durch ein schnelles Scrollen direkt nach unten gelangen.
Aus diesem Grund solltest du die Aufmerksamkeit deiner Websitebesucher:innen direkt am Anfang wecken, um sie zu halten und zum Weiterscrollen zu animieren.
Und wie funktioniert das? Indem du in dem Above the Fold Bereich Inhalte präsentierst, die wirklich wichtig und relevant sind. Zeige deinen Usern, was sie hier finden und verzichte beispielsweise direkt am Anfang auf einen Werbebanner.
Dabei hast du die folgenden Möglichkeiten:
- Hinweis: Mache deine Nutzer:innen auf weitere Informationen aufmerksam, indem du darauf hinweist. Weise sie beispielsweise darauf hin, was sie erwartet, wenn sie weiter nach unten scrollen.
- Wegweiser: Integriere eine Art Wegweiser, der Besucher:innen an die Hand nimmt und dazu animiert, dem Weg zu folgen. Wie du siehst, ist bereits während der Planung auch die Gestaltung des Designs wichtig.
- Verschiedene Spalten: Bringe Content in verschiedenen Spalten unter, die unterschiedlich angeordnet sind. Beim Öffnen der Website fällt dadurch direkt auf, das weiter unten noch mehr Inhalt wartet.
Tipp: Im Internet findest du weitere passende Beispiele, wie du Above the Fold sinnvoll anwendest und berücksichtigst. Hole dir hier gerne einige Inspirationen ein.
Auch Suchmaschinen wie Google achten auf die Inhalte einer Website. Im schlimmsten Falle kann es zu Abstrafungen und Rankingverlusten kommen, weil beispielsweise zu viel Werbung verbaut ist (Stichwort Google Page Layout Algorithm Update).
Passe Above the Fold auch deinem responsive Design an
Websitebesucher:innen sind heutzutage mit verschiedenen Geräten wie Laptops, Desktop-PCs, Smartphones und Tablets unterwegs.
Dementsprechend fällt die Größe der Bildschirme unterschiedlich aus, weshalb Websites durch responsive Designs anders dargestellt werden.
Teste deine Website und Inhalte mit verschiedenen Geräten und Tools. Somit überprüfst du, ob alle wichtigen Inhalte Above the Fold zu sehen sind.
Fazit zu Above the Fold
Achte beim Design deiner Website darauf, dass die Inhalte Above the Fold Aufmerksamkeit erwecken. Sie sind der Schlüssel dafür, dass deine Nutzer:innen nach unten scrollen, um weitere Inhalte zu betrachten.
Gleichzeitig solltest du berücksichtigen, dass die Inhalte aufgrund verschiedener Bildschirmgrößen unterschiedlich dargestellt werden. Überprüfe also im Zuge von Above the Fold, ob auch wirklich alle relevanten Inhalte ganz oben erscheinen. Das gilt für sowohl Smartphones und Tablets als auch Computer und Laptops.