Above the Fold ist der Bereich einer Seite, der ohne Scrollen sichtbar ist. Der Begriff stammt aus dem Zeitungssatz: Bei einer gefalteten Tageszeitung ist nur die obere Hälfte der Titelseite zu sehen, und dort steht die wichtigste Nachricht.
- Above the Fold im Layout
Der Bereich einer Seite, der ohne Scrollen sichtbar ist.
Beispiel: „Above the Fold stehen die Überschrift, ein Satz zum Angebot und die Schaltfläche zum Termin.“Auch: Above the Fold oder sichtbarer Bereich. Das Gegenstück heißt Below the Fold.
Abgrenzung zum Viewport: Der Viewport ist der sichtbare Ausschnitt des Fensters. Above the Fold ist der Teil der Seite, der beim ersten Aufruf in diesem Ausschnitt liegt.
Wie groß der erste Bildschirm ist
Es gibt keine feste Höhe. Je nach Gerät, Fenstergröße und Browserleisten liegt die Grenze zwischen rund 550 und 950 Pixeln, auf dem Smartphone oft bei 600 bis 700. Wer eine bestimmte Höhe ausrechnet und darauf gestaltet, baut für ein Gerät statt für alle.
Dazu kommt, dass auf dem Smartphone ein Hinweisfenster zur Einwilligung häufig den ganzen ersten Bildschirm belegt. Was dahinter liegt, ist faktisch erst nach einem Klick sichtbar.
Was tatsächlich hineingehört
Drei Dinge: woran der Besucher erkennt, wo er gelandet ist, was dort angeboten wird und wie es weitergeht. Das sind in aller Regel eine Überschrift, ein bis zwei Sätze und eine Schaltfläche. Alles andere darf darunter stehen.
Technisch zählt dieser Bereich doppelt: Das größte Element darin ist meist der Largest Contentful Paint, einer der Core Web Vitals. Ein großes Hero-Bild entscheidet damit zugleich über den gemessenen Seitenaufbau.
Warum das Scrollen kein Hindernis ist
Die alte Regel, alles Wichtige müsse oben stehen, stammt aus einer Zeit, in der Scrollen ungewohnt war. Heute scrollen Besucher sofort und von selbst. Entscheidend ist, dass der erste Bildschirm zum Weiterlesen einlädt und nicht wie das Ende der Seite aussieht.
Aus unserer Arbeit an über 2.500 Website-Projekten ist der häufigste Fehler die randlose Bildfläche, die exakt den ersten Bildschirm füllt. Sie sieht aus wie die ganze Seite, und ein Teil der Besucher scrollt deshalb gar nicht erst.