3 häufige Above-the-Fold-Fehler, die Conversions killen
Unklare Value Proposition
Besucher sehen ein generisches Hero-Bild, aber verstehen nicht sofort: Was bietest du an? Für wen ist es? Warum sollte ich bleiben? Ergebnis: 60-70% Bounce Rate.
Kein CTA sichtbar
Der primäre Call-to-Action ist erst nach dem Scrollen sichtbar. 80% der Besucher sehen ihn nie und verlassen die Seite, ohne zu wissen, was sie tun sollen.
Zu viel Inhalt Above the Fold
Navigation, Slider, 5 Boxen, 3 CTAs – der Besucher ist überfordert. Das Auge weiß nicht, wo es hinschauen soll. Paradoxerweise führt weniger Content zu mehr Conversions.
Was ist Above the Fold? Definition und Bedeutung
Above the Fold bezeichnet den Bereich einer Website, der ohne Scrollen sichtbar ist. Der Begriff stammt aus der Zeitungsbranche: Die wichtigsten Schlagzeilen standen "über der Falz" der gefalteten Zeitung.
Im Web ist der Above-the-Fold-Bereich device-abhängig:
- Desktop (1920×1080): ca. 900px Höhe (minus Browser-UI)
- Laptop (1366×768): ca. 600px Höhe
- Tablet (iPad): ca. 900px Höhe (hochkant)
- Mobile (375px breit): ca. 667px Höhe (iPhone SE)
Die 3-Sekunden-Regel
Studien zeigen: Besucher entscheiden innerhalb von 3 Sekunden, ob sie auf deiner Seite bleiben oder abspringen. Was sie Above the Fold sehen, ist diese Entscheidungsgrundlage.
Warum Above the Fold so wichtig ist
Eye-Tracking-Studien belegen:
- 80% der Aufmerksamkeit konzentriert sich auf den Above-the-Fold-Bereich
- 57% der Page Views beinhalten kein Scrollen
- 74% der Aufmerksamkeit in den ersten 2 Screenful (2× Bildschirmhöhe)
Fazit: Wenn deine wichtigsten Botschaften und der primäre CTA nicht Above the Fold sind, erreichst du nur einen Bruchteil deiner Besucher.
Die 7 Elemente einer perfekten Above-the-Fold-Sektion
1. Klare, spezifische Headline
Die Headline sollte in 5 Sekunden kommunizieren:
- Was bietest du an?
- Für wen ist es?
- Welchen Hauptnutzen liefert es?
Beispiel Schlecht:
"Willkommen bei unserem Service"
Beispiel Gut:
"Finde in 20 Minuten deine größten Conversion-Killer und erhalte konkrete Lösungen"
2. Unterstützende Subheadline
Die Subheadline ergänzt die Headline mit zusätzlichem Kontext oder dem Hauptnutzen:
"KI-gestütztes Webseiten-Audit für E-Commerce & SaaS. Keine Installation, keine Analytics-Anbindung, Ergebnisse in 20 Minuten."
3. Primärer CTA – prominent und deutlich
Der wichtigste Call-to-Action MUSS Above the Fold sein. Anforderungen:
- Leuchtende Kontrastfarbe (hebt sich vom Rest ab)
- Groß genug (min. 200px × 50px Desktop, 48px Touch-Target Mobile)
- Wertorientierter Text (nicht "Mehr erfahren", sondern "Jetzt 47€ sparen")
- Umgeben von Whitespace (lenkt Aufmerksamkeit)
4. Trust Signals (Social Proof)
Besucher vertrauen deiner Seite nicht automatisch. Trust Signals Above the Fold reduzieren Unsicherheit:
- Kundenbewertungen / Sterne-Rating ("4.8/5 aus 2.400 Bewertungen")
- Bekannte Kunden-Logos ("Vertraut von Mercedes, BMW, Porsche")
- Nutzerzahlen ("Über 10.000 Unternehmen nutzen CROMATIX")
- Sicherheitssiegel / Zertifizierungen (bei sensiblen Daten)
5. Hero-Bild oder Produktvisualisierung
Visuelle Elemente Above the Fold sollten:
- Produkt zeigen: Screenshot, Demo-Video, Mockup
- Kontext schaffen: Zeige das Produkt in Anwendung
- Nicht ablenken: Vermeide generische Stock-Fotos
Faustregel: 60% Text/CTA, 40% Bild im Above-the-Fold-Bereich.
6. Risk-Reversal-Elemente
Eliminiere wahrgenommenes Risiko direkt Above the Fold:
- "Kostenlos testen – Keine Kreditkarte erforderlich"
- "14 Tage Geld-zurück-Garantie"
- "Jederzeit kündbar"
- "SSL-verschlüsselt, DSGVO-konform"
7. Scroll-Indicator (optional)
Ein subtiler Hinweis, dass mehr Content folgt (z.B. animierter Pfeil nach unten, "Mehr erfahren" am unteren Bildschirmrand). Erhöht die Scroll-Rate um 10-20%.
4 Above-the-Fold-Layouts, die funktionieren
Klassisches Hero-Layout
Links: Headline + Subheadline + CTA + Trust Signals (60% Breite). Rechts: Hero-Bild / Produkt-Screenshot (40%). Das Standard-Layout für SaaS und B2B. Conversion-Rate: Hoch, da Text-fokussiert.
Zentriertes Hero
Headline + Subheadline + CTA zentriert, Hero-Bild als Hintergrund oder darunter. Funktioniert gut für consumer-facing Produkte mit starkem visuellen Appeal (Apps, E-Commerce). Clean und fokussiert.
Video-Hero
Auto-Play-Video (stumm) als Hintergrund, Text-Overlay mit Headline + CTA. Sehr aufmerksamkeitsstark, aber Vorsicht: Kann ablenken. Nutze Videos nur, wenn sie das Produkt erklären.
Benefits-Grid Above the Fold
Nach Headline + CTA folgen direkt 3 Haupt-Benefits in Icon-Boxen (noch Above the Fold). Funktioniert bei komplexeren Produkten, wo mehrere Argumente nötig sind. Mehr Inhalt = mehr Scroll-Motivation.
Above the Fold optimieren in 3 Schritten
Ist-Zustand messen
Öffne deine wichtigsten Landing Pages auf verschiedenen Devices (Desktop 1920px, Laptop 1366px, Tablet, Mobile) und prüfe:
- Ist die Headline Above the Fold lesbar?
- Ist der primäre CTA ohne Scrollen sichtbar?
- Sind Trust Signals (Bewertungen, Logos) sichtbar?
- Ist die Value Proposition klar oder generisch?
- Wie viel Prozent des sichtbaren Bereichs nimmt die Navigation ein?
Tools wie CROMATIX automatisieren diese Analyse für Desktop und Mobile gleichzeitig.
Priorisierte Optimierungen umsetzen
Diese Änderungen haben den größten Impact:
- CTA Above the Fold platzieren: Falls nicht sichtbar, ist das deine #1-Priorität
- Headline konkretisieren: Generische Headlines durch wertorientierte ersetzen
- Navigation verkleinern: Sticky Navigation sollte max. 60px hoch sein
- Trust Signals hinzufügen: Bewertungen, Kundenzahl oder Logos Above the Fold
- Whitespace erhöhen: Weniger Elemente = mehr Fokus auf CTA
Eine gut optimierte Above-the-Fold-Sektion kann die Bounce Rate um 30-50% senken.
Mobile-First-Optimierung
50-70% deines Traffics kommt von Mobile. Above-the-Fold-Mobile ist kleiner und erfordert andere Prioritäten:
- Kürzere Headlines: Max. 8-10 Wörter auf Mobile
- Sticky CTA-Button: Floating Button unten rechts, bleibt beim Scrollen sichtbar
- Hamburger-Menü: Navigation einklappen, um Platz zu sparen
- Weniger Text Above the Fold: 2-3 Sätze statt Absätze
Teste deine Mobile-Ansicht regelmäßig – nicht nur im Browser-Devtool, sondern auf echten Geräten.
Wie CROMATIX dein Above the Fold optimiert
Automatische Above-the-Fold-Analyse (Desktop + Mobile)
CROMATIX analysiert beide Viewports gleichzeitig und zeigt, welche kritischen Elemente (CTA, Headline, Trust Signals) nicht sichtbar sind.
Value-Proposition-Klarheit-Score
CROMATIX bewertet, wie klar deine Headline das Wertversprechen kommuniziert. Score 0-100 plus konkrete Verbesserungs-Vorschläge.
CTA-Sichtbarkeits-Prüfung
Ist dein primärer CTA Above the Fold? Falls nicht, schlägt CROMATIX optimale Platzierungen vor (z.B. "CTA 200px nach oben verschieben").
Trust-Signal-Analyse
CROMATIX prüft, ob Trust-Elemente (Bewertungen, Logos, Siegel) Above the Fold vorhanden sind. Falls nicht, erhältst du Empfehlungen, welche Trust Signals am stärksten wirken.
Layout-Empfehlungen
Basierend auf deiner Branche und Zielgruppe schlägt CROMATIX das optimale Above-the-Fold-Layout vor (Hero links/rechts, zentriert, Video-Hero, etc.).
Häufige Fragen zu Above-the-Fold-Optimierung
Sollte wirklich ALLES Above the Fold sein?
Nein. Die wichtigsten Elemente müssen Above the Fold sein: Headline, primärer CTA, Haupt-Trust-Signal. Zu viel Inhalt Above the Fold überfordert Besucher. Nutze den Below-the-Fold-Bereich für Details, Features, FAQs. Ein guter Scroll-Indicator motiviert engagierte Besucher zum Weiterlesen.
Wie wichtig ist Above the Fold auf Mobile?
Kritisch. Mobile-Nutzer sind ungeduldig und scrollen noch weniger als Desktop-Nutzer. Studien zeigen: 90% der mobilen Nutzer scrollen nicht über den ersten Screen hinaus. Deine Mobile-Above-the-Fold-Sektion sollte absolut minimalistisch sein: Headline (max. 8 Wörter), CTA, minimale Trust Signals. Alles andere: Below the Fold.
Welche Höhe sollte die Navigation haben, um Above-the-Fold-Raum zu maximieren?
Desktop: Max. 60-80px. Mobile: Max. 56px oder Hamburger-Menü (collapsed). Mega-Navigationen mit 120px+ verschwenden wertvollen Above-the-Fold-Raum. Alternative: Sticky Header, der beim Scrollen nach oben kleiner wird (von 80px auf 50px). So sparst du Platz, ohne Navigation zu verlieren.