Above the Fold: Was in den ersten Sichtbereich deiner Webseite gehört

Above the Fold ist nicht der einzige wichtige Teil deiner Webseite. Aber er ist der wichtigste. Wer hier verliert, verliert den Besucher, bevor er die zweite Sektion überhaupt sieht. Und das passiert öfter, als die meisten zugeben.

Ich plane Webseiten als Denkprozess. Wenn ich eine Seite öffne, schaue ich zuerst auf den Sichtbereich. Drei Sekunden, dann weiß ich, ob jemand wirklich darüber nachgedacht hat, was eine Webseite leisten muss, oder ob ein Template ausgefüllt wurde. Dieser Artikel zeigt dir genau das, woran ich das festmache.

Was bedeutet Above the Fold heute

Der Begriff Above the Fold stammt aus dem Zeitungsdruck. Oberhalb der Mittelfalz lag der wichtigste Inhalt, weil die gefaltete Zeitung im Kiosk nur die obere Hälfte zeigte. Im Web bezeichnet Above the Fold den Bereich einer Webseite, den ein Besucher sieht, ohne zu scrollen.

Die Höhe variiert je nach Gerät. Auf Mobile sind es typisch 580 bis 700 Pixel, abhängig von Browserleiste und Geräteklasse. Auf Desktop schwankt der Wert zwischen 600 und 900 Pixel. Plane immer für den kleinsten verbreiteten Sichtbereich – das ist ein iPhone SE mit 375×667 Pixel und etwa 580 sichtbaren Pixeln nach Abzug der Browserleiste.

Ein häufiges Missverständnis: Above the Fold sei seit der Mobile-Ära unwichtig geworden, weil Nutzer ohnehin scrollen. Das stimmt nur halb. Nutzer scrollen routiniert, aber sie scrollen nicht, wenn der erste Sichtbereich keinen Grund liefert weiterzulesen. Die Aufmerksamkeit wird oben gewonnen oder gar nicht.

Warum die ersten Pixel über deine Conversion entscheiden

Forschung der Nielsen Norman Group hat über Jahre gezeigt, dass mehr als 80 Prozent der Aufmerksamkeit auf den oberen Bereich einer Seite entfällt. Pages mit unklarem Above the Fold haben Bounce Rates von 70 bis 90 Prozent. Pages mit klarem Above the Fold landen oft unter 40.

Im Klartext: Wenn ein Besucher in drei Sekunden nicht versteht, was du machst, für wen und warum er hier richtig ist, verlässt er deine Seite. Egal wie gut der Rest ist. Die zweite Section sieht er nicht. Die Cases nicht. Den Pricing-Block nicht. Above the Fold ist das Eingangsfilter deiner gesamten Webseite.

Das gilt umso mehr in einer Zeit, in der Besucher von Google AI Overviews, ChatGPT-Antworten oder LinkedIn-Posts kommen. Sie sind nicht mehr „auf der Suche", sie sind „kurz am Prüfen". Wer im Sichtbereich nicht überzeugt, wird sofort durch die nächste Quelle ersetzt.

Die 5 Elemente, die above the fold gehören

Ich arbeite mit fünf Elementen, die in jeden ersten Sichtbereich gehören. Mehr ist Lärm, weniger ist Lücke. Diese fünf reichen, wenn sie sauber sitzen.

1. Wertversprechen als Headline

Eine einzige Aussage, die in einem Satz sagt, was du tust, für wen und warum du anders bist. Kein Slogan. Kein Wortspiel. Eine Aussage. Beispiel: „Wir bauen Marketing Systeme, die in 24 Monaten noch tragen." Drei Sekunden lesen, sofort verstanden. Wer ein Wertversprechen above the fold nicht formuliert bekommt, hat noch nicht entschieden, wofür die Seite eigentlich steht.

2. Subheadline mit konkretem Nutzen

Die Subheadline erklärt das Wertversprechen in einem zweiten, längeren Satz. Sie nennt Zielgruppe, Methode oder Ergebnis. Hier landet, was nicht in die Headline passt, ohne sie zu überladen. Wichtig: kein Buzzword-Salat, sondern ein konkreter Mehrwert. „Für Selbstständige und Gründer, Festpreis vor Start, 24 bis 48 Stunden bis live" ist eine gute Subheadline.

3. Primärer Call-to-Action

Genau ein primärer CTA. Sichtbar, oberhalb der Falz, mit klarer Handlung. „Termin buchen", „Demo ansehen", „Pakete vergleichen". Was es nicht ist: drei gleichwertige Buttons. Wer zwischen drei CTAs wählen muss, wählt keinen. Ein sekundärer Link („Mehr erfahren", anchor auf die nächste Section) ist okay, aber nur als visueller Sekundärkontakt.

4. Visuelles Element mit Funktion

Ein Bild, ein Produkt-Mockup, ein animierter Container oder ein Cover-Visual. Wichtig: das Visual hat eine Aufgabe. Es zeigt entweder das Produkt selbst, ein Resultat, einen Use Case oder die Marke. Was es nicht ist: ein Stockfoto vom lächelnden Team. Stockfotos signalisieren Austauschbarkeit, und Austauschbarkeit ist das Gegenteil von Vertrauen.

5. Trust-Signal als Anker

Ein dezentes Vertrauenselement direkt im oder unter dem Hero. Sterne mit Bewertungsschnitt, Logos relevanter Kunden, Zertifikate oder Zahlen aus deinem Geschäft. Ein guter Trust-Anker beantwortet die unausgesprochene Frage „kann ich denen vertrauen, bevor ich weiterlese?". Ohne Trust-Signal wird der CTA nicht geklickt, selbst wenn das Wertversprechen sitzt.

Die 3 Elemente, die NICHT above the fold gehören

Genauso wichtig wie das Hinzufügen ist das Weglassen. Drei Elemente sehe ich in Audits ständig im Sichtbereich und sie schaden in fast allen Fällen.

1. Der Hero-Slider

Ein Slider mit drei wechselnden Botschaften klingt nach Lösung („wir wollen alles zeigen"), ist aber das Gegenteil. Niemand wartet, bis Slide 2 erscheint. Studien zeigen, dass über 90 Prozent der Klicks auf den ersten Slide gehen. Du hast also drei Botschaften gebaut und nutzt nur eine. Streich den Slider, entscheide dich für die stärkste Aussage und plane den Rest als Sections darunter.

2. Zwei gleich starke CTAs

„Termin buchen" und gleichzeitig „Newsletter abonnieren" oben in identischer Größe ist eine Sackgasse. Der Besucher muss wählen, weiß nicht welche Option richtig ist, und wählt deshalb keine. Ein primärer CTA pro Sichtbereich, sekundärer Link in dezenterer Optik. Klare Hierarchie statt Auswahlparadox.

3. Logo-Wand ohne Kontext

Logos bekannter Kunden „as seen in" können wirken, aber nicht direkt im Hero und nicht ohne Kontext. Eine Logo-Reihe oben ohne Erklärung wirkt austauschbar. Setze sie eher unterhalb des Heros, mit kurzer Einleitung („Vertrauen von Teams bei…") und auf relevante Marken reduziert. Drei spitze Logos schlagen zehn generische.

Mobile First: Above the Fold auf 375 Pixel

Über 60 Prozent aller Besuche auf Marketing-Webseiten kommen mittlerweile von Mobilgeräten. Wer above the fold nur für Desktop plant, baut für die Minderheit. Plane immer Mobile First für den Sichtbereich auf einem iPhone SE oder vergleichbar (375×667 Pixel, real sichtbar etwa 580 Pixel nach Browserleiste).

Was sich auf Mobile ändert: dein Hero hat weniger Raum, die Headline muss kürzer sein, das visuelle Element ist oft kleiner oder unter dem Text. Ein primärer CTA full-width ist gut, weil er als Daumen-freundliches Ziel über die ganze Breite klickbar wird. Trust-Signale rutschen oft direkt unter den CTA, statt rechts daneben wie auf Desktop.

Praktischer Test: öffne deine Webseite auf einem realen iPhone (kein Emulator), drehe es ins Portrait, scrolle nicht. Wenn du in diesem Zustand nicht in fünf Sekunden weißt, was die Seite anbietet und was du tun sollst, hat dein Above the Fold ein strukturelles Problem.

Häufige Fehler und konkrete Quick Fixes

Aus über 80 Webseiten-Audits sehe ich immer wieder dieselben vier Fehler. Jeder davon hat einen 30-Minuten-Fix.

Buzzword-Headline ohne Substanz

„Innovative Lösungen für maßgeschneiderte Erfolge" sagt nichts. Quick Fix: ersetze jedes Wort, das du auch auf einer beliebigen Konkurrenz-Seite findest, durch ein konkretes. „Festpreis-Webseiten für Selbstständige, live in 48 Stunden" sagt was und für wen.

Stockfoto als Hero-Visual

Lächelnde Models im Open-Space-Büro sind austauschbar. Quick Fix: ersetze durch ein echtes Produkt-Mockup, einen Screenshot deiner Software, ein Ergebnis-Visual oder ein authentisches Foto. Lieber rohes, ehrliches Material als poliertes Generisches.

Drei gleichwertige CTAs

„Termin buchen", „Demo ansehen", „Newsletter abonnieren" gleich groß nebeneinander. Quick Fix: priorisiere genau einen primären CTA, mache die anderen zu sekundären Links unter dem Hero. Wenn du dich nicht entscheiden kannst, hast du noch nicht geklärt, was die Seite eigentlich erreichen soll.

Fehlendes Trust-Signal

Selbst eine starke Headline und ein klarer CTA reichen nicht, wenn der Besucher dich nicht einordnen kann. Quick Fix: füge eine Mini-Trust-Leiste direkt unter dem CTA ein. Drei Logos echter Kunden, eine konkrete Zahl („300+ User auf eigenen Plattformen"), eine Bewertung mit Sternen. Klein, dezent, aber sichtbar im ersten Bildschirm.

Beispiel: Vorher / Nachher

Aus einem realen Audit, B2B-Dienstleister Mittelstand. Anonymisiert.

Vorher

Hero mit Slider (drei Slides). Headline Slide 1: „Wir gestalten Ihre digitale Zukunft." Subheadline: leer. CTAs: „Mehr erfahren", „Über uns", „Kontakt". Hero-Visual: Stockfoto, Team am Konferenztisch. Kein Trust-Signal. Bounce Rate: 78 Prozent. Conversion-Rate auf den Kontakt-Button: 0,4 Prozent.

Nachher

Hero ohne Slider. Headline: „Cloud-Migration für SAP-Systeme in 90 Tagen." Subheadline: „Für Mittelstandsunternehmen, die ohne Downtime in die Cloud wollen. Festpreis, definierter Zeitrahmen." CTA: „Erstgespräch buchen" (groß), sekundär: „Case Studies ansehen" (Link). Hero-Visual: Diagramm der eigenen Migration-Methode. Trust-Leiste unter Hero: drei reale Kundenlogos plus „92 Migrationen seit 2019". Bounce Rate nach Umbau: 41 Prozent. Conversion-Rate auf Erstgespräch: 2,1 Prozent.

Der Umbau hat keinen einzigen neuen Inhalt gebraucht. Nur eine Entscheidung, was wirklich in den Sichtbereich gehört, und ein striktes Weglassen von allem anderen. Das ist die Arbeit, die above the fold ausmacht.

Checkliste: Above the Fold in 5 Minuten auditieren

Sechs Fragen, die du an jeden ersten Sichtbereich stellen kannst. Wenn du eine davon nicht klar mit Ja beantwortest, ist dort ein Hebel.

• Wertversprechen: Verstehe ich in drei Sekunden, was du machst und für wen?
• Subheadline: Liefert sie konkreten Mehrwert oder nur weitere Adjektive?
• Primär-CTA: Gibt es genau einen klar dominanten Button mit klarer Handlung?
• Visual: Hat das Hero-Bild eine Funktion oder ist es austauschbar?
• Trust-Signal: Sehe ich oben oder direkt darunter ein konkretes Vertrauenselement?
• Mobile: Funktioniert genau dieselbe Logik auch auf einem iPhone SE, ohne zu scrollen?

Wer fünf von sechs Fragen mit Ja beantwortet, hat einen funktionierenden Sichtbereich. Wer drei oder weniger erreicht, hat above the fold noch nicht geplant. Geplant heißt: jede der fünf Elemente bewusst gesetzt und alles andere bewusst weggelassen.

Above the Fold ist kein Design-Thema. Es ist eine strategische Entscheidung darüber, was deine Webseite in den ersten drei Sekunden über sich sagt. Wenn du diese Entscheidung sauber triffst, schreibt sich der Rest der Seite fast von selbst. Wenn du sie überspringst, kannst du den Rest noch so schön bauen, die meisten Besucher werden ihn nie sehen.