Ist „above the fold“ noch relevant, wenn alle scrollen?

Ja. Viele Nutzer entscheiden in den ersten Sekunden, ob die Seite relevant ist; der sichtbare Bereich ohne Scroll bleibt das erste Filtergitter. Scrollen hilft – wenn der Einstieg klar genug ist, dass sich der Scroll lohnt.

Was ist der Unterschied zwischen Above the fold und Hero-Section?

„Above the fold“ beschreibt den sichtbaren Viewport. Die Hero-Section ist oft der erste große Block darin: Headline, Subline, ggf. Visual und primärer CTA. Nicht jede Seite braucht eine klassische Hero-Fläche, aber fast jede braucht im ersten Bildschirm Klarheit.

Wie viel Text gehört above the fold?

So viel wie nötig für eine klare Value Proposition – nicht mehr. Lange Absätze im ersten Bildschirm überfrachten; Details und Proof können direkt darunter folgen, wenn der Nutzen oben erkennbar ist.

Wie hängt das mit Core Web Vitals zusammen?

Wenn LCP (größtes sichtbares Element) und CLS (Layout-Sprünge) schlecht sind, erreicht der Nutzer Ihre Kernaussage später oder unstabil – das wirkt wie schlechte UX. Deshalb gehören Bildgrößen, Schriftlade und reservierte Flächen zur Hero-Planung dazu.

Above the fold & Hero-Section

Kurz zusammengefasst: Above the fold bezeichnet den Bereich einer Webseite, den Nutzer ohne Scroll sehen. Dort muss erkennbar werden, ob Angebot und Seite zu ihrer Intention passen – in der Regel über Headline, Nutzen, optional Proof und einen klaren Value Proposition-Aufbau.

Der Begriff kommt aus Print (Zeitungsfalz) und ist im Web ein Modell: Tatsächliche Viewports unterscheiden sich stark (Handy, Tablet, Desktop). Entscheidend ist nicht ein fixer Pixelwert, sondern dass Kernbotschaft und nächster Schritt im ersten Bildschirm erkennbar sind – auf Startseite wie auf Landingpage. Struktur und Copy vertiefen Sie im Wissen-Playbook Landingpage.

Was bedeutet „above the fold“?

Im Web: der sichtbare Bereich beim ersten Laden, ohne zu scrollen. Nutzer scannen ihn in Sekundenbruchteilen: Passt die Seite zur Suchanfrage, zur Anzeige oder zum Link, den sie geklickt haben? Wenn nicht, steigt die Absprungrate – unabhängig davon, wie gut der Rest der Seite ist.

Hero-Section: typische Bausteine

Die Hero-Section fasst oft zusammen:

Headline & Subline: Problem, Outcome oder Nutzen – siehe Value Proposition.
Primärer CTA: eine Handlung, sprachlich zum Versprechen passend.
Visual: Produkt, Kontext, Team – soll die Aussage stützen, nicht dekoriert wirken.
Proof-Signal (optional): kurzes Logo-Band, Kennzahl oder Zitat, wenn Vertrauen der Engpass ist.

Checkliste für den sichtbaren Bereich

Aussage: In einem Satz klar: Für wen ist das – und welches Ergebnis versprechen Sie?
Proof: Mindestens ein glaubwürdiges Signal (Logo, Zahl, Testimonial), wenn der Nutzen allein nicht reicht.
CTA: Sichtbar und verständlich; auf Mobile ggf. sticky, ohne andere Inhalte zu überdecken.
Visual: LCP-freundlich gewichtet (kein riesiges unkomprimiertes Bild ohne Priorität); Responsive Design geprüft.
Accessibility: Kontrast, fokussierbare Buttons, keine rein iconbasierten CTAs ohne Text.

Performance & LCP

Ihre Headline nützt wenig, wenn das größte sichtbare Element (oft Hero-Bild oder große Schrift) erst spät stabil erscheint. Core Web Vitals (insbesondere LCP und CLS) sind deshalb eng mit dem ersten Bildschirm verknüpft: Bilder dimensionieren, Platz reservieren, Schriften ohne Layout-Sprung laden.

Häufige Fragen

Lexikon von deine Medienberatung Hamburg – Fokus auf Hero, Messaging und messbare UX.

Kontakt aufnehmen

Lexikon Übersicht · Value Proposition · Startseite & Homepage · Landingpage · Wissen: Landingpage-Playbook · Wissen: Formulare auf Landingpages · Webdesign Agentur · Kontakt