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.

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