1. Den 5-Sekunden-Test bestehen

Zeige deine Landing Page jemandem, der noch nie von deinem Produkt gehört hat. Nach 5 Sekunden frage: Was macht das und für wen ist es?

Wenn er beide Fragen nicht klar beantworten kann, muss dein Hero-Copy überarbeitet werden. Die Headline soll das Ergebnis nennen, nicht die Funktion. Die Unterzeile fügt Spezifität hinzu: für wen es ist, wie es funktioniert oder was es anders macht.

Beispiel: ✗ "Die nächste Generation der Workflow-Plattform" ✓ "Support-Tickets 3× schneller lösen, ohne mehr Personal einzustellen"

Der häufigste Grund, warum eine Headline den 5-Sekunden-Test nicht besteht, ist, dass der Gründer sie nach Monaten der Arbeit am Produkt geschrieben hat. Zu diesem Zeitpunkt wirkt jedes Wort offensichtlich und spezifisch. Ein frischer Blick zeigt, dass „Workflow-Plattform" für jemanden, der das Produkt zum ersten Mal sieht, nichts bedeutet. Rekrutiere 5 Personen außerhalb deines engsten Kreises, um die Headline zu testen, Freunde und Kollegen kennen deinen Pitch zu gut, um dir verlässliches Feedback zu geben.

Für den deutschen Markt: Sei direkt und vermeide Hype. Deutsche Entscheidungsträger sind skeptisch gegenüber Übertreibungen und schätzen konkrete Ergebnisse gegenüber Buzzwords.

2. Eine Seite, ein Conversion-Ziel

Jedes Element auf der Seite soll einem Ziel dienen. Wenn dein Ziel "Demo buchen" ist, entferne alles, was einem Besucher nicht hilft, sich für eine Demo-Buchung zu entscheiden.

Das bedeutet: keine Blog-Links in der Navigation (verwende eine minimale Nav oder gar keine Nav auf Landing Pages), keine Social-Media-Icons im Footer, kein „Lies unsere Case Studies", es sei denn, sie stehen direkt auf der Seite.

In WeWeb: Baue Landing Pages als separate Seiten von deiner Hauptwebsite und reduziere die Navigation auf Logo + einen CTA-Button. Das zwingt Besucher, sich auf die Conversion zu konzentrieren, statt wegzunavigieren.

Leakage ist der Conversion-Killer, den die meisten Teams übersehen. Eine Landing Page für eine bezahlte Anzeigenkampagne mit Standard-Site-Navigation verliert 15 bis 30 % der Besucher, die zur Startseite, zum Blog oder zur Preisseite klicken und nie zum ursprünglichen Conversion-Pfad zurückkehren. Bei Kampagnen mit hohem Werbebudget verbessert das vollständige Entfernen der Navigation zugunsten einer reduzierten Landing Page die Conversion durchgängig um 10 bis 20 %. Besucher, die wirklich weiter erkunden wollen, scrollen die Seite herunter, du musst ihnen keinen Fluchtweg anbieten.

3. Social Proof oberhalb des Folds platzieren

Social Proof gehört nicht nach unten. Verschiebe ihn direkt unter den Hero, vor den Feature-Abschnitt.

Für frühe Produkte: "Vertraut von Teams bei X, Y, Z" mit 3 Unternehmenslogos funktioniert, auch wenn es nur Beta-Nutzer sind. Wenn du noch keine Logos hast, verwende stattdessen ein Testimonial von einem Beta-Nutzer oder frühen Kunden.

Für spätere Produkte: Eine Logo-Reihe + eine Kennzahl ("4,9★ auf G2", "2.000+ aktive Nutzer") ist die Kombination, die am besten konvertiert.

Der psychologische Mechanismus dahinter ist Autoritätstransfer: Die Glaubwürdigkeit eines bekannten Markennamens überträgt sich teilweise auf dein Produkt, wenn es daneben platziert wird. Deshalb zahlen Enterprise-SaaS-Unternehmen viel Geld für Case Studies mit Fortune-500-Kunden, selbst ein kleiner Einsatz bei einem großen Unternehmen legitimiert das Produkt für alle potenziellen Mid-Market-Käufer. Für Produkte in der Frühphase erfüllen Presseerwähnungen („Gesehen in TechCrunch") oder Accelerator-Badges („Y Combinator W25") dieselbe Autoritätstransfer-Funktion.

Für deutsche B2B-Kunden: Nenne wenn möglich spezifische deutsche Unternehmen oder Kunden. Ein Logo von einem bekannten deutschen Mittelstandsunternehmen oder einem Dax-Konzern wiegt schwerer als ein unbekannter amerikanischer Markenname.

4. Nutzen-zuerst-Feature-Punkte schreiben

Feature-Punkte sind der am häufigsten gelesene Abschnitt nach dem Hero. Die meisten Teams schreiben sie Feature-zuerst:

✗ "KI-gestützte Posteingangs-Sortierung" ✓ "Inbox Zero in 20 Minuten, KI sortiert und beschriftet jede E-Mail automatisch"

Das Format ist: [Ergebnis], [das Feature, das es liefert]. Besucher lesen zuerst das Ergebnis. Wenn das Ergebnis anspricht, lesen sie das Feature, um zu verstehen wie.

Für eine Landing Page, die Cold Traffic anspricht, priorisiere die 3-4 universell überzeugendsten Ergebnisse. Vermeide Nischen-Vorteile, die nur für Power-User relevant sind, diese Besucher finden sie während der Testphase von selbst. Das Ziel von Bullet-Copy auf einer Cold-Traffic-Landing-Page ist es, genug Besucher neugierig genug zu machen, um auf den CTA zu klicken. Es geht nicht darum, jede Fähigkeit des Produkts zu erklären. Mehr Bullets sind nicht besser: 4 gut geschriebene, nutzenorientierte Bullets schlagen in jedem Test, den wir durchgeführt haben, 12 feature-orientierte Bullets.

In WeWeb: Erstelle eine datenbindende Liste mit Nutzen-Feature-Paaren, damit du Copy einfach aktualisieren kannst, ohne das Design zu ändern.

5. Verwende einen einzigen, spezifischen CTA

„Get started" ist schwach. „Starte deine kostenlose 14-Tage-Testversion" ist stark. „Buche eine 20-minütige Demo, kein Verkaufsgespräch" ist bei Produkten mit hohem ACV sogar noch stärker.

Spezifität reduziert Reibung, weil sie Erwartungen setzt. Der Besucher weiß genau, was passiert, wenn er klickt.

In WeWeb: Verwende einen Sticky-CTA-Button im Header, der erscheint, nachdem der Nutzer über den Hero hinausgescrollt hat. Teste die Button-Copy per A/B-Test mit einer WeWeb-Variable und einem einfachen Make-Webhook, um Klicks zu tracken.

Produkte mit hohem ACV (200 €+/Monat) konvertieren durchgängig besser mit Demo-CTAs als mit Free-Trial-CTAs, weil komplexe Enterprise-Software eine menschliche Erklärung braucht, um zu einem Aktivierungsmoment zu gelangen. Produkte mit niedrigem ACV (20-50 €/Monat) konvertieren besser mit Self-Serve-Trial-CTAs, die Wirtschaftlichkeit eines Verkaufsgesprächs rechtfertigt die Dealgröße nicht. Wenn du unsicher bist, in welches Lager du gehörst, führe beide 4 Wochen lang als A/B-Varianten. Die Daten zeigen dir, welchen Weg dein Markt bevorzugt.

Headline-Formeln, die konvertieren

Es gibt vier Headline-Strukturen, die auf SaaS-Landing-Pages durchgängig besser abschneiden als andere, und es lohnt sich, sie zu kennen, bevor du mit dem Schreiben beginnst.

Die Ergebnis-Formel: „[Konkretes Ergebnis] in [Zeitrahmen], ohne [unerwünschten Aufwand]". Beispiel: „Launche dein SaaS-MVP in 6 Wochen, ohne einen Entwickler einzustellen". Das funktioniert, weil es das Traumergebnis benennt, einen glaubwürdigen Zeitrahmen setzt und den häufigsten Einwand in einem einzigen Satz beseitigt.

Der Problem-Flip: „Hör auf mit [schmerzhaftem aktuellem Zustand]. Fang an mit [gewünschtem Zustand]". Beispiel: „Hör auf, Montage in Standups zu verschwenden. Fang an, Features zu liefern, die deine Kunden tatsächlich wollten". Dieses Format funktioniert, weil es den aktuellen Schmerz des Besuchers anerkennt, bevor es das Produkt als Ausweg positioniert. Es ist besonders effektiv für Produkte, die einen frustrierenden bestehenden Workflow ersetzen.

Die Social-Proof-Headline: „[Anzahl] [Kundentyp] nutzen [Produkt], um [Ergebnis] zu erreichen". Beispiel: „600 europäische Startups nutzen WeWeb, um Produktions-Apps ohne Code zu bauen". Dieses Format führt mit Social Proof und bettet gleichzeitig das Ergebnis ein. Es funktioniert gut für Produkte mit einer etablierten Kundenbasis, tut sich aber in der frühesten Phase schwer, wenn die Zahlen noch nicht beeindruckend sind.

Hero-Bild-Strategie

Das Hero-Bild oder -Visual ist nach der Headline das zweitwichtigste Element auf der Seite, und die meisten Teams behandeln es als Nebensache. Ein starkes Hero-Visual verstärkt das Wertversprechen, ein schwaches untergräbt es, selbst wenn die Copy exzellent ist.

Produkt-Screenshots schneiden bei SaaS-Landing-Pages durchgängig besser ab als Illustrationen und Stockfotos. Ein echter Screenshot kommuniziert Unmittelbarkeit, Besucher sehen die tatsächliche Oberfläche, die sie nutzen werden, und signalisiert Transparenz. Der Screenshot sollte das Produkt in seinem beeindruckendsten Moment zeigen: ein vollständiges Dashboard mit Daten, ein ausgereiftes Feature in Aktion oder ein Vorher-Nachher-Vergleich. Zeige niemals einen leeren Zustand oder einen leeren Onboarding-Bildschirm in deinem Hero.

Für Produkte, die sich wirklich schwer screenshotten lassen (Hintergrundverarbeitungs-Tools, APIs, Infrastruktur-Dienste), verwende eine abstrakte visuelle Metapher, die aus dem Output des Produkts gebaut ist. Ein Datenpipeline-Tool könnte ein visualisiertes Datenfluss-Diagramm zeigen. Eine Kommunikations-API könnte einen Nachrichtenverlauf zeigen. Das Ziel ist es, dem Besucher ein mentales Modell davon zu geben, was das Produkt tut, nicht es wörtlich zu screenshotten. Verwende in WeWeb eine absolut positionierte Bildkomponente im Hero mit overflow hidden auf der Sektion, das erzeugt den „schwebenden Screenshot"-Effekt, der auf hochwertigen SaaS-Seiten üblich ist.

CTA-Button-Copy-Testing

Button-Copy ist das Copywriting mit dem größten Hebel auf einer Landing Page, weil es das Letzte ist, was ein Besucher liest, bevor er sich festlegt. Kleine Textänderungen erzeugen überproportionale Ergebnisse, wir haben Unterschiede von 30-50 % in der Conversion-Rate durch die Änderung eines einzigen Wortes auf einem CTA-Button gesehen.

Das Prinzip ist Spezifität plus geringes Commitment. „Get started" ist vage und erzeugt Unsicherheit. „Starte meine kostenlose Testversion" ist spezifisch und nutzt „meine", was ein Gefühl von Besitz erzeugt, noch bevor man sich festlegt. „Teste 14 Tage kostenlos" entfernt das Wort „Testversion" (das impliziert, dass es enden wird) und führt mit der Aktion (testen) und dem Nutzen (kostenlos). Jede dieser Formulierungen verändert das psychologische Kalkül leicht.

Für systematische Verbesserung: Führe jede Variante für mindestens 1.000 eindeutige Besucher, bevor du Schlüsse ziehst. Verwende eine WeWeb-Variable, um zu steuern, welche Copy-Variante angezeigt wird, und ein Make- oder PostHog-Event, um Klicks nach Variante zu tracken. Nach 2-3 Testrunden findest du in der Regel eine Copy-Formulierung, die für dein spezifisches Publikum und Angebot klar dominiert. Lege sie als deinen Standard fest und teste als Nächstes ein anderes Seitenelement.

Mobile-First-Design für Landing Pages

Mobiler Traffic zu SaaS-Landing-Pages ist seit einem Jahrzehnt stetig gewachsen und macht bei den meisten Produkten mittlerweile 50-65 % der Besuche aus. Die Implikation ist klar: Desktop-first zu designen und für Mobile anzupassen, ist der falsche Ansatz. Designe bei 375px und skaliere nach oben.

Die häufigsten mobilen Landing-Page-Fehler, die wir bei Audits finden: Hero-Text, der die Viewport-Breite überschreitet, weil die Headline für Desktop geschrieben wurde; CTA-Buttons, die kleiner als 44px hoch sind und damit schwer zu tippen; Feature-Grids, die versuchen, vier Spalten auf Mobile zu zeigen, wodurch jede Karte zu einem unleserlichen Streifen komprimiert wird; und Hero-Bilder, die größer als der Viewport sind und horizontales Scrollen verursachen.

Öffne in WeWeb die responsive Vorschau bei 375px von Tag eins des Builds an. Setze Schriftgrößen-Variablen mit Breakpoint-Overrides: H1 bei 56px Desktop, 40px Tablet, 32px Mobile. Verwende ein einspaltiges Layout für alle Sektionen auf Mobile und wechsle bei 768px zu mehrspaltig. Der Sticky-Header-CTA sollte auf Mobile volle Breite haben und am unteren Rand des Viewports fixiert sein (position: fixed, bottom: 0, width: 100%), das ist das Muster, das bei den am besten konvertierenden mobilen Landing Pages verwendet wird.

6. Für Mobile zuerst optimieren

Über die Hälfte deiner Landing-Page-Besucher kommt von Mobile, besonders wenn du LinkedIn- oder Meta-Anzeigen schaltest. Designe für einen 375px-Bildschirm und skaliere dann nach oben.

Mobile-Checkliste: - Hero-Headline unter 50 Zeichen - CTA-Button mindestens 48px hoch - Kein horizontales Scrollen - Schriftgröße mindestens 16px für Fließtext - Bilder laden unter 2 Sekunden auf 4G

Die responsive Vorschau von WeWeb lässt dich gleichzeitig bei 375px, 768px und 1280px designen. Nutze sie von Anfang an, Mobile nachträglich in einen Desktop-first-Build einzubauen, verschwendet Stunden.

Teste deine Landing Page auf einem echten Gerät, nicht nur mit dem Geräte-Simulationstool des Browsers. Browser-Simulationen bilden Touch-Scroll-Verhalten, Schriftdarstellung bei physischen Pixeldichten oder das visuelle Gewicht von UI-Elementen im realen Maßstab nicht genau ab. Leih dir zusätzlich zu deinem iPhone ein günstiges Android-Telefon zum Testen, ein 150 €-Android repräsentiert das Gerät, das die meisten deiner Nutzer tatsächlich in der Hand halten.

Der Einfluss der Seitengeschwindigkeit auf die Conversion

Der Zusammenhang zwischen Seitengeschwindigkeit und Conversion ist direkt und gut dokumentiert. Googles eigene Forschung zeigt einen Rückgang der Conversion um 7 % für jede Sekunde zusätzliche Ladezeit. Für eine Landing Page mit 1.000 Besuchen pro Woche bei einer Basis-Conversion-Rate von 3 % kostet eine Verlangsamung um 2 Sekunden 4 Leads pro Woche, oder rund 200 Leads pro Jahr.

Die wirkungsvollsten Performance-Optimierungen für No-Code-Landing-Pages sind Bildkomprimierung und das Management von Drittanbieter-Skripten. Bilder sollten im WebP-Format in der doppelten Anzeigegröße für Retina-Bildschirme ausgeliefert und auf unter 200KB für Hero-Bilder komprimiert werden. Nutze die integrierte Bildoptimierungs-Pipeline von WeWeb, sie übernimmt die WebP-Konvertierung automatisch. Drittanbieter-Skripte (Chat-Widgets, Heatmap-Tools, Tag-Manager) sind die unsichtbaren Performance-Killer: Jedes fügt 100-300ms Ladezeit hinzu und kann Layout-Shifts verursachen, die sowohl der UX als auch den Core-Web-Vitals-Werten schaden.

Ziele vor dem Start jeder bezahlten Kampagne auf einen Lighthouse-Performance-Score von 90+ und ein Largest Contentful Paint unter 2,5 Sekunden. Eine langsame Landing Page ist Verschwendung, du bezahlst dafür, Besucher auf eine Seite zu bringen, die sie verliert, bevor sie überhaupt die Headline lesen. Behebe Performance-Probleme, bevor du das Budget skalierst.

7. Eine FAQ-Sektion hinzufügen

Eine FAQ-Sektion reduziert die häufigsten Einwände, bevor sie zu Gründen werden, die Seite zu verlassen. Sie rankt außerdem für Long-Tail-Suchanfragen bei Google.

Die 5 Fragen, die jede SaaS-Landing-Page-FAQ beantworten sollte: 1. Wie lange dauert die Einrichtung? 2. Brauche ich eine Kreditkarte, um zu starten? 3. Was passiert, wenn meine Testversion endet? 4. Kann ich mit [dem gängigsten Tool in deiner Kategorie] integrieren? 5. Wie werden meine Daten gespeichert und geschützt?

Baue in WeWeb die FAQ als Akkordeon-Komponente mit einer Supabase-Tabelle, das lässt dich Fragen aktualisieren, ohne die Seite neu zu deployen.

FAQ-Inhalte kommen aus echten Einwänden. Die beste Quelle für FAQ-Fragen sind deine Sales-Call-Aufzeichnungen und dein Support-Ticket-Verlauf. Jedes Mal, wenn ein potenzieller Kunde vor der Conversion eine Frage stellt, gehört sie in die FAQ. Wenn du vor dem Launch stehst, nutze ChatGPT, um Einwände für deine spezifische Kategorie zu brainstormen, es ist ein überraschend guter Proxy für echte Nutzerbedenken, wenn du noch keine Conversion-Daten hast.

8. Geschwindigkeit ist ein Conversion-Faktor

Eine Verzögerung von 1 Sekunde beim Laden der Seite reduziert die Conversions um 7 % (Google, 2023). Für eine Landing Page, die Ad-Traffic treibt, ist das erheblich.

WeWeb-Seiten sind standardmäßig statisch exportiert, sie laden von einem CDN und sind extrem schnell. Die Hauptursachen für langsame WeWeb-Seiten sind: - Unoptimierte Bilder (vor dem Upload zu WebP komprimieren) - Zu viele Drittanbieter-Skripte (Chat-Widgets, Analytics, verzögert laden) - Große Videodateien im Hero (verwende ein kurzes geloopte MP4 unter 2MB oder einen statischen Screenshot)

Ziel: Lighthouse-Performance-Score über 90, bevor du live gehst.

Ein schneller Speed-Audit dauert 10 Minuten: Öffne die Chrome DevTools, gehe zum Network-Tab, lade die Seite und sortiere nach Dateigröße. Die größten Dateien sind fast immer unoptimierte Bilder. Behebe die zuerst, sie liefern die größte Performance-Verbesserung für den geringsten Aufwand. Sobald die Bilder optimiert sind, schau dir die Anzahl der Drittanbieter-Skripte an. Wenn du mehr als 3 externe Skripte hast, prüfe jedes einzeln auf Notwendigkeit. Ein Chat-Widget, das du vor sechs Monaten installiert und nie konfiguriert hast, ist keine 300ms Ladezeit wert.

9. Die richtigen Kennzahlen tracken

Die Conversion-Rate ist die wichtigste Kennzahl, aber diese sekundären Metriken zeigen dir, warum:

Scroll-Tiefe: Erreichen Besucher den Preisabschnitt? Wenn nicht, ist der Hero nicht überzeugend genug, um weiterzulesen. CTA-Klickrate: Von allen, die den CTA sehen, wie viel Prozent klicken? Benchmark: 2-5 % für Cold Traffic, 10-20 % für Warm Traffic. Formularabbruchrate: Wenn Besucher das Formular starten, aber nicht absenden, erzeugt ein Feld Reibung. Reduziere auf die minimal erforderlichen Felder.

Richte das mit einer einfachen Plausible- oder PostHog-Integration in WeWeb ein, beide haben No-Code-WeWeb-Plugin-Connectors.

Überprüfe deine Landing-Page-Kennzahlen monatlich statt täglich. Tägliche Zahlen sind zu verrauscht, um daraus Schlüsse zu ziehen, ein einzelner Spike in Bot-Traffic oder ein geteilter Link in einer Slack-Community kann die Daten eines Tages vollständig verzerren. Monatliche Reviews geben dir genug Volumen, um echte Trends zu erkennen und zuversichtliche Entscheidungen darüber zu treffen, was als Nächstes getestet werden soll. Führe ein Protokoll jeder Änderung an der Seite mit Datum, damit du Änderungen mit Conversion-Bewegungen korrelieren kannst.

Seiten-Performance: Unter 2 Sekunden (Deutschland-Fokus)

Google Core Web Vitals bewertet Landing Pages nach Ladegeschwindigkeit, Interaktivität und visueller Stabilität. Für SEO-Traffic sind diese Metriken wichtig.

Für WeWeb-Landing-Pages: - Bilder: WebP-Format, max. 200kb für Hero-Bilder, Lazy Loading für alle anderen - Schriftarten: Verwende System-Schriftarten oder lade nur die Gewichte, die du verwendest - Videos: Keine Auto-Play-Videos im Hero, ersetze durch ein statisches Bild mit Play-Button - WeWebs CDN-Hosting ist bereits für Geschwindigkeit optimiert, aber Asset-Größe ist immer noch deine Verantwortung

Für den deutschen Markt ist gute Core-Web-Vitals-Performance besonders wichtig, da deutsche B2B-Käufer häufig auf langsameren Unternehmens-VPN-Verbindungen surfen.

Zusätzliche Best Practices für den deutschen Markt: Formulare, Vertrauen, A/B-Tests und Mobile

Weniger Formularfelder: Jedes zusätzliche Feld reduziert die Conversion um ca. 10 %. Für eine Demo-Buchung brauchst du: Name, E-Mail, Unternehmen. Nicht mehr. Frage nach Telefonnummer, Teamgröße und Budget beim Qualification-Call.

Vertrauenselemente in der Nähe des CTA: Platziere direkt neben deinem Hauptformular: "Keine Kreditkarte erforderlich", "DSGVO-konform", "Löschen jederzeit möglich". Diese Micro-Copy beseitigt die letzten Einwände.

A/B-Tests der Headline: WeWeb macht das Ändern von Copy einfach. Teste zwei Headline-Varianten über 2 Wochen mit Google Optimize oder Hotjar. Die meisten Unternehmen testen nie, das ist dein Wettbewerbsvorteil.

Mobile-optimierter Hero: Stelle sicher, dass dein Hero-Headline auf 375px Breite in 2 Zeilen passt, nicht in 4. Kürze den CTA-Button-Text für Mobile (z.B. "Kostenlos starten" statt "Jetzt kostenlos starten").