Landingpage: Eine Seite, ein Ziel

vom 10.10.2009 von Oliver Misch

Eine Landingpage ist eine Seite mit genau einer Aufgabe: Besucher sollen eine bestimmte Sache tun, sich anmelden, etwas herunterladen, Kontakt aufnehmen. Alles auf der Seite arbeitet diesem einen Ziel zu. Das übt Struktur-Denken wie kein zweites Projekt, als Beispiel nehmen wir eine Anmeldeseite für einen fiktiven Retro-Computer-Stammtisch.

Schritt 1: Die Abschnitte planen

Der Klassiker-Aufbau von oben nach unten: Kopf mit Kernbotschaft, dann Nutzen, dann Details oder Stimmen, dann die Handlungsaufforderung, dann der Fuß. Erst denken, dann tippen, jede Sektion bekommt einen Zweck oder fliegt rauss.

HTML-Grobgerüst

<header class="hero">
    <h1>Der Retro-Stammtisch in Meckenheim</h1>
    <p>Alte Rechner, neue Freunde. Jeden ersten Donnerstag.</p>
    <a class="cta" href="#anmeldung">Platz sichern</a>
</header>

<section>
    <h2>Was dich erwartet</h2>
    <ul>
        <li>Basteln und Fachsimpeln ohne Bewertungsdruck</li>
        <li>Ersatzteile-Tauschbörse</li>
        <li>Kaffee. Viel Kaffee.</li>
    </ul>
</section>

<section id="anmeldung">
    <h2>Sei beim nächsten Mal dabei</h2>
    <!-- hier das Formular aus dem Kontaktformular-Teil -->
</section>

<footer>...</footer>

Der Kopf-Link springt per Sprungmarke direkt zur Anmeldung, das Formular kennst du aus dem Kontaktformular-Teil, die section-Elemente gliedern die Abschnittte.

Schritt 2: Der Kopfbereich mit Wumms

CSS

.hero {
    background: #008080;
    color: white;
    text-align: center;
    padding: 64px 16px;
}
.cta {
    display: inline-block;
    background: white;
    color: #008080;
    font-weight: bold;
    padding: 14px 28px;
    margin-top: 16px;
    text-decoration: none;
    border: 3px solid white;
}
.cta:hover, .cta:focus {
    background: #008080;
    color: white;
}

Farbfläche, großzügiges padding, ein Button der nach Button aussieht (per display: inline-block, die Technik von der display-Seite). Eine Handlungsaufforderung pro Bildschirm reicht, fünf konkurrierende Knöpfe heben sich gegenseitig auff.

Schritt 3: Ehrlichkeit als Stilmittel

Landingpages haben einen Ruf zu verlieren, deiner muss das nicht passieren: keine erfundenen Teilnehmerzahlen, keine Fake-Countdowns, keine "nur noch 2 Plätze". Schreib was Sache ist. Konkret schlägt aufgeblasen, das gilt für Text ("jeden ersten Donnerstag, 19 Uhr" statt "regelmäßige Community-Events") genauso wie fürs Design.

Der Abschnitt den fast alle vergessen: Vertrauen

Zwischen Nutzenliste und Anmeldung gehört auf jede Landingpage ein Vertrauensabschnitt: Wer steckt dahinter, was passiert mit den Daten, was kostet es wirklich? Bei unserem Stammtisch-Beispiel reichen zwei ehrliche Sätze und ein Foto vom letzten Treffen, bei kommerziellen Seiten sind es Impressumslink, Preistransparenz und echte (!) Stimmen. Der Grund ist banal: Die Handlungsaufforderung verlangt einen Vertrauensvorschuss, und den gibt niemand einer anonymen Seitte.

Messen statt raten

Ob eine Landingpage funktioniert, verrät nicht das Bauchgefühl sondern die simple Frage: Wie viele Besucher tun das eine gewünschte Ding? Schon ohne Analyse-Werkzeuge bekommst du Signale, etwa über die Zahl der Anmeldungen pro Woche nach einer Änderung. Bewährt hat sich, immer nur eine Sache zu ändern (die Überschrift, die Knopffarbe, die Reihenfolge der Abschnitte) und ein paar Wochen zu vergleichen. Das ist Handwerker-Empirie statt Wissenschaft, aber sie schlägt jede Meinungsdiskussion darüber, welche Version "besser aussieht". Und sie erzieht zum wichtigsten Landingpage-Muskel: der Bereitschaft, die eigene Lieblingsformulierung zu beerdigen wenn die Zahlen dagegen sprechenn.

Weiter im Fahrplan: Persönliche Homepage · Bausteine: Kontaktformular, Flexbox