Above the Fold: Was Besucher zuerst sehen

Above the Fold bezeichnet den Bereich einer Website, der beim ersten Laden ohne Scrollen sichtbar ist – der erste Eindruck, der über Bleiben oder Verlassen entscheidet.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Einsteiger Synonyme / Auch bekannt als: Hero-Bereich, Above-the-Fold-Content, Viewport-Bereich, Initial Viewport

Was ist Above the Fold?

Der Begriff stammt aus dem Zeitungsdruck: Die obere Hälfte einer gefalteten Zeitung – das, was am Kiosk sichtbar ist, ohne die Zeitung aufzuschlagen – heißt "above the fold". Im Web übertragen: alles, was ohne Scrollen sichtbar ist, wenn eine Seite geladen wird.

Das ist die wichtigste Fläche einer Website. Studien der Nielsen Norman Group zeigen, dass Nutzer mehr Zeit mit Inhalten above the fold verbringen als mit dem Rest der Seite. Laut einer Eyetracking-Studie von 2018 entfällt etwa 80 % der Aufmerksamkeit auf den above-the-fold-Bereich (Nielsen Norman Group, 2018).

Erklärung

Größe und Variabilität

Es gibt keine feste Größe für "above the fold" – sie variiert stark je nach Gerät, Bildschirmauflösung, Browser-Einstellungen und installierten Toolbars:

• Smartphone (375 × 812 px): Der sichtbare Bereich nach Abzug von Browser-Chrome ca. 600–700 px hoch
• Laptop (1440 × 900 px): Ca. 700–800 px abzüglich Browser-Toolbar
• Desktop-Monitor (1920 × 1080 px): Ca. 900 px und mehr

Das bedeutet: Es gibt keinen universellen "Fold". Designer müssen für die relevanteste Zielgruppe optimieren – und da Mobile First: Design-Philosophie sinnvoll ist, ist der Smartphone-Viewport meist die Priorität.

Was gehört above the fold?

Pflicht:

• Logo und Navigation: Marke und Orientierung
• Klare Hauptaussage: Wer ist das? Was bieten sie an? In einem Satz.
• Primäre Handlungsaufforderung (CTA): Der nächste Schritt für den Nutzer
• Visuelle Unterstützung: Bild, Illustration oder Video, das die Botschaft verstärkt

Optional:

• Trust-Signale: Kundenbewertungen, Awards, Logos
• Value Proposition Summary: 2–3 kurze Kernvorteile

Nicht nötig:

• Zu viele Informationen: Above the fold ist nicht für Vollständigkeit, sondern für den ersten Impuls

Die Rolle des Hero-Bilds

Das Hero-Bild ist das dominante visuelle Element des above-the-fold-Bereichs. Es hat enorme Wirkung auf den ersten Eindruck und auf technische Metriken: Das Hero-Bild ist fast immer das LCP-Element (Largest Contentful Paint) – das größte, sichtbare Element beim Laden. Page Speed und Core Web Vitals: Was Designer wissen müssen und Bildoptimierung für Web: WebP, AVIF, Lazy Loading erklären, warum ein optimal eingebundenes Hero-Bild für Performance entscheidend ist.

Strategien für Hero-Bilder:

• Produkt oder Ergebnis zeigen: Nutzer wollen sehen, was sie bekommen
• Emotion transportieren: Menschen auf Bildern erzeugen emotionale Resonanz
• Hintergrund für Text: Das Bild darf den Text nicht erschweren – ausreichender Kontrast sicherstellen (Barrierefreiheit im Web (WCAG 2.2) für Designer)

Die Fold-Illusion

Ein häufiger Denkfehler: "Niemand scrollt." Das stimmt nicht. Zahlreiche Studien belegen, dass Nutzer scrollen – aber nur, wenn das above-the-fold-Design ausreichend Interesse weckt. Der above-the-fold-Bereich ist ein Versprechen: "Wenn du weiterscrollst, gibt es mehr Relevantes."

Signals, die zum Scrollen animieren:

• Visueller Teaser: Ein Bild, das am Rand angeschnitten ist, signalisiert Inhalt unterhalb
• Scroll-Hinweis: Ein nach unten zeigender Pfeil oder eine Animation
• Anfang von Content: Ein Fließtext, der mitten im Satz abbricht

Unterschied zwischen Full-Screen-Hero und normalem Header

Full-Screen-Hero: Das Design füllt den gesamten Viewport (100 vh). Dramatisch, gut für Image-Seiten und Kampagnen. Herausforderung: Nutzer müssen scrollen, um den eigentlichen Inhalt zu erreichen.

Kompakter Header: Navigation + Hero-Section nimmt nur einen Teil des Viewports ein, darunter beginnt sofort Content. Effizienter für informationsschwere Seiten.

Beispiele

SaaS-Produkt: Headline ("Schreibe bessere Texte in der Hälfte der Zeit"), Sub-Headline, Button "Kostenlos testen", Screenshot des Produkts im Hero. Darunter beginnt sofort die Feature-Liste.

Agentur-Website: Full-Screen-Hero mit einem Showreel-Video im Hintergrund, Agenturname, ein Claim, CTA "Projekte ansehen". Scroll-Indikator.

E-Commerce Startseite: Promotionsbanner (aktuelles Angebot) direkt above the fold mit CTA, Navigation prominent. Kein langer Intro-Text.

Blog/Magazin: Kategorien-Navigation, großes Feature-Artikel-Bild mit Headline, daneben zwei kleinere Artikel. Sofortiger Inhalt, kein Marketing-Text.

In der Praxis

Design-Workflow

In Figma wird der above-the-fold-Bereich durch einen Frame definiert, der der Viewport-Größe des Zielgeräts entspricht. Empfohlene Frames für den Start:

• Mobile: 375 × 812 px (iPhone 14), sichtbarer Bereich ca. 690 px
• Desktop: 1440 × 900 px (Standard-Laptop), sichtbarer Bereich ca. 800 px

Messbarkeit mit Heatmaps

Heatmaps und Scrollmaps: Design datengestützt verbessern zeigt, wie Scroll-Heatmaps zeigen, wie weit Nutzer tatsächlich scrollen. Diese Daten informieren, welche Inhalte "über den Fold" wandern sollten.

Performance above the fold

Elemente above the fold müssen prioritär geladen werden:

• Hero-Bild: kein loading="lazy", im Gegenteil: fetchpriority="high"
• Kritische Schriften: font-display: swap oder preloaden (Webfonts: Einbindung, Performance, Lizenzen)
• Kein Render-blocking durch große Skripte

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Muss alles Wichtige above the fold sein? Das Wichtigste: ja. Aber nicht alles kann above the fold passen – und das soll auch nicht der Anspruch sein. Der above-the-fold-Bereich soll zum Scrollen motivieren, nicht alles auf einmal zeigen.

Was ist die "beste" Viewport-Höhe für einen Full-Screen-Hero? 100svh (small viewport height, CSS Level 4) ist die modernste Lösung: Sie berücksichtigt die sich verändernde Browser-Chrome-Höhe auf Mobilgeräten. 100vh kann auf Smartphones zu groß sein.

Macht ein Video-Background above the fold Sinn? Visuell wirkungsvoll, aber performance-technisch aufwendig. Nur mit stark komprimiertem Video, kein Autoplay mit Ton (schlechte UX), immer mit stillem Fallback-Bild.

Verwandte Einträge

• Landing Page Design: Conversion-optimierte Layouts – Above the Fold als konversionskritischer Bereich
• Page Speed und Core Web Vitals: Was Designer wissen müssen – LCP und Heroimage-Performance
• Bildoptimierung für Web: WebP, AVIF, Lazy Loading – Heroimage-Optimierung
• Heatmaps und Scrollmaps: Design datengestützt verbessern – Scroll-Verhalten messen
• Mobile First: Design-Philosophie – Above the Fold auf Mobilgeräten
• Barrierefreiheit im Web (WCAG 2.2) für Designer – Kontrast im Hero-Bereich
• Scroll-Design: Parallax, Scrollytelling, Sticky Elements – Was unterhalb des Folds passiert

Weiterführend

• Nielsen Norman Group (2018). Scrolling and Attention.
• Chartbeat (2019). Attention Web: Understanding the Power of Scroll and Time on Site.
• Lidwell, W. et al. (2010). Universal Principles of Design. Rockport Publishers.
• Google Search Console (2024). Page Experience.
• Krug, S. (2014). Don't Make Me Think, Revisited. 3. Aufl. New Riders.