Design

Above the Fold

"Above the Fold" bezeichnet den Bereich deiner Website, der ohne Scrollen sichtbar ist — also alles, was ein Besucher sofort sieht, wenn die Seite geladen ist. Der Begriff stammt aus der Zeitungsbranche und ist bis heute der wichtigste Quadratzentimeter im Web.

Lesezeit 3 Min Kategorie Design

Was bedeutet Above the Fold?

Der Begriff kommt aus dem Druckbereich. Eine Tageszeitung wird traditionell in der Mitte gefaltet — und alles, was über dieser Faltkante steht, ist das, was am Kiosk im Auslagestapel sichtbar ist. Genau dort platzieren Zeitungsmacher seit Jahrzehnten die wichtigste Schlagzeile, das stärkste Foto, das größte Versprechen. Wer hier nicht überzeugt, wird nicht gekauft.

Im Web funktioniert das Prinzip gleich, nur ohne Papier. Wenn jemand deine Seite öffnet, sieht er einen begrenzten Bildschirmausschnitt — den Viewport. Alles, was in diesem Ausschnitt sichtbar ist, bevor er scrollt, ist "above the fold". Alles darunter ist "below the fold". Diese Linie ist nicht fix: Sie hängt von Bildschirmgröße, Auflösung und Gerät ab. Auf einem 27-Zoll-Monitor liegt sie tiefer als auf einem iPhone.

Was hier liegt, hat den Vorzug der vollen Aufmerksamkeit. Was darunter liegt, lebt davon, dass jemand bewusst weiterscrollt — und das tun längst nicht alle.

Was gehört above the fold?

Nicht alles muss nach oben. Aber das Wichtigste sollte da sein. Eine pragmatische Liste:

  • Ein klares Versprechen in der Headline der Hero Section — was bietest du, für wen?
  • Ein eindeutiger nächster Schritt als Button oder Link — Termin, Angebot, Anruf, Download.
  • Visuelles Vertrauenssignal — ein echtes Foto, ein Auszeichnungs-Logo, eine Sterne-Bewertung.
  • Eine sichtbare Navigation — damit klar ist, dass es eine Struktur gibt.
  • Optional: ein erklärender Halbsatz, der die Headline schärft.

Was nicht above the fold gehört: lange Texte, Slider mit fünf Botschaften, Cookie-Banner, die alles überdecken, generische Stockfotos ohne Aussage. Jedes überflüssige Element verdrängt das Wesentliche und kostet Aufmerksamkeit.

Warum ist Above the Fold heute noch relevant?

Vor Jahren wurde der Begriff totgesagt. Argument: Heute scrollt doch jeder. Stimmt — und stimmt nicht. Studien zur Aufmerksamkeitsverteilung zeigen seit langem dasselbe Muster: Im sichtbaren Bereich verbringen Nutzer mit Abstand die meiste Zeit, manchmal mehr als 80 Prozent ihrer Verweildauer. Was ganz oben steht, wird gesehen. Was darunter liegt, wird nur überflogen oder ignoriert.

Dazu kommt: Die meisten Besucher kommen heute vom Smartphone. Auf einem 6-Zoll-Display ist der "Fold" winzig. Dein Logo, die Hauptnavigation und der erste Headline-Satz fressen ihn fast komplett auf. Wer da nicht messerscharf priorisiert, verschwendet seine wertvollste Bühnenfläche.

Beispiel: Ein Restaurant in Hannover lässt seine Website überarbeiten. Vorher liegt above the fold ein riesiges Bild vom Sonnenuntergang über der Leine — schön, aber nichtssagend. Nachher steht da: Restaurantname, Hinweis auf saisonales Menü, ein Button "Tisch reservieren". Reservierungen über die Website verdoppeln sich innerhalb weniger Wochen.

Above the Fold und Performance

Ein zweiter, oft übersehener Aspekt: Performance. Above-the-Fold-Inhalte müssen besonders schnell laden, weil sie das sind, was der Besucher zuerst sieht. Google misst das in den Core Web Vitals als LCP — Largest Contentful Paint. Je langsamer dein Hero-Bild oder deine Headline rendert, desto schlechter dein SEO-Ranking, desto höher die Absprungrate.

Praktische Konsequenzen für dein Webdesign:

  1. Hero-Bilder müssen optimiert sein. Riesige unkomprimierte JPEGs oben auf der Seite sind tabu.
  2. Schriften sollten vorgeladen werden. Sonst springt der Text beim Laden, und der erste Eindruck wackelt.
  3. Render-blockierende Skripte unterhalb der Hero verschieben. Tracking, Chat-Widgets und Analytics erst, wenn der Hauptinhalt steht.
  4. Mobile First denken. Was auf dem Handy oben sichtbar ist, hat Priorität — nicht das, was auf dem Designer-Monitor schick aussieht.

Häufige Mythen rund um Above the Fold

"Heute scrollt sowieso jeder, der Begriff ist tot." Falsch. Aufmerksamkeit konzentriert sich nach wie vor stark auf den sichtbaren Bereich. Wer sich darauf verlässt, dass Nutzer schon weiterscrollen, verliert die meisten.

"Above the Fold gibt es nicht mehr, weil jedes Gerät anders ist." Stimmt halb. Die genaue Pixelgrenze schwankt — aber der Effekt bleibt. Auf jedem Gerät ist der erste Blick begrenzt, und auf jedem Gerät zählt er.

"Ich brauche möglichst viel above the fold." Nein. Mehr ist nicht besser. Ein klares Element schlägt fünf konkurrierende. Wer drei Buttons in den Hero packt, hat keinen Hauptbutton mehr.

"Im Mobile-Webdesign ist das egal." Im Gegenteil — auf dem Smartphone ist es wichtiger denn je. Der Bildschirm ist klein, der Konkurrenzdruck der Apps groß.

Ähnliche Begriffe

SEO

Backlink

Ein Backlink ist ein Link, der von einer fremden Website auf deine Website zeigt. Für Google ist jeder Backlink eine Emp…

Weiterlesen →
Design

Footer

Der Footer ist der unterste Bereich deiner Website — der Abschluss jeder Seite. Er sieht aus wie ein Anhängsel, ist aber…

Weiterlesen →
HTML/CSS/Code

HTML

HTML ist die Sprache, in der jede Website geschrieben ist. Sie legt fest, was auf einer Seite steht — Überschriften, Tex…

Weiterlesen →
Cookie Consent mit Real Cookie Banner