Was «Above the Fold» konkret bedeutet
Auf dem Desktop sind das typischerweise die ersten 600 bis 900 Pixel der Seite. Auf dem Handy – wo über 60% der Besuche stattfinden – noch deutlich weniger.
Was in diesem Bereich landet, hängt vom Gerät ab. Deshalb gibt es nicht die eine Grösse. Was aber immer gilt: dieser Bereich muss drei Fragen beantworten bevor jemand auch nur daran denkt zu scrollen.
Die drei Fragen die dein Above the Fold beantworten muss:
Was bietest du an? – in einem Satz, ohne Interpretation
Für wen? – konkret, nicht «für alle»
Was ist der nächste Schritt? – ein Button, eine Handlung, eine klare Einladung
Wenn dein Besucher nach drei Sekunden auch nur eine dieser Fragen nicht beantworten kann, hast du ihn verloren.
Die 5 häufigsten Fehler im Above the Fold Bereich
Fehler 1: Ein Bild das nichts sagt
Das beliebteste Element im Hero-Bereich: ein grosses, schönes Foto. Sonnenuntergang. Handshake. Glückliche Menschen im Büro.
Das Problem: Es sagt nichts über dein Angebot. Es dekoriert nur.
Bilder im Above the Fold Bereich müssen verstärken was der Text sagt – nicht ersetzen was der Text sagen sollte. Ein Handwerker der sein bestes Projekt zeigt: gut. Ein Stockfoto von Händen die sich schütteln: weg damit.
Fehler 2: Ein Headline der nach allen klingt
«Wir sind Ihr Partner für professionelle Lösungen.»
Das sagt nichts. Wirklich nichts. Jede Firma könnte das schreiben. Und genau deshalb liest es niemand.
Ein guter Headline nennt das Problem deines Kunden oder das Ergebnis das er bekommt. Nicht was du bist – sondern was er davon hat.
❌ Klingt nach allen | ✅ Spricht jemanden an |
|---|---|
«Ihr Partner für digitale Lösungen» | «Websites die Anfragen bringen – nicht nur gut aussehen» |
«Qualität und Zuverlässigkeit» | «Fertig in 3 Wochen – oder wir erklären dir warum nicht» |
«Willkommen auf unserer Website» | «Du suchst einen Webdesigner in der Schweiz der liefert?» |
Fehler 3: Kein sichtbarer CTA
Erstaunlich wie oft das passiert: Der Button ist da – aber man muss scrollen um ihn zu sehen. Oder er ist so klein und grau dass er mit dem Hintergrund verschwimmt.
Der CTA muss im Above the Fold Bereich sichtbar sein. Immer. Ohne Ausnahme. Und er muss auffallen – farblich, durch seine Grösse, durch seine Position.
💡 Faustregel: Wenn du den CTA auf deiner Website auf Handygrösse betrachtest und ihn nicht sofort siehst – ist er falsch platziert.
Fehler 4: Zu viel Text
Viele nutzen den Hero-Bereich um alles zu erklären. Die Geschichte des Unternehmens. Die drei Kernwerte. Die fünf Dienstleistungen.
Das führt dazu, dass niemand irgendetwas liest.
Der Above the Fold Bereich ist kein Informationsblock. Er ist ein Türöffner. Er muss neugierig machen und zur nächsten Aktion einladen – nicht vollständig informieren.
Maximale Elemente im Hero:
1 Headline (max. 10 Wörter)
1 Subheadline (max. 20 Wörter)
1 primärer CTA-Button
1 Bild oder visuelle Unterstützung
Alles andere kommt danach – beim Scrollen.
Fehler 5: Mobile wird vergessen
Was auf dem Desktop perfekt aussieht, ist auf dem Handy oft eine Katastrophe. Zu grosser Text der umbricht. Buttons die zu klein sind zum Antippen. Bilder die das Wesentliche verdecken.
Und weil mehr als die Hälfte aller Besuche auf dem Handy passieren, bedeutet das: Die Hälfte deiner Besucher hat sofort ein schlechtes Erlebnis.
Was du konkret prüfst auf Mobile:
Lädt die Seite in unter 3 Sekunden?
Ist der Headline-Text gross genug ohne zu scrollen?
Ist der CTA-Button mindestens 44x44 Pixel – also bequem antippbar?
Verdeckt ein Bild wichtige Textelemente?
Ist die Subheadline noch lesbar ohne zu zoomen?
Was ein starkes Above the Fold konkret enthält
Jetzt zum Aufbau. Kein Geheimnis – aber es lohnt sich einmal sauber aufzuschreiben:
Hier ist der vollständige Artikel – mit Bildern und einer eingebetteten Grafik:
SEO-Titel: Above the Fold optimieren – Was in den ersten 600 Pixeln stehen muss
Meta Description: Der erste Eindruck deiner Website entscheidet in 3 Sekunden. Was genau im sichtbaren Bereich stehen muss – und was die meisten falsch machen.
Above the Fold optimieren – Was in den ersten 600 Pixeln stehen muss
Du hast drei Sekunden.
Nicht fünf. Nicht zehn. Drei.
So lange braucht ein Besucher um zu entscheiden ob er auf deiner Website bleibt – oder den Zurück-Button drückt. Und diese drei Sekunden passieren komplett im sichtbaren Bereich ohne zu scrollen. Also genau da wo dein «Above the Fold» ist.
Der Begriff kommt aus der Zeitung. Die wichtigsten Nachrichten standen «above the fold» – im oberen Teil der Seite der sichtbar war wenn sie gefaltet im Kiosk lag. Im Web ist es dasselbe Prinzip: Was ohne Scrollen sichtbar ist, entscheidet über alles was danach kommt.
Und die meisten Websites verschwenden diesen Raum.
Was «Above the Fold» konkret bedeutet
Auf dem Desktop sind das typischerweise die ersten 600 bis 900 Pixel der Seite. Auf dem Handy – wo über 60% der Besuche stattfinden – noch deutlich weniger.
Dieser Bereich muss drei Fragen beantworten bevor jemand auch nur daran denkt zu scrollen:
Was bietest du an? – in einem Satz, ohne Interpretation
Für wen? – konkret, nicht «für alle»
Was ist der nächste Schritt? – ein Button, eine klare Einladung
Wenn dein Besucher nach drei Sekunden auch nur eine dieser Fragen nicht beantworten kann, hast du ihn verloren.
So sieht ein optimiertes Above the Fold aus4
Jedes Element hat einen Zweck. Hier ist warum:
① Headline – max 10 Wörter, spricht das Problem oder Ergebnis des Kunden an. Nicht dein Name, nicht deine Geschichte.
② Primärer CTA – sichtbar ohne zu scrollen, aktiv formuliert, farblich auffallend. Der einzige Button der zählt.
③ Visueller Anker – ein Bild das das Versprechen unterstützt. Kein Stockfoto, kein Handshake. Ein konkretes Referenzprojekt, ein Produktscreenshot, ein Teamfoto.
④ Trust-Signale – kleine, konkrete Beweise. Anzahl Projekte, Google-Bewertung, Reaktionszeit. Direkt unter dem CTA.
⑤ Fold-Linie – alles was darunter liegt existiert nur für Besucher die bereits überzeugt sind. Bau nicht darauf.
Vorher / Nachher – So sieht die Verbesserung aus
Nichts erklärt es besser als ein direkter Vergleich. Hier dasselbe Unternehmen – einmal mit typischem Hero, einmal optimiert:
❌ Vorher – was die meisten haben:
«Willkommen bei Müller & Partner GmbH – Ihr zuverlässiger Partner für umfassende Dienstleistungen im Bereich Webdesign, Suchmaschinenoptimierung und Online-Marketing seit 2008.»
Kein klares Versprechen. Kein Bezug zum Besucher. Kein sichtbarer CTA. Der Besucher weiss nicht was er tun soll.
✅ Nachher – was konvertiert:
«Deine Website bringt keine Anfragen? Wir bauen dir eine die das ändert – fertig in 3 Wochen. [Jetzt kostenlos besprechen →]*
Selbe Firma. Selbes Angebot. Komplett anderes Ergebnis.
Der 10-Minuten-Test für dein Above the Fold
Du brauchst dafür keine Agentur und kein Budget. Nur fünf Minuten und ehrliche Augen.
Schritt 1: Öffne deine Website auf dem Handy. Mach einen Screenshot.
Schritt 2: Schick den Screenshot an jemanden der dich und dein Angebot nicht kennt. Frag ihn:
Was mache ich?
Für wen?
Was soll man als Nächstes tun?
Schritt 3: Wenn er auch nur eine Frage nicht beantworten kann – weisst du wo dein Problem liegt.
Das ist kein Designproblem. Es ist ein Klarheitsproblem. Und Klarheit ist gratis.
Checkliste: Dein Above the Fold im Schnellcheck
Element | Vorhanden & optimiert? |
|---|---|
Headline spricht Kundenproblem oder -ergebnis an | ☐ |
Subheadline konkretisiert in max. 20 Wörtern | ☐ |
CTA-Button ohne scrollen sichtbar | ☐ |
CTA ist aktiv formuliert – nicht «Kontakt» | ☐ |
Bild unterstützt das Versprechen | ☐ |
Mindestens 2 Trust-Signale vorhanden | ☐ |
Auf dem Handy in unter 3 Sekunden geladen | ☐ |
Alle Texte auf Handy ohne zoomen lesbar | ☐ |
Fazit: Der erste Eindruck ist keine zweite Chance
Drei Sekunden. Das ist alles was du hast.
Wer in diesen drei Sekunden klar macht was er anbietet, für wen, und was der nächste Schritt ist – der behält seinen Besucher. Wer in diesen drei Sekunden über sich selbst redet, schöne Bilder zeigt und den CTA versteckt – verliert ihn.
Das Above the Fold ist nicht das spannendste Element deiner Website. Aber es ist das wichtigste.
Du willst wissen was bei dir konkret fehlt?
Ich schaue mir deine Startseite an und sage dir in 10 Minuten was im sichtbaren Bereich fehlt – kostenlos, direkt, ohne Drumherum.
Jetzt kostenlose Website-Analyse anfragen →
Häufige Fragen
Wie gross ist der «Above the Fold» Bereich genau?
Das hängt vom Gerät und der Bildschirmauflösung ab – es gibt keine universelle Pixelzahl. Auf einem typischen Desktop-Bildschirm sind es etwa 600 bis 900 Pixel. Auf dem Handy oft weniger als 500 Pixel. Das Tool Chrome DevTools zeigt dir genau was auf welchem Gerät sichtbar ist – einfach «Inspect» öffnen und Gerät wechseln.
Muss mein Above the Fold auf Desktop und Mobile gleich aussehen?
Nein – und das sollte es auch nicht. Mobile braucht oft eine vereinfachte Version: kürzerer Text, grössere Buttons, das Bild eventuell weg oder nach unten verschoben. Was zählt ist dass beide Versionen dieselben drei Fragen beantworten. Wie sie das optisch tun darf und soll unterschiedlich sein.
Wie oft sollte ich meinen Hero-Bereich anpassen?
Immer dann wenn deine Absprungrate hoch ist, Besucher nicht bis zum CTA scrollen, oder dein Angebot sich geändert hat. Es gibt keine feste Zeitregel – aber wer Google Analytics und Heatmaps nutzt, sieht schnell ob der Hero funktioniert oder nicht. Eine Anpassung pro Quartal ist ein guter Rhythmus zum Testen.
Bereit für eine Website, die wirklich funktioniert?
Ich analysiere dein Projekt kostenlos und zeige dir, was möglich ist.