Was bedeutet Above the Fold?
Above the Fold (auf Deutsch: über dem Falz oder über der Faltkante) beschreibt im Webdesign den Teil einer Seite, den der Besucher sofort sieht – ohne zu scrollen. Alles, was erst durch Scrollen sichtbar wird, liegt „Below the Fold“.
Die genaue Größe des Above-the-Fold-Bereichs hängt vom Gerät ab: Auf einem großen Desktop-Monitor sind es deutlich mehr Pixel als auf einem Smartphone-Bildschirm. Bei einer Auflösung von 1920x1080 Pixel (der häufigsten Desktop-Auflösung in Deutschland) sind etwa 600–700 Pixel Höhe sichtbar, abzüglich Browser-Leiste und Navigation. Auf einem durchschnittlichen Smartphone sind es nur rund 500–600 Pixel. Darum ist es wichtig, den Above-the-Fold-Bereich für verschiedene Geräte zu planen – das hängt eng mit Responsive Design zusammen.
Psychologisch ist der erste sichtbare Bereich entscheidend, weil Besucher innerhalb von 2–3 Sekunden entscheiden, ob eine Seite relevant für sie ist. Wenn in diesen ersten Sekunden die Kernbotschaft, ein klares Nutzenversprechen und ein Call-to-Action sichtbar sind, steigt die Wahrscheinlichkeit erheblich, dass der Besucher weiterliest oder handelt.
Warum ist Above the Fold wichtig?
Studien zur Aufmerksamkeitsverteilung zeigen: Der Bereich Above the Fold erhält rund 80 % der Aufmerksamkeit von Website-Besuchern. Das bedeutet nicht, dass Inhalte Below the Fold unwichtig sind – viele Nutzer scrollen, besonders auf mobilen Geräten. Aber die Entscheidung, ob überhaupt gescrollt wird, fällt Above the Fold.
Für die Conversion Rate deiner Website ist das besonders relevant. Eine Studie von Nielsen Norman Group zeigt, dass Besucher dem Bereich Above the Fold unverhältnismäßig viel Aufmerksamkeit schenken. Wenn dein primärer CTA erst nach zwei Bildschirmhöhen Scrollen erscheint, sehen ihn deutlich weniger Besucher, als wenn er im ersten sichtbaren Bereich platziert ist.
Auch für SEO spielt Above the Fold eine Rolle: Google hat in seinem Page Layout Algorithm klargestellt, dass Seiten mit zu viel Werbung und zu wenig nützlichem Inhalt Above the Fold abgewertet werden können. Der erste sichtbare Bereich sollte also primär dem Nutzer dienen – mit relevantem Inhalt, nicht mit Bannern.
Above the Fold in der Praxis: So gestaltest du den Bereich
Der Above-the-Fold-Bereich sollte drei Elemente enthalten: eine klare Überschrift, die den Kernnutzen kommuniziert, einen unterstützenden Satz oder Absatz, der das Versprechen konkretisiert, und einen sichtbaren Call-to-Action, der den nächsten Schritt zeigt.
Vermeide es, den Bereich mit zu vielen Elementen zu überladen. Ein Hero-Bild oder eine visuelle Stütze kann sinnvoll sein, aber nur wenn es die Botschaft unterstützt und die Ladezeit nicht übermäßig verlängert. Große, nicht optimierte Bilder Above the Fold sind eine häufige Ursache für schlechte Core Web Vitals.
Teste den Above-the-Fold-Bereich auf verschiedenen Geräten. Was auf deinem großen Monitor gut aussieht, kann auf einem Smartphone komplett anders wirken. Die Überschrift muss auch auf kleinen Bildschirmen vollständig lesbar sein, der CTA-Button muss sichtbar bleiben, und das Gesamtbild sollte auf den ersten Blick vermitteln, worum es auf der Seite geht.
Ein häufiger Fehler: Der gesamte Above-the-Fold-Bereich wird von einer großen Navigation, einem Cookie-Banner und einem Hero-Bild eingenommen – und die eigentliche Kernbotschaft verschwindet Below the Fold. Prüfe deshalb regelmäßig, was deine Besucher tatsächlich als Erstes sehen.
