Was Above the Fold heute bedeutet — und warum es komplizierter ist als früher
Der Begriff stammt aus der Zeitungsbranche: Was oberhalb der Falzkante lag, war am Kiosk sichtbar. Im Web übertragen bedeutet es: alles, was ohne Scrollen im Browser-Fenster erscheint. Das klingt einfach, ist es aber nicht mehr.
Moderne Geräte haben unterschiedliche Bildschirmauflösungen, Seitenverhältnisse und Schriftgrößen. Ein 27-Zoll-Monitor zeigt deutlich mehr Above the Fold als ein 13-Zoll-Laptop. Auf dem Smartphone schrumpft der Bereich nochmals erheblich. Es gibt also keine einheitliche Pixelgrenze — Above the Fold ist ein Konzept, keine feste Maßzahl.
Was daraus folgt: Die Optimierung muss für mehrere Viewports gleichzeitig gedacht werden. In der Praxis empfiehlt sich ein Referenz-Viewport von 1280×800 Pixel für Desktop und 390×844 für Mobile (entspricht einem gängigen iPhone-Format). Diese Werte decken einen Großteil der tatsächlichen Nutzerbasis ab und sind ein solider Ausgangspunkt für Designentscheidungen.
Die Pflicht-Elemente Above the Fold im B2B
Nicht jedes Element muss Above the Fold stehen — aber bestimmte Inhalte müssen es, wenn eine Seite konvertieren soll. Folgende Elemente sind im B2B-Kontext nicht verhandelbar:
Eine klare Headline mit konkretem Wertversprechen
Die Headline ist das wichtigste Element im ersten Viewport. Sie muss in einem Satz beantworten: Was bietet diese Seite, für wen, und warum ist das relevant? Vage Formulierungen wie „Wir gestalten Ihre Zukunft" oder „Innovation für Ihr Unternehmen" leisten das nicht. Konkret heißt: Zielgruppe oder Problem erkennbar, Nutzen benennbar.
April Dunford, Autorin von „Obviously Awesome", beschreibt dieses Prinzip als Positionierung — Besucher müssen sofort einordnen können, in welcher Kategorie das Angebot liegt und warum es relevant ist. Eine Headline wie „Projektmanagement-Software für Ingenieurbüros ab 20 Mitarbeitern" ist besser als jede kreative Formulierung ohne Substanz.
Eine Subheadline, die Kontext liefert
Die Subheadline ergänzt die Headline um den entscheidenden zweiten Layer: Sie erklärt kurz, wie das Versprechen eingelöst wird oder welches konkrete Problem gelöst wird. Zwei bis drei Sätze sind ausreichend — mehr wird Above the Fold selten gelesen.
Ein primärer CTA — eindeutig und sichtbar
Jede B2B-Seite braucht Above the Fold genau einen primären Call-to-Action. Nicht zwei, nicht drei. Der CTA muss visuell dominant sein, einen konkreten nächsten Schritt benennen und sich vom restlichen Design abheben. „Demo anfragen", „Kostenlos testen" oder „Angebot einholen" funktionieren besser als generische Formulierungen wie „Mehr erfahren" oder „Kontakt".
Wer tiefer in die Formulierung von CTAs einsteigen möchte, findet in CTAs schreiben — 12 Beispiele die im B2B funktionieren konkrete Vorlagen und Erklärungen, warum bestimmte Formulierungen besser konvertieren als andere.
Eine funktionale Navigation
Die Navigation gehört technisch zum Above-the-Fold-Bereich und wird oft unterschätzt. Sie signalisiert dem Besucher, was die Website insgesamt anbietet, und gibt Orientierung. Im B2B sollte die Navigation maximal fünf bis sieben Hauptpunkte enthalten — alles darüber hinaus erzeugt kognitive Last, ohne Mehrwert zu liefern.
Ein visuelles Element, das das Angebot unterstützt
Ob Screenshot, Illustration oder Foto — das visuelle Element Above the Fold sollte das Angebot konkretisieren, nicht dekorieren. Ein Produktscreenshot schlägt in fast allen A/B-Tests ein generisches Stock-Foto. Das visuelle Element ist kein Pflichtfeld für Ästhetik, sondern ein Kommunikationswerkzeug.
Vertrauen Above the Fold — wann und wie Social Proof eingesetzt wird
Im B2B ist Vertrauen ein Konversionsfaktor, der oft unterschätzt wird. Besucher, die eine Website zum ersten Mal sehen, haben keine Vorgeschichte mit dem Unternehmen. Vertrauenssignale Above the Fold können diesen Kaltstart abfedern.
Konkret bedeutet das: Kundenlogos, eine kurze Kennzahl („Über 300 Unternehmen nutzen X") oder ein einzelnes, prägnantes Testimonial können direkt unter dem Hero-Bereich platziert werden — noch im sichtbaren Bereich oder knapp darunter als erster Scroll-Anreiz.
Wichtig ist dabei die Qualität der Vertrauenssignale. Unbekannte Logos ohne Kontext helfen wenig. Logos bekannter Unternehmen oder eine konkrete Zahl mit Kontext wirken deutlich stärker. Wie Social Proof systematisch und glaubwürdig eingesetzt wird, erklärt Social Proof richtig einsetzen — Testimonials, Logos, Case Studies ausführlich.
Die häufigsten Fehler Above the Fold im B2B
Die meisten Probleme im ersten Viewport lassen sich auf wenige, wiederkehrende Muster zurückführen:
- Zu viele konkurrierende Elemente: Wenn alles wichtig ist, ist nichts wichtig. Mehrere CTAs, animierte Banner und drei verschiedene Wertversprechen gleichzeitig überfordern Besucher.
- Langsame Ladezeit: Google Core Web Vitals messen unter anderem den Largest Contentful Paint (LCP) — also wie schnell das größte sichtbare Element geladen wird. Ein LCP über 2,5 Sekunden schadet sowohl SEO als auch Conversion. Große Hero-Bilder ohne Komprimierung sind ein häufiger Auslöser.
- Kein klares Wertversprechen: Viele B2B-Websites kommunizieren Above the Fold, was sie sind, statt was sie für den Besucher leisten. „Wir sind eine Softwareagentur" ist keine Positionierung.
- Mobile wird nachrangig behandelt: Designs, die für Desktop optimiert werden und dann auf Mobile „angepasst" werden, verlieren Above the Fold oft die wichtigsten Elemente. Mobile-first Thinking ist hier keine Option, sondern Pflicht.
- Ablenkende Animationen: Autoplay-Videos, bewegte Hintergründe und komplexe Einblend-Animationen verlangsamen die Seite und lenken vom eigentlichen Inhalt ab. Was im Webdesign-Trend-Kontext als modern gilt, ist im Conversion-Kontext oft kontraproduktiv.
Above the Fold auf Landingpages — strengere Regeln als auf der Homepage
Auf einer Landingpage gelten schärfere Anforderungen als auf der Homepage. Landingpages haben in der Regel eine einzige Aufgabe — eine Conversion zu erzeugen. Das bedeutet: Kein Navigationsmenu, das ablenkt. Kein zweiter CTA, der Aufmerksamkeit teilt. Nur das, was den Besucher zur gewünschten Handlung führt.
Above the Fold auf einer Landingpage sollte enthalten: die Headline mit dem spezifischen Versprechen der Kampagne, ein visuelles Element, das das Angebot greifbar macht, einen einzigen CTA und — wenn vorhanden — ein starkes Vertrauenssignal. Mehr ist selten besser. Die Anatomie hochkonvertierender Landingpages geht auf diese Struktur im Detail ein.
Above the Fold testen — wie man weiß, ob es funktioniert
Intuition ist kein Ersatz für Daten. Folgende Methoden liefern valide Erkenntnisse über die Performance des ersten Viewports:
Heatmaps und Scroll-Maps
Tools wie Hotjar oder Microsoft Clarity zeigen, wie weit Besucher scrollen und wo sie klicken. Wenn die Mehrheit der Besucher nicht über den ersten Viewport hinausscrollt, ist das ein klares Signal: Entweder ist das Angebot nicht relevant für die Zielgruppe, oder der erste Viewport kommuniziert nicht überzeugend genug, dass sich weiterlesen lohnt.
A/B-Tests
Headline-Varianten, CTA-Formulierungen und visuelle Elemente lassen sich mit Tools wie Google Optimize (inzwischen eingestellt, Nachfolger: Google Analytics 4 Experiments) oder VWO systematisch testen. Wichtig: Immer nur eine Variable gleichzeitig testen, sonst sind die Ergebnisse nicht interpretierbar.
Five-Second-Test
Der Five-Second-Test ist eine einfache qualitative Methode: Testpersonen sehen die Seite fünf Sekunden lang und werden danach gefragt, was sie gesehen haben und was das Unternehmen anbietet. Wenn die Antworten unscharf oder falsch sind, ist das Wertversprechen Above the Fold nicht klar genug.
Homepage vs. Produktseite — unterschiedliche Anforderungen
Die Anforderungen an den ersten Viewport variieren je nach Seitentyp. Auf der Homepage geht es darum, das Gesamtangebot zu positionieren und den richtigen Besucher in die richtige Richtung zu lenken. Die B2B Homepage Struktur zeigt, wie dieser Bereich in eine konvertierende Gesamtstruktur eingebettet wird.
Auf einer Produktseite ist der Fokus enger: Das spezifische Produkt steht im Mittelpunkt, der CTA ist direkter, und Vertrauenssignale beziehen sich idealerweise auf dieses Produkt. Auf einer Pricing Page wiederum muss Above the Fold sofort Orientierung geben — welche Optionen gibt es, für wen, in welchem Preisrahmen. Wie das konkret umgesetzt wird, beschreibt Pricing Page Design — wie Preise transparent und konversionsstark dargestellt werden.
Die technische Grundlage — Performance ist kein Bonus
Ein perfekt gestalteter Above-the-Fold-Bereich nützt wenig, wenn er langsam lädt. Google bewertet mit den Core Web Vitals explizit, wie schnell der sichtbare Bereich einer Seite bereitgestellt wird. Der LCP sollte unter 2,5 Sekunden liegen, der Cumulative Layout Shift (CLS) unter 0,1 — das bedeutet, Elemente dürfen sich nach dem Laden nicht verschieben, was besonders bei Bildern ohne definierte Dimensionen passiert.
Praktische Maßnahmen: Hero-Bilder im WebP-Format ausliefern, mit loading='eager' und fetchpriority='high' priorisieren, und kritisches CSS inline einbinden, damit der Browser den ersten Viewport ohne zusätzliche Netzwerkanfragen rendern kann. Die Wahl der Plattform beeinflusst, wie viel Kontrolle über diese Parameter besteht — ein Vergleich findet sich in Webflow vs. Framer vs. WordPress — die richtige Plattform für B2B-Websites.
Above the Fold ist kein Designproblem — es ist ein Kommunikationsproblem mit technischen Randbedingungen. Wer diesen Bereich systematisch optimiert, legt die Grundlage für alles, was danach kommt.