Above the Fold

Was bedeutet "Above the Fold"?

Above the Fold bezeichnet im Webdesign den Bereich einer Webseite, den Besucher sofort sehen, ohne scrollen zu müssen. Es ist gewissermaßen das digitale Schaufenster einer Seite – die Inhalte, die auf den ersten Blick ins Auge fallen. In diesem oben sichtbaren Abschnitt werden idealerweise die wichtigsten Informationen platziert, um Nutzer zum Verbleib auf der Seite zu motivieren.

Ursprung und Bedeutung im Webdesign

In der klassischen Zeitungswelt bezeichnete “above the fold” den Teil der Titelseite oberhalb des Falzes – also die obere Zeitungshälfte, die ohne Umblättern sichtbar war. Dieser sichtbare Bereich zeigte die wichtigsten Schlagzeilen und Fotos, um Leser zum Kauf der Zeitung zu bewegen. Heute verwendet man den Begriff vor allem im Webdesign und der User Experience (UX) für den direkt sichtbaren Bereich einer Website ohne Scrollen.

Allerdings ist „der Fold“ im Webdesign kein fest definierter Pixelwert. Je nach Bildschirmgröße und Gerät (Desktop, Tablet, Smartphone) sehen Nutzer unterschiedlich viel Inhalt, bevor sie scrollen. Es gibt also keinen einheitlichen Pixelpunkt, ab dem below the fold beginnt. Daher sollte man wichtige Inhalte möglichst weit oben platzieren – aber ohne sich auf eine starre Höhe festzulegen.

Warum ist Above the Fold wichtig für UX und SEO?

Nutzer schenken dem oberen Seitenbereich besonders viel Aufmerksamkeit. Studien zeigen, dass etwa 57 % der Betrachtungszeit auf Inhalte oberhalb des Seitenabbruchs entfallen. Viele Besucher scrollen zwar weiter nach unten, dennoch nimmt die Aufmerksamkeit mit jeder weiteren Bildschirmlänge deutlich ab. Ein ansprechend gestalteter Above-the-Fold-Bereich kann daher sofort Interesse wecken und dazu beitragen, dass Nutzer länger auf der Seite bleiben.

Befinden sich relevante Informationen und klare Botschaften sofort oben, springen weniger Besucher direkt wieder ab – die Absprungrate sinkt entsprechend. Umgekehrt kann ein überfrachteter oder inhaltsleerer erster Bildschirm dazu führen, dass Nutzer die Seite frustriert verlassen. Auch für Conversions (z. B. Anfragen oder Käufe) spielt der Above-the-Fold-Bereich eine große Rolle. Ein gut platzierter Call-to-Action-Button im sichtbaren oberen Bereich erhöht die Chance, dass Besucher die gewünschte Aktion ausführen. Gerade auf einer Landing Page wird deshalb häufig das zentrale Angebot samt CTA direkt ganz oben präsentiert.

Auch aus Sicht der Suchmaschinenoptimierung (SEO) ist der sichtbare Seitenbereich bedeutsam. Google bewertet es positiv, wenn Nutzer sofort nützlichen Inhalt oben auf der Seite sehen und nicht erst an Werbebannern vorbei scrollen müssen. Im Jahr 2012 führte Google ein sogenanntes Page-Layout-Update ein, das Websites mit übermäßig viel Werbung oberhalb des Seiteninhalts im Ranking abwertet. Zu viel Reklame oben stört laut Google das Nutzererlebnis und wird daher negativ beurteilt. Webseiten sollten also ein ausgewogenes Verhältnis zwischen Content und Anzeigen halten – besonders im zuerst sichtbaren Bereich.

Best Practices und Beispiele

• Kernbotschaft zuerst: Besucher sollten sofort erkennen, worum es auf der Seite geht. Die wichtigste Überschrift (Unique Value Proposition oder Angebots-Titel) gehört gut sichtbar nach ganz oben. Google selbst rät, im oberen Bereich einer Seite einzigartigen Inhalt zu zeigen statt rein generischer Banner.
• Klare Handlungsaufforderung (CTA): Falls Ihre Seite ein Hauptziel hat (Verkauf, Anmeldung etc.), platzieren Sie einen deutlich sichtbaren Button oder Link oberhalb des Folds. Eine effektive Landing Page zeigt zum Beispiel ihr zentrales Angebot samt “Jetzt kaufen”-Button direkt im ersten Sichtbereich – so können Besucher sofort agieren, ohne scrollen zu müssen.
• Übersichtliches Design: Vermeiden Sie es, den oberen Bereich mit zu vielen Elementen zu überladen. Weniger ist mehr: Ein aufgeräumtes Layout mit ausreichend Weißraum lenkt den Fokus auf die Hauptbotschaft. Besucher sollen auf einen Blick verstehen, was Sie anbieten – ohne von Ablenkungen erschlagen zu werden.
• Scroll-Anreize setzen: Machen Sie deutlich, dass unterhalb des sichtbaren Bereichs noch mehr Inhalte folgen. Zum Beispiel kann ein nach unten zeigender Pfeil oder ein Hinweis wie „Mehr erfahren …“ am unteren Rand des Viewports zum Scrollen animieren. Auch ein halb angeschnittener Abschnitt (ein Bild oder Text, der unten nur teilweise sichtbar ist) signalisiert dem Nutzer, dass es weitergeht.
• Performance & Responsive Design: Der Above-the-Fold-Inhalt sollte schnell laden, da Besucher ungeduldig sind. Optimieren Sie Bilder und Skripte, damit der obere Seitenbereich zügig erscheint. Zudem muss das Layout auf verschiedenen Geräten funktionieren – was auf dem Desktop sofort sichtbar ist, sollte auch auf dem Smartphone möglichst oben stehen (Stichwort Responsive Design).

Häufige Missverständnisse

• „Nutzer scrollen nicht“ – Doch, das tun sie. In der Frühzeit des Webs wurde wenig gescrollt, aber heute sind die meisten Nutzer daran gewöhnt. Entscheidend ist: Es wird vor allem dann weitergescrollt, wenn das, was oben sichtbar ist, neugierig macht. Above the Fold dient also als Teaser – ist der erste Eindruck vielversprechend, scrollen die Besucher in der Regel weiter.
• „Above the Fold hat eine feste Pixel-Höhe“ – Nein. Der sichtbare Bereich variiert je nach Endgerät und Auflösung. Es gibt kein universelles „Fold“-Maß (etwa 600 px). Daher sollten Seiten flexibel gestaltet sein. Wichtig ist, dass die Schlüsselinhalte auf jedem Gerät weit oben stehen (dynamische Anpassung durch Responsive Design).
• „Alles Wichtige muss oben rein“ – Nicht unbedingt. Es ist zwar sinnvoll, die Kernaussage prominent above the fold zu platzieren, aber man sollte nicht versuchen, den gesamten Inhalt in den ersten Bildschirm zu quetschen. Nutzer scrollen durchaus für weiterführende Details, sofern das, was sie oben sehen, ihr Interesse weckt. Ein überladener First Screen kann Besucher dagegen überfordern – Priorisierung der Inhalte ist hier der Schlüssel.