Zum Inhalt springen

Was gehört 2026 in den ersten Bildschirm einer Website?

Veröffentlicht 13.09.2026 · 7 Min. Lesezeit

Kurz beantwortet

In den ersten Bildschirm gehören vier Dinge: ein Wertversprechen in einem Satz, die Angabe, für wen es gilt, ein überprüfbarer Beleg und genau eine primäre Handlung. Der Fold liegt 2026 je nach Gerät zwischen etwa 550 und 950 Pixeln Höhe — planen Sie deshalb eine Reihenfolge, keine Pixelgrenze.

Warum ist der Fold 2026 kein fester Pixelwert mehr?

Der Begriff stammt aus dem Zeitungsdruck: Oberhalb des Falzes lag, was am Kiosk zu sehen war. Auf Bildschirmen gab es diese Kante nie wirklich, und inzwischen hat sie sich endgültig aufgelöst. Ein Bürobildschirm zeigt beim Aufruf ungefähr das Doppelte dessen, was ein Smartphone im Hochformat darstellt.

Hinzu kommen Einflüsse, die Sie nicht steuern: eingeblendete Adressleisten, Lesezeichenzeilen, eine vergrößerte Systemschrift, das Übersetzungsbanner des Browsers, ein hochkant gedrehtes Tablet. Wer eine Bühne pixelgenau auf 800 Pixel Höhe rechnet, baut für ein Gerät, das so kaum jemand benutzt.

Nützlicher ist eine andere Frage: Welche Information soll jemand aufgenommen haben, bevor die erste Scrollbewegung passiert? Diese Reihenfolge lässt sich planen. Die Pixelgrenze nicht.

Was bleibt, ist ein Korridor. Ein verbreitetes Notebook zeigt beim Aufruf rund 700 bis 800 Pixel Inhaltshöhe, ein Smartphone im Hochformat je nach Modell 550 bis 700, ein großer Desktop-Monitor über 1.100. Wer die obersten 550 Pixel als gesichert betrachtet und alles Weitere als Zugabe behandelt, liegt für praktisch jedes Gerät richtig.

Welche vier Bausteine gehören in den sichtbaren Anfang?

Der Einstieg trägt vier Aufgaben, und mehr sollte er nicht tragen. Jede zusätzliche Botschaft kostet Aufmerksamkeit, ohne eine offene Frage zu beantworten.

  • Das Wertversprechen in einem Satz: was Sie herstellen, betreiben oder lösen — in der Sprache Ihrer Kunden, nicht in Ihrer internen Nomenklatur.
  • Die Adressaten: für wen das gilt, gern als kurzer Zusatz wie „für Betreiber von Sondermaschinen“ oder „für Kanzleien mit 5 bis 30 Mitarbeitenden“.
  • Ein überprüfbarer Beleg: eine namentlich genannte Referenz, eine Zertifizierung mit Nummer, eine Kennzahl aus dem eigenen Betrieb, eine Verbandsmitgliedschaft.
  • Genau eine primäre Handlung, sprachlich konkret: nicht „Mehr erfahren“, sondern „Angebot in drei Minuten kalkulieren“ oder „Rückruf durch einen Konstrukteur anfordern“.

Der Beleg ist der Baustein, der am häufigsten fehlt. Er muss nachprüfbar sein, sonst wirkt er wie Dekoration. Vage Superlative wie „führender Anbieter“ leisten das Gegenteil, weil sie nichts überprüfbar machen und jeder Wettbewerber denselben Satz schreiben könnte.

Zum Wertversprechen gehört eine unangenehme Übung: Streichen Sie Ihren Firmennamen aus dem Satz und prüfen Sie, ob ein Wettbewerber ihn unverändert übernehmen könnte. Wenn ja, beschreibt der Satz eine Branche und kein Angebot.

Ein zweiter, sekundärer Weg darf daneben stehen — ein Link in die Leistungsübersicht etwa. Er sollte optisch deutlich leiser sein als die primäre Handlung. Zwei gleich laute Knöpfe erzeugen eine Entscheidung, wo eine Empfehlung stehen sollte.

Welche Muster im ersten Bildschirm schaden am meisten?

Einige Bausteine tauchen in Ausschreibungen für einen Relaunch mit erstaunlicher Regelmäßigkeit auf und richten trotzdem Schaden an. Die folgenden fünf sehen wir in Bestandsanalysen fast wöchentlich.

  • Der Bühnen-Slider: Er verschiebt die Botschaft alle paar Sekunden, sodass niemand eine davon zu Ende liest, und verzögert zusätzlich den Seitenaufbau.
  • Das generische Stockbild: Ein Handschlag vor Glasfassade sagt über Ihr Unternehmen nichts aus und wird von Wettbewerbern nachweislich ebenfalls verwendet.
  • Das Zitat ohne Kontext: Ein Lob ohne Firmenname, Rolle und Projektbezug wirkt erfunden, selbst wenn es echt ist.
  • Der Einwilligungsdialog, der den gesamten Einstieg verdeckt: Wer erst wegklicken muss, bevor der erste Satz sichtbar wird, bewertet die Seite bereits negativ.
  • Die Begrüßungsfloskel: „Herzlich willkommen auf unserer Website“ verbraucht die wertvollste Zeile der Seite für eine Information, die niemand braucht.

Beim Slider hilft eine einfache Gegenprobe: Fragen Sie intern, welche der drei Aussagen die wichtigste ist. Die Antwort kommt fast immer sofort — dann brauchen Sie die anderen beiden im Einstieg nicht. Der Slider ist meist ein ungelöster Abstimmungskonflikt, kein Gestaltungsmittel.

Beim Einwilligungsdialog lohnt der Blick auf die Reihenfolge des Ladens. Wenn Skripte für Statistik und Marketing so eingebunden sind, dass der Dialog vor dem Inhalt erscheint, sieht der erste Eindruck aus wie ein Formular. Ein schmaler Balken am unteren Rand erfüllt denselben Zweck, ohne die Bühne zu verdecken.

Beim Stockbild hilft eine schlichte Regel: Zeigen Sie das, worüber Sie sprechen. Eine Fräsbahn im Detail, ein Prüfprotokoll auf dem Tisch, ein Bauteil in der Messvorrichtung. Solche Motive gibt es in jedem Unternehmen, sie kosten einen Nachmittag mit einer ordentlichen Kamera und sind unverwechselbar.

Wie bringen Sie Besucher dazu, überhaupt weiterzuscrollen?

Scrollen beginnt, wenn sichtbar ist, dass es weitergeht. Lassen Sie deshalb nie einen Abschnitt exakt an der unteren Kante enden. Ein angeschnittenes Element — die obere Zeile der nächsten Überschrift, der Rand einer Bildkachel — signalisiert Fortsetzung zuverlässiger als jeder animierte Pfeil.

Der zweite Hebel ist inhaltlich. Wenn der Einstieg eine Frage aufwirft, die er nicht beantwortet, entsteht Zugkraft. Ein Maschinenbauer, der oben „Rüstzeiten um die Hälfte kürzen“ verspricht, muss direkt darunter zeigen, wodurch. Wer stattdessen mit einer Nachrichtenübersicht weitermacht, verliert den Faden.

Verzichten Sie auf Bühnen, die exakt die Höhe des Viewports einnehmen. Die Technik dafür ist verlockend, das Ergebnis ist eine Seite, die auf jedem Gerät leer wirkt, weil der Inhalt bewusst hinausgeschoben wurde.

Der dritte Hebel ist die Länge des Einstiegs selbst. Ein Bereich, der schon auf dem Notebook zwei Bildschirme füllt, weil Überschrift, Unterzeile, zwei Knöpfe, eine Logoleiste und ein Hinweisbanner übereinanderliegen, erzeugt Ermüdung statt Neugier. Streichen wirkt hier stärker als jede Gestaltung.

Unterscheidet sich der Einstieg auf Startseite, Leistungsseite und Referenz?

Deutlich. Die drei Seitentypen empfangen Menschen mit unterschiedlichem Wissensstand, deshalb funktioniert eine kopierte Bühne auf keiner davon gut.

Startseite: Einordnung vor Detail

Hier landen Menschen, die noch nicht wissen, ob sie richtig sind. Der Einstieg muss also einordnen: Branche, Leistungsart, Zuschnitt. Eine Steuerberatung, die sich auf Heilberufe spezialisiert hat, gewinnt mehr durch diesen einen Zusatz als durch drei Absätze über Beratungsqualität.

Leistungsseite: Problem vor Methode

Wer eine Leistungsseite über die Suche erreicht, kennt sein Problem bereits und sucht die Passung. Der erste Bildschirm nennt deshalb das Problem in den Worten des Lesers, den Umfang der Leistung und die Rahmenbedingungen — Vorlaufzeit, typischer Projektumfang, benötigte Mitwirkung. Das Wertversprechen der Startseite darf hier verschwinden.

Auf einer Referenzseite steht der Fall im Vordergrund, nicht Ihr Unternehmen. Beginnen Sie mit Kunde, Ausgangslage und Ergebnis in drei Zeilen, gefolgt von einem Bild aus dem tatsächlichen Projekt — Anlage, Oberfläche, Bauzustand. Die Einordnung, wer das gebaut hat, trägt der Fuß der Seite.

Gleich bleiben sollte über alle drei Typen hinweg die Kopfzeile: gleiche Position, gleiche Navigation, gleicher Kontaktweg. Der Einstieg darunter darf variieren, die Orientierung darüber nicht.

In welcher Reihenfolge erscheinen die Elemente auf dem Handy?

Auf schmalen Bildschirmen stapelt sich, was am Desktop nebeneinander liegt. Diese Stapelreihenfolge sollten Sie festlegen, statt sie dem Raster zu überlassen. Bewährt hat sich in unseren Projekten diese Abfolge.

  • Überschrift mit dem Wertversprechen, maximal zwei Zeilen bei einer Schriftgröße ab 28 Pixeln.
  • Ein erklärender Satz zur Zielgruppe, nicht länger als zwanzig Wörter.
  • Die primäre Handlung als vollflächiger Knopf mit mindestens 44 Pixeln Höhe, damit er sicher zu treffen ist.
  • Der Beleg als kompakte Zeile, etwa drei Referenznamen oder ein Prüfsiegel.
  • Das Bild danach — auf dem Handy trägt es weniger als am Desktop und darf nach unten rutschen.

Prüfen Sie zusätzlich, wie viel Höhe die Kopfzeile mit Logo und Navigation frisst. Fixierte Kopfzeilen mit 90 Pixeln Höhe kosten auf einem kleinen Gerät rund ein Achtel des Einstiegs. 56 bis 64 Pixel reichen fast immer aus.

Woran erkennen Sie, dass der Einstieg funktioniert?

Drei Messwerte genügen für den Anfang. Die Scrolltiefe zeigt, wie viele Besucher die Marken von 25, 50 und 75 Prozent erreichen; bricht schon die erste Marke ein, liegt es am Einstieg und nicht am Text weiter unten. Die Klickrate auf die primäre Handlung zeigt, ob das Angebot verständlich formuliert ist.

Der dritte Wert ist die Verweildauer bis zur ersten Interaktion. Sehr kurze Werte mit sofortigem Rücksprung deuten auf eine falsche Erwartung — häufig, weil der Titel in der Ergebnisliste etwas anderes verspricht als die Bühne zeigt.

Vergleichen Sie die Werte getrennt nach Gerätetyp. Ein Einstieg, der am Desktop gut abschneidet und mobil einbricht, hat fast immer ein Reihenfolgeproblem und kein Inhaltsproblem — die richtige Botschaft steht dann schlicht unter dem Bild statt darüber.

Ergänzend hilft ein Test ohne Werkzeug: Zeigen Sie fünf Personen außerhalb Ihrer Branche die Seite für fünf Sekunden und lassen Sie danach notieren, was das Unternehmen anbietet und für wen. Weichen die Antworten stark voneinander ab, ist nicht das Design das Problem, sondern der Satz ganz oben.

Der erste Bildschirm muss nichts verkaufen. Er muss sich den zweiten verdienen.

Häufige Fragen

Wie hoch sollte die Bühne einer Startseite sein?

Geben Sie keine feste Höhe vor. Lassen Sie den Bereich mit seinem Inhalt wachsen und begrenzen Sie ihn nach oben, damit auf einem großen Monitor nicht mehrere hundert Pixel Leerraum entstehen.

Darf ein Erklärvideo direkt in den Einstieg?

Als Angebot ja, als Pflichtprogramm nein. Setzen Sie ein Standbild mit Abspielknopf, damit der Text sofort lesbar bleibt und der Seitenaufbau nicht auf eine Videodatei wartet.

Was tun, wenn intern mehrere Botschaften gleich wichtig erscheinen?

Lassen Sie die Beteiligten die Botschaften einzeln danach bewerten, welche Frage ein Erstbesucher zuerst stellt. Die Rangfolge entsteht dabei fast immer von selbst, und die übrigen Aussagen finden weiter unten ihren Platz.

Fragen zu Ihrem Projekt? Sprechen wir.

Projekt besprechen
Website-CheckErstgespräch buchen