Wer eine Adresse von der Visitenkarte abtippt oder im Unternehmensprofil auf den Link zur Website tippt, landet auf der Startseite. Ihr oberster Teil ist der Bereich, den jeder Besucher sieht, bevor er scrollt, und dort entscheidet sich in wenigen Augenblicken, ob er bleibt: Bin ich hier richtig, mit meinem Anliegen und in meiner Gegend? Lohnt es sich weiterzulesen? Wie komme ich zu einem Termin oder einem Angebot? Der Beitrag über den Seitenplan einer Unternehmenswebsite beschreibt die Aufgabe der Startseite knapp: in einem Satz sagen, was der Betrieb macht, für wen und wo, darunter die Leistungen als Einstiege, ein Beleg für Vertrauen und der nächste Schritt. Dieser Beitrag geht eine Ebene tiefer. Er zeigt, welche vier Bausteine in den ersten Bildschirm gehören, wie sie sich zwischen Desktop und Handy verschieben, in welcher Reihenfolge die Abschnitte darunter bis zur Fußzeile folgen und wie Sie den ersten Bildschirm prüfen, bevor die Seite online geht.
Warum der erste Bildschirm zählt
Wie viel Aufmerksamkeit der obere Teil einer Seite bekommt, hat die Nielsen Norman Group mit Blickverfolgung gemessen.
Ausgewertet wurden mehr als 130.000 Blickfixationen auf einem Bildschirm mit 1.920 × 1.080 Pixeln (Nielsen Norman Group 2018). Sie stammen von 120 Teilnehmenden, die Aufgaben auf Seiten aus vielen Branchen lösten, darunter Nachrichtenseiten, Onlineshops, Blogs, FAQ-Seiten und Nachschlageseiten (Nielsen Norman Group 2018). Das Ergebnis: Rund 57 Prozent der Betrachtungszeit entfielen auf den Bereich oberhalb des Falzes, also auf das, was ohne Scrollen sichtbar ist (Nielsen Norman Group 2018). Die ersten beiden Bildschirmhöhen, bis 2.160 Pixel, kamen zusammen auf 74 Prozent (Nielsen Norman Group 2018). Der zweite Bildschirm allein erhielt 17 Prozent und damit etwa ein Drittel dessen, was der erste bekam; die übrigen 26 Prozent verteilten sich in kleinen Anteilen über den Rest der Seite (Nielsen Norman Group 2018).
Gegenüber der Vorgängerstudie hat sich etwas verschoben: 2010 lagen noch 80 Prozent der Betrachtungszeit oberhalb des Falzes (Nielsen Norman Group 2018). Menschen scrollen heute mehr, der Falz ist keine Mauer. Er bleibt aber die Linie, ab der die Aufmerksamkeit deutlich abfällt. Und selbst innerhalb des ersten Bildschirms ist sie ungleich verteilt: Mehr als 65 Prozent der Betrachtungszeit oberhalb des Falzes lagen in der oberen Hälfte des sichtbaren Bereichs (Nielsen Norman Group 2018). Die Empfehlung der Autorin Therese Fessenden ist entsprechend knapp: den oberen Teil der Seite für die wichtigsten Inhalte reservieren und wichtige Handlungsaufforderungen oberhalb des Falzes halten (Nielsen Norman Group 2018). Für eine Startseite heißt das: Die Überschrift mit Leistung und Ort gehört an den oberen Rand, nicht unter ein bildschirmhohes Foto.
Was die Zahlen nicht sagen
Vier Bausteine über dem Falz
Der erste Bildschirm muss nicht alles erklären. Er muss drei Fragen beantworten, die sich ein Besucher in den ersten Augenblicken stellt: Bin ich hier richtig? Lohnt es sich weiterzulesen? Wie geht es weiter?
Dafür reichen vier Bausteine, die sich auf fast jede Startseite übertragen lassen, ob Handwerksbetrieb, Praxis, Kanzlei oder Ladengeschäft. Ein Bild kann sie ergänzen, wenn es etwas Echtes zeigt: das Team, die Werkstatt, eine fertige Arbeit. Es ist der Rahmen für die vier Bausteine, nicht ihr Ersatz. Wie die Überschrift typografisch wirkt und ob sie auf dem Handy in zwei Zeilen lesbar bleibt, hängt an der Schriftwahl; dazu mehr im Beitrag über Schriften für die Website.
Leistung und Ort
Die Hauptüberschrift nennt, was der Betrieb macht und wo: „Badsanierung in Hildesheim und Umgebung“ statt „Herzlich willkommen“. Sie verwendet die Wörter, die Kunden selbst in die Suche tippen. Der Firmenname steht im Logo und muss die Überschrift nicht zusätzlich besetzen.
Nutzenzeile
Ein Satz darunter sagt, was der Kunde davon hat oder was den Betrieb unterscheidet: „Planung, Abbruch und Fliesen aus einer Hand, ein fester Ansprechpartner“. Er ist konkret und überprüfbar, keine Reihe von Werten wie Qualität, Leidenschaft und Erfahrung.
Ein Hauptweg zur Anfrage
Ein deutlich gestalteter Knopf mit einem Verb, das den nächsten Schritt benennt: „Termin anfragen“, „Rückruf vereinbaren“, „Angebot anfordern“. Daneben darf die Telefonnummer als zweiter Weg stehen, aber kein dritter und vierter Knopf in gleicher Gewichtung.
Ein Vertrauenselement
Ein einzelner, belegbarer Hinweis, der den naheliegenden Zweifel ausräumt: Meisterbetrieb, Fachrichtung, Einsatzgebiet, ein Foto einer echten Baustelle oder der Verweis auf Bewertungen. Ein Element, das stimmt, wirkt stärker als eine Reihe von Siegeln, deren Herkunft niemand kennt.
Tabelle waagerecht wischen
| Baustein | Schwach | Tragfähig |
|---|---|---|
| Überschrift | „Herzlich willkommen auf unserer Website“ | „Badsanierung in Hildesheim und Umgebung“ |
| Nutzenzeile | „Qualität, Leidenschaft, Erfahrung“ | „Planung bis Fliese aus einer Hand, ein fester Ansprechpartner“ |
| Anfrageweg | „Mehr erfahren“ und drei weitere Knöpfe in gleicher Größe | „Termin anfragen“ als Knopf, Telefonnummer als anwählbarer Link |
| Vertrauen | Siegelsammlung ohne Erklärung, Superlative ohne Beleg | „Meisterbetrieb“ und ein Link zu Referenzen aus der Region |
| Bild | Stockfoto, Bildwechsler mit wechselnden Botschaften | Foto einer echten Arbeit, fest stehend, mit Alternativtext |
Der Hauptweg: ein Knopf, ein Ziel
Viele Startseiten bieten im ersten Bildschirm mehrere gleichwertige Knöpfe an: Leistungen, Über uns, Kontakt, Angebote. Für den Besucher heißt das, eine Entscheidung zu treffen, bevor er weiß, ob er richtig ist.
Klarer ist ein Hauptweg, der zur Anfrage führt, und höchstens ein zweiter, sichtbar nachgeordneter Weg. Welcher Weg der Hauptweg ist, entscheidet das Geschäft: Bei einem Notdienst ist es der Anruf, bei einer Praxis die Terminbuchung, bei einem Bauunternehmen die Projektanfrage. Fehlt dieser Weg, bleiben Besuche ohne Folgen; der Beitrag zu Besuchern ohne Anfragen führt das als erste Ursache. Für die Farbe gilt: Der Knopf muss sich vom Hintergrund abheben, und die Schrift darauf muss lesbar sein. Wie eine Markenfarbe beides leistet, zeigt der Beitrag über Markenfarben mit genügend Kontrast.
- Die Beschriftung ist ein Verb mit Ziel: „Termin anfragen“ statt „Mehr“ oder „Los geht’s“.
- Die Akzentfarbe des Knopfs kommt im ersten Bildschirm nur einmal vor; steht sie auch auf Zierelementen, verliert der Knopf seine Signalwirkung.
- Auf dem Handy ist die Tippfläche mindestens 24 × 24 CSS-Pixel groß (WCAG 2.2, Erfolgskriterium 2.5.8), für den Hauptweg besser deutlich größer und über die volle Breite.
- Der Knopf führt direkt zu einem kurzen Formular oder öffnet die Wählfunktion, nicht zu einer Übersichtsseite mit weiteren Entscheidungen.
- Die Telefonnummer steht als anwählbarer Link daneben oder darunter, nicht als Bild.
- Derselbe Hauptweg erscheint weiter unten noch einmal, am Ende des letzten Inhaltsabschnitts.
Ein Vertrauenselement, das trägt
Das vierte Element ist das unscheinbarste und das, was sich am leichtesten übertreiben lässt. Im ersten Bildschirm reicht ein Hinweis, der die naheliegende Frage beantwortet: Kann dieser Betrieb das, was ich brauche?
Für einen Handwerksbetrieb ist das oft der Meisterbrief, für eine Praxis die Fachrichtung, für einen Lieferdienst das Liefergebiet. Ausführliche Belege, Referenzen und Teamfotos folgen weiter unten; wie sie ohne Floskeln wirken, beschreibt der Beitrag zur Über-uns-Seite. Bewertungen sind ein naheliegendes Vertrauenselement, und sie bringen eine Pflicht mit: Wer Bewertungen von Verbrauchern zugänglich macht, muss darüber informieren, ob und wie er sicherstellt, dass sie von Verbrauchern stammen, die die Ware oder Dienstleistung tatsächlich genutzt oder erworben haben (Paragraf 5b Absatz 3 UWG). Ein Sternwert im ersten Bildschirm braucht deshalb einen Verweis auf diese Information, etwa als Link direkt darunter. Die Einzelheiten stehen im Beitrag zu Kundenbewertungen auf der Website.
Was im ersten Bildschirm nichts verloren hat
Am Handy: weniger Platz, gleiche Reihenfolge
Die Blickverfolgung der Nielsen Norman Group fand an Desktop-Bildschirmen statt (Nielsen Norman Group 2018).
Am Handy ist der erste Bildschirm schmaler und fasst deutlich weniger Inhalt: Kopfzeile mit Logo und Menüsymbol, Überschrift, ein bis zwei Zeilen Text, ein Knopf, dann ist die Kante erreicht. Die Reihenfolge der vier Bausteine bleibt dieselbe, nur der Platz für jeden schrumpft. Was am Desktop nebeneinander steht, Text links und Bild rechts, steht am Handy untereinander. Dann entscheidet der Seitenaufbau, ob zuerst das Bild oder zuerst die Überschrift erscheint, und ein bildschirmhohes Foto über der Überschrift schiebt alle vier Bausteine unter die Kante. Grundlagen zu Schriftgröße, Tippflächen und Daumenzone stehen im Beitrag über die Website auf dem Handy.
Das Bild ist am Handy auch eine Frage der Ladezeit. Bei 76 Prozent der Seiten auf dem Handy ist das größte Element, das beim Laden erscheint, ein Bild, am Desktop bei 85 Prozent (HTTP Archive Web Almanac 2025). Dieses Element, gemessen als Largest Contentful Paint, entscheidet mit darüber, wie schnell eine Seite fertig wirkt; ein guter Wert liegt bei unter 2,5 Sekunden (web.dev). Auf dem Handy erreichen das 62 Prozent der Seiten (HTTP Archive Web Almanac 2025). Startseiten schneiden dabei schlechter ab als Unterseiten: Nur 45 Prozent der Startseiten erreichen auf dem Handy gute Werte bei den Core Web Vitals, bei Unterseiten sind es 56 Prozent (HTTP Archive Web Almanac 2025). Als mögliche Gründe nennt die Auswertung unter anderem, dass Startseiten häufiger geändert werden und mehr wechselnde Bestandteile tragen. Ein großes Bild, ein Bildwechsler, ein eingebettetes Video und mehrere Einblendungen im ersten Bildschirm sind genau solche Bestandteile.
Tabelle waagerecht wischen
| Baustein | Desktop | Handy |
|---|---|---|
| Leistung und Ort | Eine Zeile oben links, neben oder über dem Bild | Zwei bis drei kurze Zeilen direkt unter der Kopfzeile |
| Nutzenzeile | Ein Satz unter der Überschrift | Ein kurzer Satz, die Ausführung folgt weiter unten |
| Anfrageweg | Knopf, daneben die Telefonnummer als Text | Knopf über die volle Breite, Telefonnummer anwählbar |
| Vertrauen | Zeile oder kleine Plaketten unter dem Knopf | Eine Zeile unter dem Knopf, notfalls direkt unter der Kante |
| Bild | Rechts neben dem Text oder als ruhiger Hintergrund | Unter dem Knopf oder als flacher Streifen, nicht bildschirmhoch darüber |
| Menü | Hauptpunkte in einer Zeile sichtbar | Menüsymbol, dazu ein Anrufsymbol in der Kopfzeile |
Ein Fehler, der am Handy besonders ins Gewicht fällt, ist das verzögerte Laden des großen Bildes oben. Verzögertes Laden ist für Bilder weiter unten sinnvoll, beim größten Bild im ersten Bildschirm bremst es die Anzeige. Etwa 16 bis 17 Prozent der Seiten laden genau dieses Bild trotzdem verzögert (HTTP Archive Web Almanac 2025). Wer sein Bild oben behält, stellt es auf sofortiges Laden und hält die Datei klein.
Der Zoom-Test
Was den ersten Bildschirm verstopft
Ein schwacher erster Bildschirm ist oft nicht leer, sondern überfüllt. Jedes zusätzliche Element konkurriert mit Überschrift und Knopf um denselben knappen Platz, und am Handy verdrängt es sie unter die Kante.
Google beschreibt die Folge für Einblendungen deutlich: Nutzer zu oft mit störenden Interstitials zu unterbrechen, kann sie frustrieren und ihr Vertrauen in die Website beeinträchtigen (Google Search Central). Diese fünf Muster nehmen den vier Bausteinen den Platz:
- Bildwechsler mit mehreren Motiven: Jede Folie trägt eine andere Botschaft, und wer nicht wartet, sieht nur die erste. Eine feste Aussage mit einem Bild ist klarer und lädt schneller.
- Einblendungen beim Öffnen: Newsletter-Fenster, Gutschein-Hinweise, Chat-Aufforderungen. Google empfiehlt, statt ganzseitiger Interstitials Banner zu verwenden, die nur einen kleinen Teil des Bildschirms einnehmen (Google Search Central).
- Ein Einwilligungsbanner, das einen großen Teil der Seite bedeckt: Die Abfrage selbst kann nötig sein, sie muss aber Überschrift und Knopf nicht verdecken; ein kompaktes Banner am unteren Rand lässt den ersten Bildschirm lesbar.
- Bewegung ohne Anlass: automatisch startende Videos, laufende Schriftbänder oder Text, der von der Seite hereinfliegt, ziehen den Blick von der Überschrift weg. Wer Bewegung einsetzt, hält sie ruhig und respektiert die Systemeinstellung für reduzierte Bewegung.
- Ein übergroßes Logo und eine Kopfzeile mit zwei Ebenen: Am Handy belegen sie einen großen Teil des Bildschirms, bevor die erste Zeile Inhalt erscheint.
Die Reihenfolge unter dem Falz
Unterhalb des Falzes verteilt sich die Aufmerksamkeit auf mehrere Bildschirmhöhen. In der Studie der Nielsen Norman Group entfielen auf die ersten drei Bildschirmhöhen zusammen 81 Prozent der Betrachtungszeit (Nielsen Norman Group 2018).
Die Startseite muss also nicht kurz sein, aber jeder Abschnitt muss sich seinen Platz verdienen, und die wichtigsten kommen zuerst. Eine Reihenfolge, die für viele Betriebe trägt, sieht so aus:
- Leistungen als Einstiege: je Leistung eine Karte mit einem Satz und einem Link auf die eigene Leistungsseite.
- Beleg der Arbeit: Referenzen mit Foto, Ort und Art des Auftrags oder eine kurze Liste typischer Aufträge.
- Ablauf in Schritten: was nach der Anfrage passiert, vom Rückruf bis zum Termin vor Ort.
- Einsatzgebiet und Erreichbarkeit: Orte, Telefon- oder Öffnungszeiten, Anfahrt.
- Wer dahintersteht: ein Foto des Teams, zwei Sätze und ein Link zur Über-uns-Seite.
- Häufige Fragen: die Fragen, die vor einer Anfrage tatsächlich gestellt werden, mit kurzen Antworten.
- Der zweite Anfrageabschnitt: derselbe Hauptweg wie oben, mit einem Satz dazu, was nach dem Absenden passiert.
- Die Fußzeile: Kontaktdaten, Links zu Impressum und Datenschutzerklärung und ein kurzer Satz zum Betrieb.
Die Leistungskarten sind das Scharnier zwischen Startseite und Rest der Website. Überzeugen muss am Ende nicht die Startseite, sondern die Seite, die eine Leistung vollständig beschreibt, und dorthin führen die Karten; wie solche Seiten aufgebaut sind, steht im Beitrag über Leistungsseiten mit einer Seite je Leistung. Jeder Abschnitt beginnt mit einer Überschrift, die seine Aussage trägt, nicht mit einer Rubrik wie „Unsere Leistungen“. Wer scrollt, orientiert sich an Überschriften und hervorgehobenem Text, um Wichtiges zu erkennen (Nielsen Norman Group 2018). Eine Falle luftiger Gestaltung ist der falsche Boden: Endet der erste Bildschirm mit einer klaren Kante und viel Weißraum, wirkt die Seite fertig. Die Studie rät zu sichtbaren Signalen, dass es weitergeht, etwa zu angeschnittenem Text an der Unterkante (Nielsen Norman Group 2018); am Handy genügt oft, dass die nächste Karte schon ein Stück in den ersten Bildschirm ragt.
Die Fußzeile ist der Ort, an dem Besucher Impressum und Datenschutzerklärung suchen. Die Pflichtangaben eines geschäftsmäßigen digitalen Dienstes müssen leicht erkennbar und unmittelbar erreichbar sein und ständig verfügbar gehalten werden (Paragraf 5 Absatz 1 DDG); ein Link in der Fußzeile, die auf jeder Seite erscheint, ist dafür der übliche Weg. Welche Angaben ins Impressum gehören, beschreibt der Beitrag zu Impressum und Datenschutz. Darüber hinaus trägt die Fußzeile, was Besucher am Ende einer Seite noch einmal suchen: Telefonnummer, Anschrift und Erreichbarkeit.
So prüfen Sie den ersten Bildschirm
Ob der erste Bildschirm seine Aufgabe erfüllt, lässt sich ohne Werkzeuge prüfen.
Aussagekräftig wird der Test mit einer Person, die den Betrieb nicht kennt, und er gehört auf alle drei Gerätegrößen: Was am Desktop über dem Falz steht, kann am Tablet knapp darunter rutschen, und am Handy gilt ohnehin eine eigene Aufteilung.
- Seite auf dem Handy öffnen, ohne zu scrollen: Steht dort, was der Betrieb macht und wo?
- Die Testperson nach wenigen Sekunden fragen, was der Betrieb anbietet und was sie als Nächstes tun würde.
- Ist der Hauptweg zur Anfrage ohne Scrollen sichtbar und mit einem Verb beschriftet?
- Ist ein belegbares Vertrauenselement zu sehen, und stimmt es?
- Verdeckt beim ersten Aufruf ein Banner oder eine Einblendung die Überschrift oder den Knopf?
- Bleibt der erste Bildschirm lesbar, wenn die Schrift im Browser vergrößert wird?
- Ragt der nächste Abschnitt sichtbar in den ersten Bildschirm, sodass klar ist, dass es weitergeht?
- Erscheint das große Bild oben ohne Verzögerung, und ist verzögertes Laden dafür abgeschaltet?
Vom Gerüst zur fertigen Startseite
In XICflow beginnt eine Startseite nicht auf einem leeren Blatt.
Unter den Vorlagen stehen 6 Startpunkte als ganzseitige Vorlagen bereit, darunter eine Landing-Page, dazu Branchen-Landingpages und einzelne Sektionen zum Einschieben wie Hero, Preisband, FAQ und Call-to-Action (XICflow-Leistungsseite). Die Vorlage liefert das Gerüst, Überschrift, Nutzenzeile, Knopf und Vertrauenselement schreiben Sie für Ihren Betrieb hinein. Die Reihenfolge der Abschnitte ändern Sie im Editor per Drag & Drop, indem Sie Bausteine an ihre neue Stelle ziehen. Den ersten Bildschirm prüfen Sie in der Live-Vorschau, die die Seite in 3 Viewports zeigt, für Desktop, Tablet und Mobil, und jede Änderung sofort auf allen drei Größen darstellt (XICflow-Leistungsseite). Beispiele für fertige Websites zeigen die Demos.