Eine responsive Landingpage ist heute für jedes Unternehmen unverzichtbar, das in einer mobil geprägten Welt Conversions und Umsatz erzielen will. Da immer mehr Traffic von Smartphones und Tablets kommt, brauchen Sie eine Landingpage, die sich an jede Bildschirmgröße anpasst.
In diesem ausführlichen Leitfaden erfahren Sie alles, was Sie 2023 über den Aufbau einer wirksamen responsiven Landingpage wissen müssen, von Designfragen bis zur Conversion-Optimierung.
Was ist eine responsive Landingpage?
Eine responsive Landingpage ist eine einzelne Webseite, die so gestaltet ist, dass sie auf den unterschiedlichsten Geräten, vom Desktop-Computer bis zum Smartphone, optimal dargestellt und bedient werden kann.
Die Seite erkennt automatisch die Bildschirmgröße des jeweiligen Geräts und passt ihr Layout entsprechend an. Auf dem Smartphone ordnet sie Elemente zum Beispiel untereinander an und vergrößert Buttons für eine bessere Bedienbarkeit. Auf dem Desktop stellt sie Inhalte nebeneinander dar und nutzt die größere Bildschirmfläche.
So können sich Seitenelemente auf dem Smartphone und auf dem Desktop unterscheiden:
| Seitenelement | Mobiles Layout | Desktop-Layout |
|---|---|---|
| Navigation | Hinter einem Hamburger-Menü eingeklappt | Horizontale Navigationsleiste |
| Hero-Bereich | Einspaltig | Mehrspaltig |
| Calls-to-Action | Buttons in voller Breite | Buttons im Textfluss |
| Formulare | Einspaltig | Mehrspaltig |
| Bilder | Randlos über die volle Breite | In Spalten eingebettet |
Darüber hinaus skaliert eine responsive Landingpage Bilder und Videos passend zum Bildschirm. Auch die Schriftgröße kann sich je nach Gerät vergrößern oder verkleinern. So erleben Besucher die Seite reibungslos, ganz gleich, über welches Gerät sie darauf zugreifen.
Vorteile einer responsiven Landingpage
Es gibt mehrere wichtige Gründe, warum responsives Design 2023 für Landingpages unverzichtbar ist:
Die mobile Nutzung wächst weiter: Über 60 % des Website-Traffics stammen inzwischen von Mobilgeräten. Eine nicht responsive Landingpage bietet mobil eine schlechte Nutzererfahrung und kostet Conversions.
Bessere SEO: Google nutzt Mobilfreundlichkeit inzwischen als Rankingfaktor. Ein responsives Design macht Ihre Seite für Suchmaschinen leichter zugänglich.
Weniger Pflegeaufwand: Eine einzige responsive Seite lässt sich leichter bearbeiten und optimieren als getrennte Seiten für Mobilgeräte und Desktop.
Höhere Conversion-Raten: Weil sie auf allen Geräten ein optimales Erlebnis bieten, konvertieren responsive Landingpages besser. CSS-Tricks stellte bei responsiven Seiten 28 % mehr Leads fest.
Designprinzipien für responsive Landingpages
Bei der Gestaltung einer responsiven Landingpage sollten Sie einige wichtige Grundsätze beachten:
Mobile-First-Design
Beim Mobile-First-Ansatz gestalten Sie zuerst für mobile Bildschirme und erst danach für größere Breakpoints. So stellen Sie sicher, dass die für die Conversion entscheidenden Elemente auf dem Smartphone gut sichtbar sind. Beginnen Sie mobil mit einem einspaltigen Layout und wenig Inhalt.
Flexible Bilder und Videos
Bilder und Videos sollten sich auf verschiedenen Geräten proportional anpassen und skalieren lassen. Vermeiden Sie Elemente mit fester Breite. Optimieren und komprimieren Sie Dateien, damit die Seite schnell lädt.
Diese Bildformate und -größen empfehlen sich für responsive Seiten:
| Bildtyp | Empfohlenes Format | Maximale Breite |
|---|---|---|
| Hero-Bild | JPEG | 1400 px |
| Icons | SVG | 48 px |
| Logos | SVG | 250 px |
| Produktfotos | JPEG | 800 px |
| Beitragsbilder | JPEG | 1200 px |
Gut lesbare Typografie
Legen Sie Schriftgrößen in relativen Einheiten wie EM oder REM statt in absoluten Pixeln fest. So passt sich der Text flexibel an unterschiedliche Viewports an. Auf Mobilgeräten sollten die Zeilen kurz sein, damit der Text gut lesbar bleibt.
| Gerät | Optimale Schriftgröße | Zeilenlänge |
|---|---|---|
| Smartphone | 16 px | 45 bis 90 Zeichen |
| Tablet | 18 px | 90 bis 120 Zeichen |
| Desktop | 20 px | 120 bis 150 Zeichen |
Klickbare Elemente
CTAs und andere klickbare Elemente wie Absende-Buttons sollten groß genug sein, damit man sie auf dem Smartphone bequem antippen kann. Lassen Sie rund um diese Elemente ausreichend Weißraum.
Empfohlene Zielgrößen auf Mobilgeräten:
- Buttons: mindestens 44 px hoch
- Touch-Ziele: mindestens 48 px hoch und breit
Planen Sie um Buttons und Touch-Ziele mindestens 8 px Innenabstand ein.
Klare Navigation
Das Navigationsmenü sollte für Mobilgeräte angepasst werden, meist indem die Hauptlinks hinter einem „Hamburger“-Icon verschwinden. Achten Sie darauf, dass Menülinks und Inhalte mit wenigen Fingertipps erreichbar sind.
Conversion-Elemente optimieren
Die zentralen Elemente einer Landingpage, die Conversions erzielen soll, müssen auf Responsivität und Leistung ausgelegt sein:
Nutzenversprechen und Hero-Bereich
Auf dem Desktop enthält dieser obere Bereich einer Landingpage meist eine Überschrift, eine Unterzeile und optional Bilder oder ein Video, die das Nutzenversprechen schnell vermitteln.
Auf dem Smartphone konvertiert er besser als einzelne Spalte: oben die Überschrift, darunter die Unterzeile und der CTA-Button, alles untereinander angeordnet.
Formular zur Leadgewinnung
Formulare müssen auf Mobilgeräten gut bedienbar sein, mit größeren, leicht antippbaren Feldern und Absende-Buttons. Beschränken Sie die Formularfelder auf das Nötigste. Zeigen Sie Formulare mobil in einer eigenen Spalte an, um Ablenkungen zu vermeiden.
Call-to-Action-Buttons
CTAs sollten sich durch kontrastreiche Farben optisch abheben. Sorgen Sie dafür, dass sie auf Desktop und Smartphone gut sichtbar sind und genügend responsiven Abstand haben. Verwenden Sie wirkungsvolle, auf Conversions ausgerichtete Button-Texte wie „Kostenlos testen“.
Seitenabschnitte
Teilen Sie lange Inhalte in kurze Abschnitte auf, die optisch durch Weißraum voneinander getrennt sind. So lassen sie sich auf dem Smartphone leichter überfliegen. Blenden Sie weniger wichtige Inhalte mobil in einem Akkordeon-Menü aus.
Vertrauenssymbole und Social Proof
Kundenstimmen, Sicherheitssiegel, Zertifizierungen und Bewertungen sollten responsiv sein. Auf dem Smartphone stehen sie am besten untereinander statt nebeneinander.
Ladezeit von Landingpages optimieren
Die Ladegeschwindigkeit hat großen Einfluss auf Absprungrate und Conversions von Landingpages. Diese Tipps helfen bei der Optimierung:
- Halten Sie das Seitengewicht gering, indem Sie Bilder komprimieren und überflüssigen Code entfernen
- Minimieren Sie CSS-, JavaScript- und HTML-Dateien
- Nutzen Sie ein Content Delivery Network (CDN) für weltweit schnellere Ladezeiten
- Aktivieren Sie Browser-Caching und gzip-Komprimierung
- Laden Sie nicht benötigtes JavaScript verzögert
- Optimieren Sie Bilder und nutzen Sie Lazy Loading
- Reduzieren Sie Weiterleitungen, um weniger Serveranfragen zu erzeugen
- Testen Sie die Geschwindigkeit auf verschiedenen Verbindungen und Geräten mit Online-Tools wie Google PageSpeed Insights
Diese Richtwerte für die Ladezeit sollten Sie anstreben:
| Kennzahl | Zielwert |
|---|---|
| Time to Interactive | < 5 Sek. auf Mobilgeräten |
| Ladezeit der Seite | < 3 Sek. auf dem Desktop |
| Seitengewicht | < 3 MB |
| Anfragen | < 50 |
Mobilfreundlichkeit testen
Um die Responsivität Ihrer Landingpage zu prüfen, haben Sie mehrere Möglichkeiten:
- Responsive-Tester im Browser: Diese Browser-Add-ons oder -Erweiterungen zeigen Ihnen, wie Ihre Seite auf verschiedenen Bildschirmgrößen aussieht. Beliebt sind Responsive Viewer, Window Resizer und Responsive Design Checker.
- Online-Tests zur Mobilfreundlichkeit: Google bietet einen kostenlosen Test auf Optimierung für Mobilgeräte (Mobile-Friendly Test) an. Andere Online-Tools wie Test Studio und MobiReady crawlen Ihre Seite und decken Probleme auf.
- Auf echten Mobilgeräten: Testen Sie immer auch direkt auf echten Smartphones und Tablets, um das responsive Verhalten selbst zu erleben. So entdecken Sie auch subtile Probleme.
- Google Search Console: Im Bericht zur Nutzerfreundlichkeit auf Mobilgeräten in der Google Search Console finden Sie Optimierungshinweise. Er zeigt Probleme an, die Ihrer mobilen SEO schaden.
Kontinuierliches Testen und Verbessern ist der Schlüssel zu einer erfolgreichen responsiven Landingpage.
Responsives Design ist für jede moderne Landingpage heute Pflicht. Da die mobile Nutzung stark zunimmt, können es sich Unternehmen schlicht nicht leisten, auf dem Smartphone schlecht zu konvertieren.
Wenn Sie die Best Practices für responsives Design befolgen, die zentralen Elemente auf Conversions optimieren und laufend auf verschiedenen Geräten testen, schaffen Sie 2023 leistungsstarke responsive Landingpages, die Nutzer überzeugen und Ergebnisse liefern.
Der Aufwand für Responsivität zahlt sich durch mehr Umsatz und Leads auf Desktop und Smartphone aus. Gestalten Sie Landingpages nach dem Mobile-First-Prinzip und sorgen Sie für eine einheitliche Nutzererfahrung. Nutzen Sie Tools, um Probleme aufzuspüren, und verbessern Sie die Responsivität Ihrer Landingpages kontinuierlich.
Häufige Fragen
Wie wähle ich die Breakpoints für Smartphone-, Tablet- und Desktop-Layouts?
Breakpoints sind die Bildschirmbreiten, bei denen sich das Layout Ihrer Seite ändert. Gängige Breakpoints:
- Smartphone: 0 bis 767 px
- Tablet: 768 bis 1024 px
- Desktop: ab 1025 px
Testen Sie verschiedene Breakpoints und optimieren Sie sie anhand Ihrer Analysedaten.
Sollte ich mobile Nutzer auf eine separate mobile Landingpage weiterleiten?
Eine Weiterleitung auf eine separate Mobilseite gilt nicht mehr als Best Practice. Nutzen Sie eine einzige responsive Seite, die für alle Geräte optimiert ist. Separate Mobilseiten verursachen zusätzlichen Pflegeaufwand und können Ihrer SEO schaden.
Welcher Page Builder eignet sich am besten für responsive Landingpages?
Viele Page Builder wie Instapage, Unbounce und der Landing Page Maker von Mailchimp unterstützen responsives Design von Haus aus. Testen Sie verschiedene Builder, um herauszufinden, welcher die besten Vorlagen und die nötige Flexibilität für Ihre Landingpages bietet.
Wo bekomme ich hochwertige responsive Bilder für meine Landingpage?
Suchen Sie nach Bilddatenbanken mit responsiven und optimierten Optionen wie Unsplash, Pexels und Burst. Für Produktbilder arbeiten Sie mit Ihrem Designteam zusammen oder nutzen einen Dienst wie Penji.
Sollte ich Parallax-Scrolling auf meiner responsiven Landingpage einsetzen?
Parallax-Scrolling kann elegant aussehen, schadet aber oft der Ladezeit und dem responsiven Design. Halten Sie das mobile Erlebnis schnell und einfach. Geschwindigkeit geht vor Parallax-Effekten.
Wie finde ich Conversion-Engpässe auf dem Smartphone und auf dem Desktop?
Führen Sie für Ihre Landingpage konsequent Split-Tests auf allen Geräten durch. Segmentieren Sie die Leistungsdaten in Google Analytics nach Mobilgeräten und Desktop. So erkennen Sie Unterschiede im Nutzerverhalten und Hürden bei der Conversion. Optimieren Sie entsprechend.
