Was ist eine Landingpage, und wie gestaltet man sie?

Kurz gesagt

Wikipedia definiert eine Landingpage als einzelne Webseite, die sich öffnet, wenn man auf ein Suchergebnis, eine Marketing-E-Mail oder eine Onlineanzeige klickt. Ihr allgemeiner Zweck ist, den Besucher zu einem Verkauf oder einem Lead zu machen.

Dieselbe Quelle nennt zwei Arten: Referenz und Transaktion. Die Referenzseite bietet Informationen für den Besucher mit Text, Bildern oder Links. Die Transaktionsseite versucht, den Besucher zu einem Abschluss zu bewegen, und tut das mit einem Formular.

Der Unterschied zur Startseite liegt im Ziel. Die Startseite empfängt Besucher aller Art und verteilt sie an verschiedene Orte. Die Landingpage sagt einem Publikum aus einer bestimmten Kampagne eine einzige Sache.

Der Fehler, den ich in Audits von Landingpages am häufigsten sehe: Die Seite erzählt vom Unternehmen und beantwortet nicht die Frage des Besuchers. Die Überschrift sagt „Wer wir sind“, der Besucher fragt aber „Löst das mein Problem?“.

Wann man sie nutzt

Nutzen Sie eine Landingpage immer dann, wenn Sie Besucher mit einem bestimmten Versprechen holen. Laut Wikipedia ist der Verkaufstext auf dieser Seite meist eine logische Fortsetzung der Anzeige, des Suchergebnisses oder des Links, auf den geklickt wurde.

• Werbekampagne. Laut der Hilfeseite von Google Ads ist die Nutzererfahrung mit der Landingpage einer der Bestandteile des Qualitätsfaktors. Google beschreibt sie als Maß dafür, wie relevant und nützlich die Seite für jemanden ist, der auf die Anzeige klickt.
• Ankündigung eines einzelnen Produkts oder Angebots. Ein neues Paket, eine Anmeldung zu einer Veranstaltung oder eine Warteliste.
• E-Mail- und Social-Media-Kampagne. Wer auf den Link drückt, soll auf dem ersten Screen sehen, was er in der Nachricht gelesen hat.

In diesen Fällen ist eine Landingpage nicht das richtige Werkzeug:

• Wenn Besucher ganz verschiedene Dinge suchen. Dann empfängt sie eine Startseite oder eine Kategorieseite besser.
• Wenn das Angebot noch nicht klar ist. Zeichnen Sie zuerst ein Wireframe und zeigen Sie es ein paar Menschen, dann bauen Sie die Seite.
• Wenn dasselbe Angebot an sehr unterschiedliche Zielgruppen geht. Dann überlege ich eine eigene Seite pro Zielgruppe, weil jede Zielgruppe eine andere erste Frage hat.

Die Anatomie, Abschnitt für Abschnitt

Eine gute Landingpage beantwortet von oben nach unten der Reihe nach die Fragen des Besuchers. Was ist das, passt es zu mir, ist es echt, was kostet es, was tue ich jetzt? Das Gerüst unten verteilt diese Fragen auf Abschnitte.

Klickbare Anatomie

1. 1Kopfzeile
2. 2Hero: Überschrift und Button
3. 3Vertrauensbeweis
4. 4So funktioniert es
5. 5Konkretes Beispiel
6. 6Preis und Bedingungen
7. 7FAQ und letzter Aufruf

1. Kopfzeile

Aufgabe: Sagt, auf wessen Seite man ist. Der Besucher schaut aufs Logo und weiß, dass er richtig ist.

Tun

Setzen Sie das Logo oben links. Daneben höchstens einen Link oder denselben Button wie auf der Seite.

Lassen

Holen Sie nicht das ganze Menü der Website hierher. Jeder Menülink ist ein Weg, die Seite zu verlassen, ohne das Angebot zu lesen.

2. Hero: Überschrift und Button

Aufgabe: Sagt auf dem ersten Screen, was Sie anbieten und für wen. Hier entscheidet der Besucher meist, ob er bleibt.

Tun

Schreiben Sie eine kurze Überschrift, die einem neuen Besucher erklärt, was Sie tun. Darunter ein erklärender Satz, darunter ein einziger Button, der die Handlung benennt.

Lassen

Schreiben Sie keine Überschrift, die nichts sagt, wie „Willkommen“ oder „Gemeinsam die Zukunft gestalten“. Der Buttontext heißt nicht „Jetzt starten“.

3. Vertrauensbeweis

Aufgabe: Beantwortet die Frage „Ist das echt?“. Kennt der Besucher Sie nicht, stellt er sie auf jeden Fall.

Tun

Nutzen Sie echte Kundenlogos und Zitate mit Erlaubnis und Namen. Schreiben Sie eine Zahl, nennen Sie auch die Quelle.

Lassen

Keine erfundenen Bewertungen und keine „zufriedenen Kunden“ aus Stockfotos. Auch keine Prozentzahl ohne Quelle.

4. So funktioniert es

Aufgabe: Erklärt, was nach dem Klick passiert. Je weniger Ungewissheit, desto leichter der nächste Schritt.

Tun

Beschreiben Sie die Arbeit Schritt für Schritt aus Sicht des Nutzers. Sagen Sie nach jedem Schritt, was der Nutzer in der Hand hat.

Lassen

Zählen Sie keine Funktionen mit internen Namen des Teams auf. „Smart-Sync-Modul“ sagt einem Besucher nichts.

5. Konkretes Beispiel

Aufgabe: Macht das abstrakte Versprechen sichtbar. Der Besucher sieht mit eigenen Augen, was er bekommt.

Tun

Zeigen Sie den echten Screen des Produkts, einen Beispielbericht oder ein Beispielergebnis.

Lassen

Nutzen Sie kein Stockbild, das nichts mit dem Produkt zu tun hat und nur Dekoration ist.

6. Preis und Bedingungen

Aufgabe: Gibt die Information für die Entscheidung: was es kostet und was enthalten ist.

Tun

Schreiben Sie den Preis und was enthalten ist klar hin. Gibt es eine Lieferzeit oder eine wichtige Bedingung, steht sie an derselben Stelle.

Lassen

Verstecken Sie den Preis nicht hinter einem Formular oder im Kleingedruckten am Seitenende.

7. FAQ und letzter Aufruf

Aufgabe: Beantwortet die offenen Fragen und bietet dieselbe Handlung noch einmal an. Wer bis zum Ende liest, entscheidet hier.

Tun

Schreiben Sie die Fragen, die vor dem Kauf wirklich gestellt werden. Der letzte Button hat denselben Text wie der im Hero.

Lassen

Öffnen Sie am Seitenende kein ganz neues Angebot. Ein zweites Ziel teilt die Kraft des ersten.

Ein Gerüst einer Landingpage mit sieben Abschnitten. Drücken Sie auf einen Abschnitt, erscheinen seine Aufgabe sowie Tun und Lassen unter dem Gerüst. Ist JavaScript aus, stehen alle Notizen untereinander.

Die Zahl der Abschnitte ändert sich mit dem Angebot. Für ein günstiges, bekanntes Produkt reichen vielleicht Hero, Preis und Button. Bei einer teuren oder neuen Leistung werden Vertrauen und Beispiel länger, weil der Besucher mehr Fragen hat.

Die Reihenfolge ändert sich dagegen kaum. Ein Besucher schaut nicht auf den Vertrauensbeweis, bevor er versteht, was es ist, und nicht auf den Preis, bevor er sieht, was er bekommt.

Tun und lassen

Die meisten Punkte unten stammen aus Studien der Nielsen Norman Group (NN/g) zu Startseiten und Buttontexten. Auf einer Landingpage sind diese Grundsätze noch wichtiger, weil die einzige Aufgabe der Seite ist, den Besucher zu einer einzigen Handlung zu führen.

Zum Button „Get Started“ (Jetzt starten) gibt es eine Studie von NN/g aus dem Jahr 2017. Aurora Harley und Kim Flaherty schreiben, dass dieser Button Klicks bekommt, aber in die Irre führt. Die Nutzer in der Studie wollten erfahren, was das Unternehmen tut. Nach dem Klick fanden sie sich in einem Test oder einem Registrierungsfenster wieder.

Der Artikel von Huei-Hsin Wang bei NN/g aus dem Jahr 2024 warnt auch kurz zur visuellen Hierarchie: Wird alles betont, sticht nichts hervor. Auf einer Landingpage heißt das: ein einziger Hauptbutton. Wie sehr ein einzelner Button das Ergebnis ändern kann, erzähle ich in der Geschichte vom 300-Millionen-Dollar-Button.

Der Unterschied zwischen mobil und Desktop

Das Gerüst ist auf beiden Screens gleich. Was sich ändert, ist, ob die Abschnitte nebeneinander oder untereinander stehen. Am Desktop hat der Hero zwei Spalten: links Überschrift und Button, rechts das Produktbild. Auf dem Handy rutscht das Bild unter den Text.

Auf dem Handy ist der erste Screen sehr kurz. Überschrift, erklärender Satz und Button müssen in diesen kurzen Bereich passen. Setzen Sie ein großes Bild über die Überschrift, fällt der Button aus dem ersten Screen.

Hier hilft das Kriterium 1.4.10 (AA) im Standard WCAG 2.2 des W3C. Inhalte müssen bei 320 CSS-Pixeln Breite lesbar sein, ohne in zwei Richtungen zu scrollen. Das heißt: kein horizontales Scrollen auf dem Handy.

Auch das Tippziel wird mobil wichtig. Das Kriterium 2.5.8 (AA) der WCAG 2.2 verlangt, dass Ziele für Zeiger mindestens 24 × 24 CSS-Pixel groß sind. Ist das Ziel kleiner, erfüllt auch genug Abstand ringsum das Kriterium. Den Hauptbutton halte ich deutlich darüber, fast so breit wie der Screen.

Das Hero-Bild ist auf dem Handy oft der schwerste Teil der Seite. Einer der Werte, auf die man beim Messen der Geschwindigkeit schaut, ist LCP, die Zeit, bis der größte Inhalt der Seite auf dem Screen ist.

In einem Labortest, der auf web.dev beschrieben ist, wurde eine WordPress-Demoseite mit mobiler Emulation gemessen. Als das Lazy Loading abgeschaltet wurde, sank der Median-LCP der Archivseite von 1.657 ms auf 1.403 ms.

Am Desktop gibt es eine andere Falle: Informationen, die sich beim Überfahren öffnen. Auf dem Handy gibt es keinen Mauszeiger. Eine Seite, auf der Preis oder Bedingungen nur mit dem Zeiger zu sehen sind, zeigt mobilen Besuchern diese Information nie.

Hinweis zur Barrierefreiheit

Landingpages bleiben am häufigsten bei bewegten Inhalten und Buttonlabels hängen. Auf diese vier Kriterien schaue ich auf jeden Fall.

• Laufende Logoleiste und Slider (2.2.2, Stufe A). Bewegung, die von selbst startet, länger als fünf Sekunden dauert und neben anderem Inhalt gezeigt wird, muss der Nutzer anhalten, stoppen oder ausblenden können.
• Name des Buttons (2.5.3, Stufe A). Der Name, den der Screenreader für den Button nennt, muss den sichtbaren Text enthalten. Sagt jemand mit Sprachsteuerung „Preise ansehen“, muss der Button funktionieren.
• Umbruch (1.4.10, Stufe AA). Senkrecht scrollende Inhalte verlangen bei 320 CSS-Pixeln Breite kein Scrollen in zwei Richtungen.
• Zielgröße (2.5.8, Stufe AA). Buttons und Links sind mindestens 24 × 24 CSS-Pixel groß oder durch genug Abstand getrennt.

Der typische Fehler bei 2.5.3: Das Design schreibt „Start“ als sichtbaren Text, die Entwicklung setzt mit aria-label „Registrierungsformular öffnen“. Das W3C merkt an, dass der Wert von aria-label im zugänglichen Namen den sichtbaren Text verdrängt. Gibt es ein sichtbares Label, soll man aria-label vermeiden oder vorsichtig nutzen. Die sauberste Lösung ist, den sichtbaren Text selbst klar zu schreiben.

Lassen Sie auch die Runde mit der Tastatur nicht aus. Legen Sie die Maus weg: Erreichen Sie mit Tab den Hauptbutton, und sehen Sie den Fokus? Diese Prüfung mache ich im UX Audit auf jeder Seite.

Hinweis zur Umsetzung

Unten steht eine schlichte HTML- und CSS-Fassung des Hero-Abschnitts. Auf dem Handy eine Spalte, ab 900 Pixeln zwei.

<!-- Überschrift, Erklärung und ein Button. -->
<section class="hero">
  <div class="hero__text">
    <h1>Mietzahlungen auf einem Screen im Blick</h1>
    <p>Monatliche Zahlungsübersicht für Vermieter</p>
    <!-- Der Button sagt, wohin er führt. -->
    <a class="btn" href="#preise">Preise ansehen</a>
  </div>
  <!-- Das Bild auf dem ersten Screen wird nicht lazy geladen. -->
  <img src="zahlungen.webp" width="640" height="480"
       alt="Liste der monatlichen Mietzahlungen in der App"
       fetchpriority="high">
</section>

/* Auf dem Handy eine Spalte. */
.hero { display: grid; gap: 24px; padding-inline: 16px; }
.hero img { width: 100%; height: auto; }
/* Ab 900 px zwei Spalten. */
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; }
}

Die erste Entscheidung betrifft das Bild. Es hat kein loading="lazy", weil das Bild auf dem ersten Screen lazy zu laden laut web.dev den LCP verlangsamt. Stattdessen steht dort fetchpriority="high".

Laut dem Artikel zu Fetch Priority auf web.dev starten Bilder normalerweise mit niedriger Priorität. Das Attribut gibt dem Browser einen Hinweis, das Bild von Anfang an mit hoher Priorität zu laden. Im Test mit Google Flights im selben Artikel sank der LCP von 2,6 auf 1,9 Sekunden.

Die Werte width und height des Bilds stehen da, so reserviert der Browser den Platz, bevor das Bild kommt. Auch der Buttontext sagt, wohin er führt. Wenn ich das Design in Code übertrage, mache ich das im Design & Ship Sprint.

Checkliste

Bevor die Seite live geht, gehe ich diese Liste durch. Ist ein Punkt nicht abgehakt, geht die Seite nicht live.

• Die Seite hat einen einzigen Zweck, und ich kann ihn in einem Satz schreiben.
• Die Überschrift erklärt jemandem, der Sie nicht kennt, was Sie tun.
• Das Versprechen aus Anzeige oder E-Mail steht auch auf dem ersten Screen.
• Es gibt einen einzigen Hauptbutton, sein Text sagt, wohin er führt.
• Preis und wichtige Bedingungen sind leicht zu finden.
• Die Bilder zeigen das echte Produkt oder ein echtes Ergebnis.
• Das Menü ist gekürzt, Links, die von der Seite wegführen, sind reduziert.
• Keine unnötigen Pop-ups und keine automatisch startenden Videos.
• Das Hero-Bild wird nicht lazy geladen, seine Maße stehen da.
• Bei 320 Pixeln Breite gibt es kein horizontales Scrollen.
• Bewegte Inhalte lassen sich anhalten.
• Der Hauptbutton ist mit der Tastatur erreichbar, und der Fokus ist sichtbar.