Above the Fold: Was in den ersten Bildschirm gehört

Above the Fold heißt der Bereich einer Website, den Besucher sehen, ohne zu scrollen. In ihn gehören die Antwort auf die Frage “Bin ich hier richtig?”, der wichtigste Nutzen und ein klarer nächster Schritt. Alles andere darf weiter unten stehen. Der Begriff klingt nach fester Linie, in der Praxis ist der erste Bildschirm aber auf jedem Gerät anders hoch. Dieser Artikel zeigt, wie Sie ihn trotzdem planbar machen.

Woher der Begriff kommt

Above the Fold stammt aus dem Zeitungswesen. Große Zeitungen wurden gefaltet im Kiosk ausgelegt, sichtbar war nur die obere Hälfte der Titelseite. Dort standen die Schlagzeilen, die zum Kauf bewegen sollten. Im Webdesign beschreibt der Begriff den sichtbaren Teil des Browserfensters beim ersten Laden. Das Gegenstück heißt Below the Fold.

Die Falz ist keine feste Linie

Eine Website wird auf schmalen Smartphones, Tablets, Laptops und großen Monitoren geöffnet, im Hoch- und im Querformat, mit und ohne eingeblendete Browserleisten. Die sichtbare Höhe schwankt dadurch stark. Wer den Startbereich auf eine einzige Bildschirmgröße optimiert, erlebt auf anderen Geräten Überraschungen: Der Button rutscht aus dem Bild, oder die Überschrift wird vom Cookie-Hinweis verdeckt.

Praktischer ist es, in Prioritäten zu denken statt in Pixeln. Die wichtigsten Elemente stehen ganz oben in der Reihenfolge, die zweitwichtigsten folgen. Dann bleibt auch auf einem kleinen Bildschirm das Wichtigste sichtbar. Wie sich Layouts an verschiedene Breiten anpassen, erklärt der Ratgeber Responsive Webdesign.

Scrollen Besucher noch?

Die Sorge, dass niemand scrollt, stammt aus den Anfangsjahren des Webs. Heute ist Scrollen, besonders auf dem Smartphone, die normalste Bewegung überhaupt. Blickverlaufsstudien aus der Usability-Forschung zeigen aber regelmäßig, dass der obere Teil einer Seite die meiste Aufmerksamkeit bekommt. Beides passt zusammen: Besucher scrollen, wenn der erste Eindruck überzeugt.

Gefährlich ist ein sogenannter falscher Boden. Das passiert, wenn der Startbereich wie ein abgeschlossenes Ganzes wirkt, etwa ein bildschirmfüllendes Foto mit zentriertem Slogan und klarer Unterkante. Besucher halten die Seite dann für zu Ende. Abhilfe schafft ein angeschnittenes Element am unteren Rand, zum Beispiel der Beginn des nächsten Abschnitts, das zum Weiterlesen einlädt.

Die fünf Bausteine des ersten Bildschirms

Die Hauptaussage ist der wichtigste Baustein. Eine Überschrift wie “Willkommen auf unserer Website” verschenkt den wertvollsten Platz der Seite. Besser ist eine Aussage, die ohne weitere Erklärung verständlich ist und das Suchziel der Besucher trifft.

Für die Hauptaktion gilt: eine Aktion steht im Vordergrund, weitere treten optisch zurück. Wie Farbe, Text und Größe des Buttons wirken, beschreibt der Artikel Call-to-Action-Buttons gestalten.

Was nicht in den ersten Bildschirm gehört

• Bildwechsler (Slider): Sie verteilen die Aufmerksamkeit auf mehrere Botschaften, von denen die späteren oft kaum gesehen werden. Ein starkes Motiv mit einer Aussage ist meist wirkungsvoller.
• Automatisch startende Videos mit Ton: Sie erschrecken, verbrauchen Datenvolumen und überdecken die eigentliche Botschaft.
• Große Werbeflächen: Ein Startbereich, der überwiegend aus Anzeigen besteht, wirkt unseriös. Google hat schon vor Jahren angekündigt, Seiten mit übermäßig viel Werbung im sichtbaren Bereich schlechter zu bewerten.
• Bildschirmfüllende Einblendungen: Newsletter-Fenster oder Hinweise, die den Inhalt sofort verdecken, stören gerade auf dem Smartphone. Ein notwendiger Cookie-Hinweis sollte so gestaltet sein, dass er den Inhalt möglichst wenig verdeckt.
• Lange Textblöcke: Der erste Bildschirm ist zum Erfassen da, nicht zum Lesen. Ausführliche Erklärungen folgen darunter.

Desktop und Smartphone getrennt planen

Auf einem breiten Monitor stehen Text und Bild im Startbereich oft nebeneinander. Auf dem Smartphone rutscht das Bild unter den Text oder darüber. Steht ein großes Foto oben, verdrängt es auf dem Smartphone Überschrift und Button aus dem sichtbaren Bereich. Prüfen Sie deshalb:

1. Ist auf dem Smartphone die Überschrift ohne Scrollen vollständig lesbar?
2. Ist die Hauptaktion sichtbar oder zumindest mit einer kurzen Bewegung erreichbar?
3. Nimmt die Kopfzeile mit Logo und Menü nicht zu viel Höhe ein, besonders im Querformat?
4. Wird das Bild für schmale Bildschirme passend zugeschnitten, statt nur verkleinert?

Mit dem picture-Element lassen sich für das Smartphone ein anderer Bildausschnitt oder ein flacheres Format ausliefern. So bleibt Platz für Text.

Der erste Bildschirm muss schnell erscheinen

Was oben steht, wird zuerst geladen und zuerst bewertet. Google misst mit der Kennzahl Largest Contentful Paint (LCP), wann das größte sichtbare Element erscheint, meist das Startbild oder die Hauptüberschrift. Als gut gilt ein Wert von höchstens 2,5 Sekunden. Diese Punkte helfen:

• Startbild nicht verzögert laden: loading="lazy" ist für Bilder weiter unten sinnvoll, beim Startbild verzögert es die Anzeige. Mit fetchpriority="high" können Sie dem Browser signalisieren, dass dieses Bild Vorrang hat.
• Breite und Höhe angeben: Sonst springt das Layout, wenn das Bild nachlädt.
• Passende Bildgröße und modernes Format: WebP oder AVIF in der Größe, die tatsächlich angezeigt wird.
• Schriften schlank halten: Wenige Schriftschnitte, selbst gehostet, damit die Überschrift nicht auf einen fremden Server warten muss.
• Keine Inhalte erst per Skript einblenden: Text, der erst nach dem Laden eines großen Skripts erscheint, verzögert den ersten Eindruck.

Wie Bilder und Schriften die Ladezeit im Detail beeinflussen, erklärt der Artikel Wie Bilder und Schriften die Ladezeit beeinflussen.

Je nach Seitentyp andere Schwerpunkte

Bei Ratgeberartikeln hat sich bewährt, die Antwort nicht hinter einer langen Einleitung zu verstecken. Wer mit einer konkreten Frage kommt, will in den ersten Sätzen erfahren, ob er die Antwort hier findet. Wie eine Landingpage unterhalb des Startbereichs weitergeht, zeigt der Artikel Landingpage-Aufbau.

So testen Sie Ihren Startbereich

1. Fünf-Sekunden-Test: Zeigen Sie den ersten Bildschirm einer Person, die die Seite nicht kennt, für fünf Sekunden. Kann sie danach sagen, worum es geht und was sie tun könnte?
2. Geräte-Check: Öffnen Sie die Seite auf einem echten Smartphone, einem Laptop und einem großen Monitor und notieren Sie, was jeweils sichtbar ist.
3. Ohne Bilder lesen: Funktioniert die Botschaft auch, wenn das Bild noch nicht geladen ist?
4. Ladezeit messen: Prüfen Sie, wann das größte Element erscheint, idealerweise mit gedrosselter Mobilverbindung.
5. Scrollverhalten beobachten: Webanalyse-Werkzeuge können zeigen, wie weit Besucher scrollen. Bricht fast jeder nach dem ersten Bildschirm ab, stimmt etwas mit dem Einstieg nicht.

Häufige Fehler im Überblick

• Überschrift ohne Aussage, etwa nur der Firmen- oder Seitenname.
• Mehrere gleich starke Buttons nebeneinander, die um Aufmerksamkeit konkurrieren.
• Text über einem unruhigen Foto, der kaum lesbar ist.
• Ein Startbild, das so hoch ist, dass auf dem Smartphone nichts anderes sichtbar bleibt.
• Wichtige Informationen wie Telefonnummer oder Öffnungszeiten nur im Footer.

Der erste Bildschirm ist kein Ort für alles, sondern für das Wichtigste. Wenn Hauptaussage, Hauptaktion und Orientierung stimmen, darf der Rest der Seite in Ruhe folgen. Weitere Ansatzpunkte bietet die Übersicht Tipps für ansprechendes Webdesign.