Zeitungsredakteure wussten das lange vor dem Web. Die lesenswerte Geschichte kommt über den physischen Falz. Alles darunter konkurriert mit der Entscheidung, umzublättern. Auf einer Website gilt dasselbe Prinzip für den ersten sichtbaren Bereich, den ein Besucher vor dem Scrollen sieht.
Above the Fold bezeichnet den Teil einer Webseite, der im Browserfenster sichtbar ist, wenn die Seite zum ersten Mal lädt, bevor der Besucher überhaupt scrollt. Es ist der einzige Bereich der Seite, den jeder Besucher sieht. Alles darunter muss sich das Scrollen verdienen. Der Begriff kommt aus dem Print: Eine in der Mitte gefaltete Zeitung am Kiosk zeigt nur die obere Hälfte der Titelseite. Diese obere Hälfte musste Aufmerksamkeit gewinnen. Der Bereich Above the Fold auf einer Website funktioniert genauso.
Was Above the Fold liegt, hängt vom Gerät, der Bildschirmgrösse und dem Browser jedes Besuchers ab. Ein grosser Desktop-Monitor zeigt viel mehr Inhalt oberhalb des Falzes als ein Smartphone im Hochformat. Wer für den Falz gestaltet, muss an alle denken, nicht nur an die Version auf dem eigenen Bildschirm.
Warum zählen Inhalte Above the Fold?
Untersuchungen zum Leseverhalten zeigen immer wieder, dass Besucher mehr Zeit mit Inhalten am oberen Seitenrand verbringen. Je weiter unten Inhalt steht, desto weniger Besucher erreichen ihn. Das ist kein Aufmerksamkeitsversagen, sondern eine vernünftige Reaktion auf begrenzte Zeit. Besucher urteilen schnell, ob eine Seite das Lesen wert ist, und dieses Urteil fällt im ersten sichtbaren Bereich.
Above the Fold beantwortest du die erste Frage des Besuchers: Bin ich hier richtig? Machen Überschrift, Bild und die ersten Zeilen Text die Antwort klar, scrollen Besucher weiter. Sind sie verwirrt oder unsicher, geben die meisten dem Rest der Seite keine Chance.
Was gehört Above the Fold?
Der Bereich Above the Fold hat wenig Platz und viel Gewicht. Jedes Element dort sollte seinen Platz verdienen, indem es dem Besucher dient oder das Ziel der Seite voranbringt.
Eine klare Überschrift, die sagt, worum es auf der Seite geht oder was der Besucher davon hat. Ein unterstützender Satz oder eine Unterzeile, die Kontext oder Konkretheit ergänzt. Ein Bild, das die Botschaft verstärkt, statt nur zu dekorieren. Ein Handlungsaufruf, der dem Besucher einen klaren nächsten Schritt bietet, wenn er schon überzeugt ist.
Die Navigation gehört Above the Fold. Besucher erwarten oben auf der Seite einen Weg, den Rest der Website zu erkunden, und ein versteckter oder verborgener Menüzugang erzeugt sofort Reibung. Der Artikel Was ist Website-Navigation? zeigt, wie du Menüs gestaltest, die auf allen Geräten gut funktionieren.
Nicht Above the Fold gehört alles, was Platz einnimmt, ohne zum Verständnis oder zur Entscheidung des Besuchers beizutragen. Grosse Dekobilder ohne Informationswert, rotierende Banner, die das Laden verzögern, oder Blöcke mit einleitendem Text, durch die der Besucher scrollen muss, bevor er zum Punkt kommt, verschwenden den wertvollsten Platz der Seite.
Wie unterscheidet sich Above the Fold auf dem Smartphone?
Auf dem Smartphone ist der Bereich Above the Fold deutlich kleiner als auf dem Desktop. Ein Smartphone-Bildschirm im Hochformat zeigt etwa 600 bis 800 Pixel Höhe. Ein Desktop-Monitor zeigt vielleicht 900 bis 1200 Pixel. Dasselbe Design kann am Desktop zwei oder drei Abschnitte oberhalb des Falzes zeigen, auf dem Smartphone dagegen nur eine Überschrift und ein Bild.
Praktisch heisst das: Mobile Besucher entscheiden auf den ersten Blick mit viel weniger Informationen, ob sie bleiben oder weiterscrollen, als Desktop-Besucher sehen. Was am wichtigsten ist, muss in ein kleineres Fenster passen. Hero-Bereiche mit grossen Hintergrundbildern und wenig Text sind ein häufiges Problem: Am Desktop wirken sie eindrucksvoll, auf dem Smartphone füllen sie den ganzen Bildschirm mit sehr wenig Inhalt, bevor der Besucher scrollen muss.
Das Testen von Above the Fold auf einem echten Smartphone ist wichtig, weil Browser-Vorschauen und Desktop-Simulationen nicht genau abbilden, was mobile Besucher sehen. Eine vollständige Checkliste für mobile Aspekte findest du im Artikel So machst du eine Website mobilfreundlich. Er zeigt, was du vor dem Livegang prüfst.
Beeinflusst Above the Fold die Seitengeschwindigkeit?
Direkt. Der Bereich Above the Fold ist das Erste, was der Browser darstellt. Jede Ressource, die seine Anzeige verzögert, schadet der gefühlten Ladezeit, selbst wenn der Rest der Seite schnell lädt.
Grosse Hero-Bilder, Webfonts, die vor der Textanzeige laden müssen, und Skripte, die vor dem Rendern der Seite laufen, schieben Inhalte Above the Fold nach unten. Aus Sicht des Besuchers lädt die Seite langsam, auch wenn die technische Ladezeit vernünftig ist. Ein leerer oder nur teilweise geladener Bereich Above the Fold, während der Rest der Seite aufholt, ist eine der häufigsten Ursachen für hohe Absprungraten bei sonst gut gestalteten Seiten.
Am wirksamsten sind ein optimiertes Hero-Bild, ein bevorzugtes Laden der Ressourcen Above the Fold und das Aufschieben nicht wesentlicher Skripte. Der Artikel Was ist Website-Geschwindigkeit? behandelt die technische Seite der Ladeleistung und was sie am stärksten beeinflusst.
Beeinflusst Above the Fold die SEO?
Inhalte Above the Fold sind ein Signal, das Suchmaschinen bei der Bewertung der Seitenqualität nutzen. Seiten, die oberhalb des Falzes viel Werbung oder minderwertige Inhalte laden und den Hauptinhalt nach unten drücken, werden abgestraft. Dazu gab es ein eigenes Algorithmus-Update gegen Seiten, die nützliche Inhalte unter grossen Werbeblöcken versteckten.
Über diese konkrete Abstrafung hinaus beeinflusst Above the Fold die SEO indirekt über Verhaltenssignale. Besucher, die auf einer Seite landen und sofort wieder gehen, weil der Bereich Above the Fold keinen Grund zum Bleiben bot, erzeugen hohe Absprungraten und kurze Verweildauer. Mit der Zeit signalisiert das Suchmaschinen, dass die Seite die Absicht hinter der Suche nicht erfüllt hat.
Gutes Design Above the Fold unterstützt auch eine bessere Überschriftenstruktur. Eine klare Überschrift im sichtbaren Bereich, gestützt von einer logischen Seitenstruktur darunter, hilft Besuchern und Suchmaschinen, die Seite schnell zu verstehen. Der Artikel Was ist Webdesign? zeigt, wie Layout-Entscheidungen wie die Überschriftenhierarchie das Besuchererlebnis prägen. Das ganze Bild zu Suchrankings gibt dir der Artikel Was ist SEO? mit den technischen und inhaltlichen Faktoren, die am meisten zählen.
So handhabt WEMASY das Design Above the Fold
Die Vorlagen des WEMASY Website-Builders sind mit Blick auf den Bereich Above the Fold gebaut. Hero-Bereiche sind für schnelles Laden optimiert, und im visuellen Editor siehst du vorab, wie jeder Abschnitt auf verschiedenen Bildschirmgrössen aussieht. Die mobile Vorschau zeigt genau, was Besucher auf dem Smartphone sehen, bevor sie scrollen. So passt du Inhalt und Layout an, ohne zu raten.
Was alles enthalten ist, siehst du beim WEMASY Website-Builder. Die Tarife findest du auf der Preisseite.
Häufig gestellte Fragen
Ist Above the Fold bei modernem Scrollverhalten noch relevant?
Ja. Besucher scrollen heute bereitwilliger als vor zehn Jahren, aber der Bereich Above the Fold hat weiterhin überproportionales Gewicht. Besucher verbringen mehr Zeit mit Inhalten am oberen Seitenrand, egal wie viel sie scrollen. Dort fällt die Entscheidung zwischen Bleiben und Gehen. Ihn klar, schnell und überzeugend zu gestalten, ist heute so wichtig wie immer. Mit dem Website-Builder von WEMASY richtest du das direkt auf deiner Website ein.
Wie hoch sollte ein Hero-Bereich sein?
Ein Hero-Bereich sollte genug Inhalt Above the Fold zeigen, um den Zweck der Seite zu vermitteln, ohne den ganzen sichtbaren Bereich einzunehmen. Am Desktop kann ein Hero, der die volle Bildschirmhöhe mit nur Überschrift und Bild füllt, eindrucksvoll wirken, verzögert aber auch den Zugang des Besuchers zu echtem Inhalt. Besser ist ein Hero, der hoch genug für einen starken ersten Eindruck ist und trotzdem einen Hauch des Inhalts darunter zeigt. Das signalisiert Besuchern, dass es mehr zu sehen gibt, wenn sie scrollen.
Was ist ein Handlungsaufruf Above the Fold?
Ein Handlungsaufruf Above the Fold ist ein Button oder Link im ersten sichtbaren Bereich einer Seite. Er gibt Besuchern, die schon überzeugt sind, die Möglichkeit, sofort zu handeln, ohne zu scrollen. Gängige Beispiele sind „Jetzt starten“, „Gespräch buchen“ oder „Preise ansehen“. Nicht jeder Besucher ist Above the Fold schon bereit zu handeln, dafür gibt es den Rest der Seite. Eine früh verfügbare klare Handlung verringert aber die Reibung für die, die es sind.
Braucht jede Seite einen starken Bereich Above the Fold?
Ja, aber was „stark“ heisst, hängt vom Seitentyp ab. Eine Startseite muss Above the Fold klarmachen, wer du bist und was du anbietest. Ein Blogartikel muss dem Leser bestätigen, dass er im richtigen Artikel ist, und ihm einen Grund zum Weiterlesen geben. Eine Produktseite muss das Produkt klar zeigen und den Preis leicht zugänglich machen. Das Prinzip ist bei allen Seitentypen gleich: Der erste sichtbare Bereich sollte die unmittelbarste Frage des Besuchers beantworten.
Wie teste ich, was auf verschiedenen Geräten Above the Fold erscheint?
Am genauesten prüfst du deine eigenen Seiten auf echten Geräten. Nutze einen Desktop-Monitor, ein Tablet und ein Smartphone im Hoch- und Querformat. Die Entwicklertools des Browsers haben einen Gerätesimulationsmodus, der eine brauchbare Annäherung bietet, aber Browser-Symbolleisten, Adressleisten und Benachrichtigungsbereiche nicht berücksichtigt, die auf echten Smartphones die sichtbare Bildschirmhöhe verringern. Was in einer Browser-Vorschau gut aussieht, hat auf einem echten Gerät oft eine deutlich andere Falzkante.