Above the Fold: Der erste Bildausschnitt entscheidet

TL;DR - die Kurzfassung

Above the Fold bezeichnet den Bereich deiner Website, der ohne Scrollen sichtbar ist. Dieser erste Bildausschnitt entscheidet, ob Besucher bleiben oder abspringen - meistens in weniger als fünf Sekunden. Was dort steht, ist keine Designfrage. Es ist eine Umsatzfrage.

Jemand landet auf deiner Website. Kein Vorwissen, keine Geduld, drei Sekunden. Was Besucher in diesem Moment sehen, entscheidet: bleiben oder weg. Wer in dieser Zeitspanne nicht zeigt was er anbietet und für wen - verliert. Und das passiert auf den meisten Websites täglich hunderte Male.

Was bedeutet "Above the Fold"?

Der Begriff kommt aus der Zeitungswelt. Zeitungen wurden gefaltet verkauft - der obere Teil war sichtbar, der untere nicht. Was oben stand, entschied über den Kauf.

Im Webdesign meint "Above the Fold" genau das: den Bereich, den Besucher ohne Scrollen sehen. Alles darunter - Below the Fold - bleibt unsichtbar bis jemand scrollt. Und scrollen tun Besucher nur, wenn der erste Bildausschnitt sie überzeugt hat. 57 % der gesamten Betrachtungszeit einer Website entfällt auf diesen oberen Bereich - Besucher nehmen Inhalte dort 102 % häufiger wahr als alles darunter (Nielsen Norman Group).

Warum entscheidet dieser Bereich über Anfragen - und Umsatz?

Deine Website hat kein Leseproblem. Sie hat ein Aufmerksamkeitsproblem.

Besucher lesen nicht - sie scannen. Sie suchen in Sekunden eine Antwort auf eine Frage: "Bin ich hier richtig?" Steht die Antwort nicht sofort oben, scrollen die meisten nicht weiter. Die Absprungrate steigt - und mit ihr die Zahl der Besucher, die kommen, nichts sehen und gehen. Das kostet keine abstrakten "verlorenen Leads" - das kostet konkrete Anfragen, Aufträge, Umsatz.

Welche Elemente gehören above the fold?

Nicht alles. Das ist der häufigste Fehler: zu viel in den oberen Bereich packen, weil dort angeblich alles wichtig ist. Das Ergebnis ist Chaos statt Klarheit.

Was dort stehen muss:

  • Eine klare Aussage, für wen du arbeitest - nicht dein Firmenname, sondern das Problem, das du löst
  • Ein Call-to-Action - was soll der Besucher als Nächstes tun? Besonders auf Landing Pages entscheidet dieser Button über alles.
  • Ein Trust-Signal - Kundenbewertung, bekannte Referenz, kurze Aussage. 91 % der Verbraucher sagen, dass Bewertungen ihre Wahrnehmung eines Unternehmens direkt beeinflussen (BrightLocal, 2024).

Was dort nicht hingehört: deine Geschichte, alle Leistungen auf einmal, ein rotierendes Bilderkarussell.

Was hat Mobile mit Above the Fold gemacht?

Das Konzept ist alt. Die Umsetzung ist komplizierter geworden.

Auf einem Desktop ist der sichtbare Bereich relativ klar. Auf einem Smartphone ist er deutlich kleiner - und variiert je nach Gerät und Browser. Was auf einem iPhone sichtbar ist, verschwindet auf einem älteren Android-Modell schon halb unter der Navigationsleiste. Genau dafür gibt es Breakpoints: definierte Bildschirmbreiten, bei denen sich das Layout automatisch anpasst.

Das bedeutet: Gutes Above-the-Fold-Design denkt mobil zuerst. Deine wichtigste Botschaft und der Call-to-Action müssen auf jedem Gerät ohne Scrollen sichtbar sein. Google indexiert Seiten seit 2019 primär nach ihrer mobilen Version, vollständig umgesetzt bis 2021 - wer das ignoriert, verliert Sichtbarkeit und Besucher gleichzeitig.

Häufige Fehler - und was du stattdessen tust

Headline über das Unternehmen statt den Kunden: "Willkommen bei Müller GmbH" beantwortet keine Frage. "Sanitäranlagen für Gewerbebauten - geplant, gebaut, fertig" schon.

Call-to-Action fehlt oder ist versteckt: Personalisierte CTAs konvertieren 202 % besser als generische (HubSpot). Der Zusammenhang mit der Conversion Rate ist direkt: ein Button, den man erst suchen muss, existiert für die meisten Besucher nicht.

Slider statt Botschaft: Ein rotierendes Bilderkarussell sieht dynamisch aus. Es verwirrt Besucher und reduziert die Wahrscheinlichkeit, dass sie die eigentliche Kernbotschaft überhaupt lesen.

Was du konkret tun kannst: Schau dir deine Website auf dem Smartphone an. Decke alles unterhalb des ersten sichtbaren Bereichs ab. Beantwortet was sichtbar bleibt die Frage "Was bietest du an und für wen?" - in fünf Sekunden, ohne Erklärung? Wenn nicht, weißt du wo anzusetzen ist.

Häufig gestellte Fragen zu

Above the Fold

Was genau ist "Above the Fold" auf einer Website?

Above the Fold bezeichnet den Bereich einer Website, der ohne Scrollen sichtbar ist - was ein Besucher als Erstes sieht, sobald die Seite lädt. Der Begriff stammt aus der Zeitungswelt, wo der obere Teil einer gefalteten Zeitung darüber entschied, ob jemand kauft. Im Web gilt dasselbe Prinzip: Was oben steht, entscheidet über Bleiben oder Abspringen.

Wie groß ist der Above-the-Fold-Bereich?

Das hängt vom Gerät ab. Auf einem Standard-Desktop sind es grob die oberen 600-700 Pixel Seiteninhalt. Auf Smartphones ist der sichtbare Bereich deutlich kleiner und variiert je nach Gerät und Browser. Deshalb ist responsives Design entscheidend: deine wichtigste Botschaft muss auf jedem Gerät ohne Scrollen sichtbar sein.

Welche Elemente sollten above the fold stehen?

Mindestens drei Dinge: eine klare Aussage was du anbietest und für wen, ein Call-to-Action der zeigt was der Besucher als Nächstes tun soll, und ein Trust-Signal wie Kundenbewertungen oder bekannte Referenzen. Alles andere - deine Geschichte, alle Leistungen, ausführliche Erklärungen - kommt darunter.

Warum beeinflusst Above the Fold die Conversion Rate?

Weil Besucher nicht lesen - sie scannen. 57 % der Betrachtungszeit fällt auf den Above-the-Fold-Bereich, Besucher nehmen Inhalte dort 102 % häufiger wahr als alles darunter. Wer die wichtigste Botschaft nicht sofort oben platziert, verliert die meisten Besucher bevor sie anfangen zu scrollen.

Ist Below the Fold unwichtig?

Nein - aber Below the Fold funktioniert nur, wenn Above the Fold den Besucher überzeugt zu scrollen. Der untere Teil ist der richtige Ort für ausführliche Erklärungen, Leistungsdetails und Referenzen. Above the Fold öffnet die Tür. Below the Fold macht den Abschluss.

Wie teste ich ob mein Above the Fold funktioniert?

Schau dir deine Website auf dem Smartphone an - oder lass jemanden draufschauen, der dein Angebot nicht kennt. Frage: Versteht diese Person in fünf Sekunden, was du anbietest und für wen? Wenn nicht, ist das das Problem. Tools wie Hotjar zeigen per Heatmap, wie weit Besucher scrollen und wo sie klicken.