Startseite aufbauen: was in den ersten Bildschirm gehört

Die Startseite ist für viele Besucher die erste Begegnung mit deiner Firma, und ihr erster Bildschirm ist die erste Sekunde davon. Was ohne Scrollen sichtbar ist, entscheidet, ob jemand weiterliest oder zurück zu Google geht. Dieser Artikel zeigt, welche Elemente in diesen Bereich gehören, wie der Rest der Startseite aufgebaut ist und was auf dem Handy anders ist.

Die drei Fragen des ersten Bildschirms

Der Begriff für diesen Bereich lautet «Above the Fold«Above the Fold» bezeichnet den Bereich einer Webseite, der ohne Scrollen sofort sichtbar ist. Dieser erste Eindruck entscheidet massgeblich darüber, ob…Mehr erfahren →», unser Glossar erklärt ihn unter Above the Fold. Hier geht es um den Inhalt: was genau dort stehen soll und in welcher Reihenfolge die Startseite danach weitergeht. Ob eine einzelne Seite für dein Angebot reicht oder es mehrere braucht, ist eine andere Frage, die der Beitrag One-Pager-Website: wann eine Seite reicht beantwortet.

Wer auf einer Startseite landet, stellt sich unbewusst drei Fragen. Erstens: Was ist das hier? Biete diese Firma das an, was ich suche? Zweitens: Ist es für mich? Arbeitet sie in meiner Region, für Firmen meiner Grösse, in meiner Branche? Drittens: Was mache ich jetzt? Gibt es einen offensichtlichen nächsten Schritt?

Viele Startseiten beantworten keine dieser Fragen. Oben steht der Firmenname gross, darunter ein Slogan wie «Ihr Partner für Qualität», dahinter ein Bild von einem Händedruck. Der Besucher weiss danach nicht mehr als vorher. Er muss scrollen, um herauszufinden, worum es geht, und viele tun das nicht.

Die sechs Elemente im ersten Bildschirm

Jedes Element hat eine Aufgabe. Fehlt eines, bleibt eine der drei Fragen offen.

1. 01
   Wo bin ich?

   Einordnung

   Kleine Zeile über der Überschrift: Branche und Ort.

2. 02
   Was ist das?

   Überschrift

   Leistung und Zielgruppe in einem Satz.

3. 03
   Für mich?

   Nutzen

   Ein bis zwei Sätze: was der Besucher davon hat.

4. 04
   Was jetzt?

   Knöpfe und Beleg

   Ein Hauptknopf, ein leiserer, darunter eine Belegzeile.

Die Einordnung ist eine kleine Zeile über der Überschrift, etwa «Malerbetrieb · Winterthur». Sie beantwortet in zwei Wörtern, ob der Besucher richtig ist, und entlastet die Überschrift.

Die Überschrift nennt, was du machst und für wen. «Wohnungen und Treppenhäuser streichen, ohne dass Sie ausziehen müssen» ist konkreter als «Farbe für Ihr Leben». Der Firmenname gehört ins Logo, nicht in die Überschrift.

Der Nutzensatz darunter erklärt in ein bis zwei Sätzen, was den Besucher erwartet. Er kann die wichtigste Sorge aufgreifen: Dauer, Dreck, Kosten, Verlässlichkeit.

Die Knöpfe führen zum nächsten Schritt. Der Hauptknopf richtet sich an Leute, die schon wissen, dass sie etwas brauchen, der zweite, leisere an alle, die zuerst prüfen wollen. Wie man sie formuliert, zeigen die 20 Beispiele für Call to Actions.

Die Belegzeile ist eine kurze Zeile unter den Knöpfen mit einem überprüfbaren Fakt: Anzahl Referenzen mit Link, Fachausweis, Einsatzgebiet. Keine Sterne ohne Quelle, keine runden Kundenzahlen. Warum das wichtig ist, steht im Beitrag Trust-Elemente auf der Website.

Das Bild zeigt, was du lieferst: eine fertige Arbeit, ein Ergebnis, eine Vorschau. Ein echtes Projektfoto schlägt jedes Stockbild.

Ein Beispiel: unsere eigene Startseite

Auf unserer Startseite steht ganz oben die Einordnung «Webagentur · Zollikon bei Zürich». Die Überschrift lautet «Websites, SEOSEO (Search Engine Optimization, Suchmaschinenoptimierung) umfasst alle Massnahmen, mit denen eine Website in den unbezahlten Suchergebnissen von Google und…Mehr erfahren → und KI-Sichtbarkeit — gebaut für Schweizer KMU» und nennt damit Leistungen und ZielgruppeEine Zielgruppe ist die Gruppe von Menschen oder Unternehmen, die ein Angebot erreichen soll, beschrieben anhand gemeinsamer Merkmale wie Ort, Branche,…Mehr erfahren →. Darunter folgen zwei kurze Sätze dazu, wo Kunden heute suchen und was wir dafür bauen. Der Hauptknopf heisst «Gespräch anfragen», der zweite, leisere «Arbeiten ansehen» springt zu den Referenzen. Die Belegzeile nennt die Zahl unserer Referenzen mit dem Zusatz, dass sie live nachprüfbar sind.

Daneben läuft ein kurzes Video, das einen neuen Online-Shop beim Scrollen zeigt. Weil dieser Shop zum Zeitpunkt der Aufnahme noch nicht live war, ist er im Bild als Vorschau beschriftet. Auch das ist ein Grundsatz: Ein Bild im ersten Bildschirm darf nichts versprechen, was der Besucher danach nicht findet.

Wie die Startseite nach dem ersten Bildschirm weitergeht

Wer weiterscrollt, hat sich entschieden, genauer hinzusehen. Ab hier folgt die Startseite den Fragen, die als Nächstes kommen. Die Reihenfolge hat sich in vielen Projekten bewährt, ist aber kein Gesetz.

Zuerst kommen die Leistungen, kurz beschrieben und mit Links auf die eigenen Seiten. Die Startseite muss nicht alles erklären, sie muss den Weg zur passenden Unterseite zeigen. Dann folgen Belege: Referenzen mit Bildern und Links, eine Fallstudie, freigegebene Kundenstimmen. Danach der Ablauf: in drei bis fünf Schritten, wie ein Auftrag läuft. Anschliessend Preise oder Preisspannen, wo es möglich ist. Am Ende stehen häufige Fragen und ein zweiter, deutlicher Kontaktpunkt.

Bei unserer eigenen Startseite folgen auf den ersten Bildschirm kompakte Live-Kennzahlen aus unserer Messung, Kundenlogos, ein Erklärfilm, der Weg einer Anfrage, die Leistungen, Referenzen, Preise, Fragen und weiterführende Artikel. Nicht jede Firma braucht all das. Entscheidend ist, dass jeder Abschnitt eine Frage beantwortet und keiner nur da ist, weil Platz war.

Desktop und Handy im Vergleich

Auf dem Handy ist der erste Bildschirm viel kleiner, und gleichzeitig kommt bei vielen KMU ein grosser Teil der Besucher über das Telefon. Die Elemente bleiben dieselben, aber die Gewichtung ändert sich.

Element	Desktop	Handy
Einordnung	Zeile über der Überschrift	bleibt, kurz halten
Überschrift	gross, bis drei Zeilen	höchstens vier kurze Zeilen
Nutzensatz	zwei Sätze	ein Satz
Hauptknopf	neben dem zweiten Knopf	volle Breite, ohne Scrollen sichtbar
Zweiter Knopf	Ja	teils
Belegzeile	unter den Knöpfen	kann unter die Falz rutschen
Bild oder Video	neben dem Text	unter dem Text, kleiner
Anruf und WhatsApp	im Kopf oder Fuss	fester Knopf am Bildschirmrand

Die letzte Zeile ist für lokale Betriebe oft entscheidend. Auf dem Handy wollen viele Interessenten nicht tippen, sondern anrufen oder eine Nachricht schicken. Ein fester Knopf am Bildschirmrand, der beim Scrollen sichtbar bleibt, erfüllt diesen Wunsch, ohne den ersten Bildschirm zu überladen.

Das Bild und die Ladezeit

Das grosse Bild im ersten Bildschirm ist oft das Element, an dem Google misst, wie schnell eine Seite lädt. Die Kennzahl heisst Largest Contentful Paint (LCPLCP ist einer der drei Core Web Vitals und misst, wie lange es dauert, bis das grösste sichtbare Element (Bild, Text-Block, Video) einer Seite geladen ist.…Mehr erfahren →) und gilt laut web.dev als gut, wenn das grösste sichtbare Element innerhalb von 2,5 Sekunden erscheint. Ein unkomprimiertes Foto mit mehreren Megabyte oder ein Video, das vor dem Text lädt, verschlechtert genau diesen Wert.

Für die Praxis heisst das: Bilder im modernen Format und in der passenden Grösse ausliefern, das Bild im ersten Bildschirm bevorzugt laden und alle Bilder weiter unten erst laden, wenn sie gebraucht werden. Videos bekommen ein Standbild, das sofort sichtbar ist. Welche Messwerte dahinterstehen, erklärt der Beitrag Core Web Vitals und INP.

Fünf häufige Fehler auf Startseiten

Bei Audits sehen wir auf Startseiten von KMU immer wieder dieselben Muster. Sie lassen sich meist mit wenig Aufwand beheben.

Der Slider. Drei bis fünf Bilder wechseln automatisch, jedes mit einer eigenen Botschaft. Die meisten Besucher sehen nur das erste, und wer zum zweiten scrollen will, wird vom dritten überrascht. Eine Botschaft, ein Bild, ein Knopf ist fast immer klarer.

Die Begrüssung. «Herzlich willkommen auf unserer Website» verbraucht den wertvollsten Platz der Seite für einen Satz ohne Information. Dasselbe gilt für Firmengeschichte und Werte ganz oben; sie gehören auf die Über-uns-Seite.

Zu viele gleich laute Knöpfe. Offerte, Termin, Rückruf, Newsletter und Katalog nebeneinander, alle gleich gross und gleich farbig. Der Besucher muss entscheiden, was wichtig ist, und entscheidet sich oft für keinen.

Das Cookie-BannerEin Cookie-Banner ist das Hinweis- und Einwilligungsfenster, mit dem eine Website Besucher über eingesetzte Cookies und Tracking informiert und — je nach…Mehr erfahren → über allem. Ein grosses Banner, das den ersten Bildschirm auf dem Handy fast ganz verdeckt, zerstört den ersten Eindruck, bevor er entsteht. Wo es möglich ist, hilft eine Messung ohne CookiesCookies sind kleine Textdateien, die eine Website im Browser der Besucher speichert, um sie bei späteren Aufrufen wiederzuerkennen — etwa für einen Login,…Mehr erfahren →, die kein Banner braucht; wo nicht, ein schmales Banner am unteren Rand.

Kein Weg auf dem Handy. Auf dem Computer ist die Telefonnummer oben rechts sichtbar, auf dem Handy verschwindet sie im Menü. Gerade lokale Betriebe verlieren so Anrufe von Leuten, die keine Lust haben, das Menü zu öffnen.

Allen fünf Fehlern ist gemeinsam, dass sie aus der Sicht der Firma entstehen: Man will alles zeigen, alle begrüssen, nichts weglassen. Die Startseite wird besser, sobald man sie aus der Sicht eines Fremden ansieht, der in fünf Sekunden entscheiden will, ob er bleibt.

Prüfliste für den ersten Bildschirm

Öffne deine Startseite für diese Prüfung einmal am Computer und einmal auf dem Handy, ohne zu scrollen. Wenn ein Freund, der deine Firma nicht kennt, nach fünf Sekunden sagen kann, was du anbietest, für wen und wie er dich erreicht, ist der erste Bildschirm gelungen.

Wenn die Startseite neu gedacht werden muss

Manchmal reicht es, Überschrift und Knöpfe auszutauschen. Oft zeigt die Prüfung aber, dass die Startseite mehr braucht: neue Bilder, eine andere Reihenfolge, Unterseiten für die Leistungen, auf die sie verlinken kann. Dann ist es ein Redesign oder ein neuer Webauftritt. Wenn vor allem die Führung durch die Seite und die Abläufe neu geplant werden müssen, ist das eine Aufgabe der UX-Gestaltung. Und wer zuerst wissen will, was die Pakete für eine neue Website kosten, findet sie auf unserer Seite zu den Webdesign-Preisen.

Ob die neue Startseite mehr Anfragen bringt, zeigt erst die Messung. Wie du das auf einer Website mit wenig Besuchern prüfst, ohne dich auf Zufälle zu verlassen, steht im Beitrag A/B-Test mit wenig Traffic.

Quellen

1. Largest Contentful Paint (LCP)web.dev (Google) · abgerufen am 11.11.2026