Above the Fold bezeichnet den Bereich einer Website, den Nutzer sofort sehen, ohne scrollen zu müssen. Dieser Bereich ist entscheidend für den ersten Eindruck, die Verweildauer und die Conversion-Rate einer Website.
Ursprung des Begriffs
Der Begriff stammt aus der Printmedien-Welt: Bei gefalteten Zeitungen war die obere Hälfte – above the fold – die wertvollste Fläche. Hier wurden Hauptschlagzeilen und aufmerksamkeitsstarke Bilder platziert, um am Kiosk zum Kauf zu animieren. Im Webdesign wurde das Konzept auf den sichtbaren Browserbereich übertragen.
Above the Fold im modernen Webdesign
Im Webdesign entscheidet der Above-the-Fold-Bereich über den Erfolg einer Website. Studien zeigen, dass Nutzer 57% ihrer Zeit im sichtbaren Bereich ohne Scrollen verbringen. Die wichtigsten Elemente sollten daher sofort sichtbar sein:
- Klare Hauptüberschrift: Was bietet die Seite?
- Wertversprechen: Warum sollte der Nutzer bleiben?
- CTA-Button: Was soll der Nutzer als Nächstes tun?
- Visuelles Element: Bild oder Video, das Aufmerksamkeit fängt
Die Hero Section als Above-the-Fold-Element
Die Hero Section ist typischerweise das dominierende Element Above the Fold. Sie kombiniert eine kraftvolle Überschrift, ein Wertversprechen und einen Call-to-Action in einem visuell ansprechenden Layout. Die visuelle Hierarchie führt den Blick des Nutzers von der Überschrift zum CTA.
Above the Fold und Performance
Inhalte Above the Fold müssen priorisiert geladen werden. Bilder in diesem Bereich sollten nicht mit Lazy Loading versehen werden, da dies den Largest Contentful Paint (LCP) der Core Web Vitals verschlechtert. Stattdessen sollten Hero-Bilder mit priority oder fetchpriority="high" versehen werden.
Critical CSS – das CSS, das für den Above-the-Fold-Bereich benötigt wird – sollte inline im HTML stehen, um Render-Blocking zu vermeiden.
Above the Fold auf verschiedenen Geräten
Durch die Vielfalt an Bildschirmgrößen gibt es keine feste Fold-Linie. Responsive Design stellt sicher, dass die wichtigsten Inhalte auf jedem Gerät im initialen Sichtbereich erscheinen. Mobile Nutzer sehen weniger Inhalt Above the Fold – daher muss die Priorisierung auf Smartphones besonders konsequent sein.
Mythos: Alles muss Above the Fold sein
Ein verbreiteter Irrtum ist, dass alle wichtigen Inhalte Above the Fold sein müssen. Nutzer scrollen – vorausgesetzt, der sichtbare Bereich weckt ihr Interesse. Der Above-the-Fold-Bereich muss neugierig machen und den Nutzer zum Weiterscrollen motivieren, nicht alles auf einmal zeigen.