Zuletzt aktualisiert am 9. April, 2023 von Roman
Du möchtest herausfinden, du eine mobile Landing Page erstellen kannst? Dann bist Du in meinem Artikel genau richtig, in dem ich Dir mehr als 17 Tipps und Beispiele zeige, wie du eine konvertierende Landing Page für das Smartphone gestalten kannst und auf was dabei zu achten ist.
Funnelcockpit ist das Beste Landing Page Tool und zudem “Made in Germany” und DSGVO konform.
Onepage ist eine nur auf Landing Pages fokussierte und deswegen einfach zu bedienende Software.
Leadpages ist eine der besten Landing Page Software Lösungen auf dem Markt. Es ist super einfach zu bedienen und Dir stehen unzählige conversionstarke Vorlagen zur Verfügung.
Hast Du eine spezielle mobile Landing Page?
Die mobile Suche und das mobile Surfen haben den Desktop PCs längst den Rang abgelaufen. Und dennoch sind die Conversion Rates bei mobilen Nutzern nach wie vor viel niedriger als bei ihren Desktop-Kollegen. Was ist hier also los?
Wenn es um die Gestaltung von Landing Pages für mobile Endgeräte geht, gibt es eine Reihe von Problemen, die Smartphone-Nutzer davon abhalten, höhere Conversion Raten zu erzielen. Zum Beispiel:
- Langsam ladende Webseiten
- Unübersichtliche Designs
- Schwer auffindbare CTAs
- Endloses Scrollen
- Langwierige Konvertierungsprozesse
Diese Art von Problemen sind nicht nur auf die mobile Benutzererfahrung beschränkt. Allerdings sind sie auf dem Handy deutlich verschärft – und die Entwicklung der Conversion Rate zwischen Desktop und Handy spiegelt dies direkt wider.
Dies ist ein großes Problem.
Der Hauptzweck einer Landing Page besteht darin, Besucher zu Abonnenten, Followern, Mitgliedern, Kunden, Klienten und so weiter zu machen. Wenn deine Marketing-Kampagnen und Web-Empfehlungen mobile Nutzer auf deine Seite bringen und diese nicht in der Lage ist, sie zu konvertieren, wirst du mit einem undichten und sehr teuren Sales Funnel enden.
Webdesigner müssen sich jetzt einen neuen Plan einfallen lassen um spezielle mobile Landing Pages zu gestalten. Das responsive Design hat zwar dafür gesorgt, dass der mobile Traffic den Desktop-Traffic überholt hat, aber es ist noch mehr nötig.
Im Folgenden werden wir uns ansehen, warum du spezielle mobile Landing Pages erstellen musst und wie du das machst, damit sie konvertieren.
Inhaltsverzeichnis
- 1 Was ist eine mobile Landing Page?
- 2 Was ist der Unterschied zwischen Desktop und mobilen Landingpages?
- 3 Warum ist es wichtig, eine mobile Landing Page zu erstellen?
- 4 Bevor du beginnst eine mobile Landing Page zu gestalten: Verstehe deine mobile Zielgruppe und deine Kennzahlen.
- 5 Wie man eine hoch konvertierende mobile Landing Page erstellt – 17 Mobile Landing Page Best Practices
- 5.1 Erstelle eine separate mobile Landing Page
- 5.2 Gestalte die Landing Page mit einem Mobile Page Builder
- 5.3 Denk an Mobile-First Design
- 5.4 Achte darauf, wie sich das Design deiner Landing Page auf die Ladegeschwindigkeit auswirkt
- 5.5 Das Design sollte minimalistisch sein
- 5.6 Begrenze die Anzahl der Bilder
- 5.7 Verwende ein einspaltiges Layout
- 5.8 Taps reduzieren
- 5.9 Achte auf den Inhalt above the fold
- 5.10 Sticky Bars und Buttons einbinden, wenn sie relevant sind
- 5.11 Sei prägnant in deinen Texten.
- 5.12 Füge visuelle Unterbrechungen in den Text ein
- 5.13 Formulare für mobile Geräte optimieren
- 5.14 Einen CTA-Button hinzufügen
- 5.15 Erwäge das Hinzufügen eines Click-to-Call-Buttons
- 5.16 Click-to-Scroll implementieren
- 5.17 A/B-Test
- 6 Mobile Landing Page Beispiele
- 7 Welches Tool zur mobile Landing Page Erstellung soll ich verwenden?
- 8 FAQ – Häufige Fragen zum Thema mobile Landing Pages
- 9 Fazit – Mobile Landing Pages erstellen
Was ist eine mobile Landing Page?
Eine mobile Landing Page ist eine Webseite, die für mobile Browser entwickelt wurde und sich öffnet, wenn ein Nutzer mit dem Smartphone auf ein Suchergebnis oder eine Anzeige klickt. Diese Seite sollte ein Ziel, einen Call-to-Action, eine einfache Navigation und ein einfaches Design haben. Sie hat ein konventionelles Ziel und bringt den Nutzer dazu, eine gewünschte Handlung auszuführen.
Eine mobile Landing Page ist somit eine Webseite, die speziell für die Konversion von Smartphone-Nutzer entwickelt wurde.
Was ist der Unterschied zwischen Desktop und mobilen Landingpages?
Während die Ziele beider Seiten im Grunde die gleichen sind (d.h. zu konvertieren), sind das Design und der Call-to-Action nicht unbedingt gleich.
Das liegt daran, dass sich die Absichten der mobilen Nutzer manchmal von denen der Desktop-Nutzer unterscheiden. Wer zum Beispiel auf der Homepage eines Restaurants eine Reservierung vornehmen möchte, nutzt auf dem Desktop vielleicht lieber das Buchungssystem und auf dem Handy die Click-to-Call-Option.
Die Navigation auf dem Handy ist auch nicht immer so einfach wie auf dem Desktop, so dass die ideale User Journey von Gerät zu Gerät unterschiedlich aussehen kann.
Warum ist es wichtig, eine mobile Landing Page zu erstellen?
Die Erstellung einer mobilen Version deiner Landing Page ist nicht nur eine nützliche Ergänzung, sondern eine Notwendigkeit.
Laut Statista gibt es im Jahr 2020 weltweit 3,5 Milliarden Smartphone-Nutzer/innen und diese Zahl steigt weiter an. 51% der Internetnutzer/innen kaufen Produkte online über Smartphones ein. Währenddessen nimmt die Zahl der Desktop-Nutzer/innen stetig ab. Dennoch sind die Umsätze auf mobilen Geräten immer noch niedriger als auf dem Desktop.
Diese Kluft zwischen Desktop- und mobilem Traffic wird seit Jahren immer größer. Nicht nur bei der Suche gibt es mehr mobile Nutzer als Desktop-Nutzer.
Nimm zum Beispiel Facebook. Es ist das beliebteste soziale Netzwerk, was es zu einem äußerst wertvollen Ort für die Vermarktung und Werbung für das eigene Unternehmen und die eigene Website macht.
Laut den Daten von Statista aus dem Jahr 2021 wird Facebook hauptsächlich von mobilen Nutzern verwendet.
Nur 1,5 % der Facebook-Nutzer greifen über einen Laptop oder Desktop-Computer auf die Anwendung zu. 16,7 % haben sowohl das Handy als auch den Computer für die Nutzung von Facebook verwendet. Und satte 81,8 % der Facebook-Nutzer/innen greifen nur über ihr Smartphone zu.
Es spielt keine Rolle, wie du hoffst, die Nutzer online zu erreichen. Organische Suchergebnisse. Pay-per-Click-Anzeigen bei Google. Social Media Marketing und Werbekampagnen.
Die meisten dieser Marketing- und Verkaufskampagnen werden die Kunden erreichen, wenn sie auf ihrem Smartphone sind.
Wir alle haben schon schlechte Erfahrungen beim Surfen im Internet auf unseren mobilen Geräten gemacht: Seiten, die schwer zu navigieren sind, lange Ladezeiten und zu viel Text, der es sehr schwer macht, zu verstehen, was man gerade sieht. Das passiert, weil nur 50 % der Landing Pages für mobile Geräte optimiert sind.
Um zu verhindern, dass deine Kunden eine solche Erfahrung mit deinen Produkten und Dienstleistungen machen, ist es am besten, eine Landing Page so zu gestalten, dass sie einen leicht verständlichen Text, ein einfaches Design, eine schnelle Ladezeit und eine einfache Navigation mit einem Smartphone hat.
Übrigens kannst Du Dir weitere wissenswerte Landing-Page Statistiken in diesem Artikel näher ansehen.
Werfen wir nun einen Blick auf einige Dinge, die du bei der Erstellung einer Landing Page für Smartphones mit hoher Conversion Rate beachten solltest.
Bevor du beginnst eine mobile Landing Page zu gestalten: Verstehe deine mobile Zielgruppe und deine Kennzahlen.
Wenn du deine Landing Page für mobile Endgeräte erstellen willst, solltest du zwei Arten von Informationen sammeln: die Daten deiner mobilen Zielgruppe und deine mobilen Kennzahlen.
Dein mobiles Publikum hat wahrscheinlich andere demografische, psychografische und verhaltensbezogene Merkmale als deine anderen Zielgruppen. Vergewissere dich, dass du weißt, wer diese Besucher sind, damit du deine mobile Landing Page auf ihre Interessen und Bedürfnisse abstimmen kannst. Schau dir zuerst deine Web- und Social Analytics an, um herauszufinden, mit welchen anderen Kanälen, Plattformen und Marken sie sich beschäftigen.
Stelle auch deine aktuellen mobilen Kennzahlen zusammen. Schließlich kannst du dich nicht verbessern, wenn du nicht weißt, welche Teile deiner Landing Page nicht zu Conversions führen. Mache es dir zur Gewohnheit, deine mobilen Landingpage-Kennzahlen zu beobachten, um nach Optimierungsmöglichkeiten zu suchen.
Wie man eine hoch konvertierende mobile Landing Page erstellt – 17 Mobile Landing Page Best Practices
Schauen wir uns kurz an, was du tun kannst, um die Conversions deiner mobilen Landing Page zu maximieren:
Erstelle eine separate mobile Landing Page
Es reicht nicht mehr aus, mobile-first oder responsive zu sein. Deine mobilen Landing Pages müssen speziell für die mobile Nutzung entwickelt werden, sonst werden sie nicht so konvertieren, wie du es möchtest.
Das Problem mit responsivem Design ist, dass alle Elemente immer noch für den Desktop und nicht für das Handy entwickelt wurden. Sogar der Ablauf der Seite wurde für die Nutzung am Desktop entwickelt. Da mobile Nutzerinnen und Nutzer anders suchen und surfen als Desktop-Nutzerinnen und -Nutzer, müssen deine Landing Pages für jedes Gerät angepasst werden, das der Kunde während seiner Reise benutzt.
Es ist wichtig, die Customer Journey zu planen und deine Seite für die Geräte zu optimieren, die auf dem Weg dorthin genutzt werden.
Gestalte die Landing Page mit einem Mobile Page Builder
Um eine wirklich responsive und mobile Landing Page zu erstellen, solltest du sie mit einem mobilen Editor und speziellen Tools gestalten.
Mit einem speziellen Mobile Builder kannst du die Landing Page auf einer Oberfläche gestalten und bearbeiten, die die gleiche Größe hat wie die Geräte der Zielnutzer. Du kannst auch Änderungen vornehmen, die nur für die mobile Landing Page gelten.
Meine Empfehlung hierfür ist der mobile Funnel Spezialist Perspective Funnels* , mit dem Du ganz einfach mobile Landing Pages erstellen kannst:
Perspective Funnels ist eine Sales Funnel Software, die sich auf mobile Funnels und mobile Landing Pages speziell für das Smartphone spezialisiert hat.
Perspective Funnels ist der wohl einfachste Mobile Funnel Baukasten mit dem du spielend einfach und in kürzester Zeit conversionstarke Funnels und mobile Landing Pages erstellst.
Dafür gibt es nach meiner Erfahrung kein vergleichbares Tool. Insbesondere zum Thema Mobile Funnel und mobile Landing Pages.
Deswegen absolute Empfehlung!
Für WordPress empfehle ich Divi* als WordPress Page Builder, um eine mobile Landing Page zu gestalten.
Meine Divi Erfahrungen kannst Du hier nachlesen.
Divi ist eine All-in-One-Lösung, die dir alles bietet, was du brauchst, um beeindruckende, dynamische und hochkonvertierende WordPress-Webseiten und Landing Pages zu erstellen.
Divi kombiniert großartiges Aussehen mit einer Fülle von beeindruckenden Funktionen, um ein wirklich nützliches Mehrzweck-WordPress-Theme zu liefern.
Die große Auswahl an Seitenvorlagen und der einfach zu bedienende Page Builder sind sowohl für diejenigen geeignet, die eine Out-of-the-Box-Lösung suchen, als auch für alle, die individuelle Designs ohne Programmierkenntnisse erstellen wollen.
TOP!
Denk an Mobile-First Design
Wenn du deine Website so gestaltest, dass die Nutzer sie von einem Smartphone aus aufrufen können, garantierst du, dass dein Kundenerlebnis auf jedem Gerät gut ist. Dabei gibt es mehrere Dinge zu beachten. E
Erstens musst du dafür sorgen, dass deine Website-Besucher/innen auch auf einem kleinen Smartphone-Bildschirm alles gut sehen können.
Zweitens solltest du deinen Kunden alle notwendigen Informationen zur Verfügung stellen, nach denen sie suchen könnten.
Drittens: Achte darauf, dass deine Website auf einem Smartphone leicht zu navigieren ist.
Und schließlich solltest du deine Besucher nicht mit übermäßigen Elementen wie Werbung oder aufdringlichen Pop-ups belasten.
Achte darauf, wie sich das Design deiner Landing Page auf die Ladegeschwindigkeit auswirkt
Wenn du erfolgreiche WordPress Websiten erstellen oder einen Blog starten willst, ist es wichtig zu lernen, wie du deine WordPress Website schneller machen und die im Rahmen einer Ladezeit Speed Optimierung verbessern kannst.
Langsamere Ladezeiten führen zu niedrigeren Conversion Rates. Selbst eine Verzögerung von nur 100 Millisekunden kann laut Akamai die Conversion Rate um 7% senken. Deloitte hat außerdem herausgefunden, dass eine Verbesserung der Website-Geschwindigkeit um nur 100 Millisekunden dazu führt, dass Kunden 10% mehr ausgeben.
Und das ist gerade bei mobilen Landing Pages noch eklatanter.
Die Geschwindigkeit der Seite ist auch besonders wichtig auf dem Handy, wo 53% der mobilen Besucher eine Seite verlassen, die länger als drei Sekunden zum Laden braucht.
Zudem haben auch hier Studien einen direkten Zusammenhang zwischen der Ladegeschwindigkeit von mobilen Landingpages und der Absprungrate festgestellt.
Ein aktueller Bericht von Google, Deloitte und 55 untersuchte 37 führende globale Marken und wie sich Änderungen der mobilen Ladegeschwindigkeit auf die Leistung ihrer Websites auswirken. Die Studie ergab, dass schon eine Verbesserung um 0,1 Sekunden die mobilen Konversionen erheblich steigern kann.
Bei Webseiten von Einzelhändlern beispielsweise stiegen die Conversions um 8,4 % und der durchschnittliche Bestellwert um 9,2 %. Lead-Generierungsseiten hingegen verbesserten ihre Absprungrate um 8,3 %.
Eine ältere Studie von Google aus dem Jahr 2017 bestätigt diesen Zusammenhang zwischen mobiler Seitengeschwindigkeit und Konversionsrate (oder deren Fehlen).
Alles, was du tun kannst, damit deine mobilen Landing Pages schneller laden, ist ein Muss.
Hier sind die wichtigsten Schritte, die du befolgen musst, um die Geschwindigkeit deiner mobilen Landing Page zu erhöhen.
- Reduziere deinen Inhalt. Der schnellste Weg, um deine Seite schneller laden zu lassen, ist, unnötige Elemente zu entfernen. Bedenke, dass visuelle Inhalte sehr viel Gewicht haben. Außerdem machen Bilder 20 % des Gewichts einer Webseite aus und erzeugen jeweils eine HTTP-Anfrage. Diese Anfragen gehen vom Browser des Nutzers aus, um die Elemente deiner Landing Page zu bilden. Dadurch wird die Geschwindigkeit deiner Seite verlangsamt.
- Optimiere Bilder. Um die Ladezeit deiner Seite zu erhöhen, solltest du darauf achten, dass deine Bilder mindestens unter 800 KB groß sind und das Format der Bilder auf deiner Seite berücksichtigen. Komprimiere das Bildmaterial mit speziellen Tools. Bedenke jedoch, dass du bei der Verwendung von JPEG eine geringere visuelle Wiedergabetreue, aber eine kleinere Datei nach der Komprimierung erhalten kannst. Bei PNG ändert sich das Bild nicht, aber die Datei wird nach der Komprimierung größer. Ich bin ein großer Verfechter der Bildoptimierung und empfehle, Bilder zu verwenden, die nicht mehr als 22KB-33KB wiegen, damit die Seiten blitzschnell laden.
- Übertrage Videos auf eine Drittanbieterplattform. Wenn du Videos auf deiner mobilen Landing Page hast, können sie die Geschwindigkeit deiner Seite verlangsamen. Deshalb solltest du darüber nachdenken, sie auf Streaming Plattformen wie YouTube, Vimeo oder Wistia zu übertragen, damit deine Seite schneller lädt.
Außerdem können schlechte User Experience Metriken insbesondere aktuell die Core Web Vitals, dazu führen, dass deine Seite in den Suchmaschinen schlechter rankt. Und Ladezeiten sind nun mal eines der wichtigsten Aspekte in der User Experience.
Du willst noch mehr Tipps zur Geschwindigkeitsoptimierung? Hier sind 21 Tipps um Deine Website schneller zu machen.
Und hier findest Du die besten Tools, um Deine Website zu beschleunigen.
Mit die Beste Alternative, um eine Webseite schneller zu machen wäre NitroPack*. NitroPack* ist ein All-in-One Website-Performance-Tool, das in den Worten ihrer Landing Page “der einzige Service ist, den du für eine schnelle Website brauchst”. Und das kann ich nur bestätigen.
Hier kannst Du Dir übrigens meinen ausführlichen Nitropack Erfahrungsbericht durchlesen.
Das Design sollte minimalistisch sein
Wenn es darum geht, mobile Landing Pages zu designen, solltest du dich an alle guten Designpraktiken halten, die du auch für den Rest der Website anwendest. Trotzdem solltest du darauf achten, wie lang diese Seiten werden können.
Manche mobilen Landing Pages sind gar nicht so lang. Nimm die Landing Page von Marie Forleo:
Was du siehst, ist das, was du bekommst. Unter der Einladung, ihr Audio-Training herunterzuladen, befindet sich lediglich eine Fußzeile mit einigen „As Seen On“-Logos.
Trotzdem hätte diese Seite länger sein können, wenn der Designer einen traditionellen responsiven Gestaltungsansatz verwendet hätte. Hier ist der Grund dafür:
Hätte sich diese Seite responsiv umgestaltet, wäre die Telefongrafik in einer eigenen Zeile erschienen und der Text und das Formular wären nach unten verschoben worden. Dadurch würde sich die Länge der Seite auf dem Handy verdoppeln. Bei einer so kleinen Landing Page ist das keine große Sache, aber bei einer längeren Seite könnte es erhebliche Auswirkungen haben.
Wenn du also mobile Landing Pages gestaltest, solltest du immer überlegen, was du tun kannst, um sie so kurz wie möglich zu machen, ohne den Inhalt zu beeinträchtigen.
- Kannst du Bilder entfernen?
- Die Abstände verkleinern?
- Kannst du den CTA und das Formular above the fold platzieren, damit die Besucher/innen konvertieren können, ohne durch alles andere scrollen zu müssen?
Das sind alles Dinge, über die du nachdenken solltest.
Begrenze die Anzahl der Bilder
Informative und interessante Bilder spielen eine wichtige Rolle bei der Gewinnung von Kunden. Deshalb ist es wichtig, sie für eine mobile Landing Page zu verwenden. Allerdings solltest du darauf achten, dass du das Design nicht mit zu vielen Bildern überlädst.
Übermäßiges Bildmaterial kann für deine Besucher/innen mehrere Probleme verursachen, sie
- wiegen viel und brauchen lange zum Laden;
- führen dazu, dass sich mobile Nutzer erschlagen fühlen;
- sie lassen deine mobile Landing Page unübersichtlich erscheinen.
Hier ist ein mobile Landing Page Beispiel von Restream*, das zeigt, dass eine Seite nicht immer Bilder enthalten muss, um visuell ansprechend zu sein.
Verwende ein einspaltiges Layout
Smartphones haben keinen Platz für mehrere Spalten. Sie können die Navigation und das Scrollen umständlich und unnatürlich machen. Mehrere Spalten, die für die Desktop-Version der Website verwendet werden, eignen sich nicht für mobile Geräte, da die Nutzer/innen nur etwa 3 x 5 cm Platz haben, um auf deiner Seite zu navigieren.
Ein einspaltiges Layout ist einfach einzurichten und eignet sich am besten für mobile Bildschirme. Es besteht aus einer Reihe von übereinander gestapelten Feldern. Dieses Layout enthält eine Kopfzeile, ein Feld für den Inhalt, eine Fußzeile und ein horizontales Navigationsmenü.
Taps reduzieren
Wenn mobile Nutzerinnen und Nutzer nach einem bestimmten Produkt suchen, wollen sie die Suche mit Sicherheit eingrenzen, um so schnell wie möglich ein Produkt zu finden. Hier ist es deine Aufgabe, den Prozess zu erleichtern und die Suche einzugrenzen. Gestalte eine mobile Landing Page so, dass ein Kunde nicht viele Klicks machen muss.
Achte auf den Inhalt above the fold
Der Inhalt above the fold ist auf jeder Landing Page entscheidend, aber er ist besonders wichtig für die Konvertierung von mobilen Nutzern. Die Aufmerksamkeitsspanne auf dem Handy ist miserabel: Wir verbringen weniger Zeit auf Websites als auf dem Desktop und die Absprungrate ist viel höher. Das bedeutet, dass deine Inhalte die Besucher in dem Moment fesseln müssen, in dem sie deine Seite besuchen.
Sticky Bars und Buttons einbinden, wenn sie relevant sind
Früher gab es für Landing Pages keine Kopfzeile. Das machte es den Besuchern leichter, sich auf das Angebot der Seite zu konzentrieren und auf nichts anderes.
Bei der Gestaltung von langen Landingpages für Mobilgeräte ist das jedoch nicht unbedingt die beste Idee. Wenn die Seite nicht hauptsächlich hochqualifizierte Besucher/innen anzieht und ein großer Teil von ihnen garantiert konvertiert, kann eine Landing Page ohne Navigation dazu führen, dass sich deine mobilen Nutzer/innen „festgefahren“ fühlen.
Du musst auch bedenken, wie sich das auf das Scrollen auswirken kann. Ohne Navigation oder zumindest einen „Click to Scroll“-Button müssen sie viel scrollen, um wieder an den Anfang oder das Ende der Seite zu gelangen oder um auf eine andere Seite zurückzukehren.
Deshalb ist es eine gute Idee, deine mobilen Landing Pages mit einer minimalen und sticky Navigation zu gestalten.
Sei prägnant in deinen Texten.
Wenn du eine mobile Landing Page erstellst, solltest du dir Gedanken darüber machen, wie die Nutzer/innen mit deinen Inhalten umgehen. Hier sind einige Punkte, die du beachten solltest:
- Verwende eine Überschrift, die spezifisch und kurz ist;
- Achte darauf, dass deine Überschrift ein einzigartiges Nutzenversprechen enthält;
- Füge bei Bedarf eine Zwischenüberschrift hinzu;
- Achte darauf, dass dein Text klar, prägnant und auf den Punkt gebracht ist;
- Verwende Aufzählungspunkte, um die wichtigsten Punkte hervorzuheben und die Aufmerksamkeit des Kunden zu erregen;
- Achte darauf, dass deine Sätze und Absätze kurz sind, um den Nutzer nicht mit zu vielen Informationen zu überfordern.
Hier ist ein hervorragendes Beispiel für die mobile Landing Page von Mouseflow*. Diese Seite verwendet eine klare Überschrift, die die Hauptbotschaft dieses Dienstes vermittelt, kurze Sätze, um die Vorteile von Mouseflow* zu beschreiben, und einen einfach zu betätigenden CTA-Button, der ein kostenloses Angebot enthält.
Füge visuelle Unterbrechungen in den Text ein
Du kannst zwar nicht immer bestimmen, wie viel Inhalt auf eine Landing Page kommt, aber die Designentscheidungen, die du triffst, können dazu beitragen, dass die Nutzer/innen die Seite schneller überfliegen und lesen können.
Wenn es um den Text geht, sind Hierarchie und Abstände besonders wichtig.
Um sicherzustellen, dass die Nutzer/innen das Wichtigste finden, solltest du große Überschriften verwenden, um den Inhalt einzuleiten und zu organisieren. Und kürze die Absätze, wann immer möglich. Du willst nicht, dass deine mobilen Nutzer/innen scrollen müssen, um einen einzigen Absatz zu lesen. Fettgedruckte Sätze, Zitatboxen und Symbole sind weitere Möglichkeiten, wie du das Design deiner Texte mobilfreundlicher gestalten kannst.
Formulare für mobile Geräte optimieren
Wenn du Informationen über Kunden sammeln willst, die deine Website mit Smartphones besuchen, ist es wichtig, die Formulare für mobile Geräte zu optimieren. Das musst du tun:
- eine Überschrift schreiben, die den Nutzer zum Klicken verleitet;
- sicherstellen, dass das Formular die erforderlichen Mindestfelder (Name, Adresse, E-Mail, Telefonnummer) enthält, um deine Ziele zu erreichen;
- Bilder vermeiden, da sie viel Platz brauchen;
- Achte darauf, dass das Formular schnell geladen wird;
- Entwirf einen leicht zu bedienenden „Absenden“-Button und denke daran, dass die Mindestgröße 44×44 Pixel betragen sollte;
- Implementiere Dropdown-Menüs und automatisch ausgewählte Antworten, um den Kunden Zeit zu sparen;
- gib die erforderlichen Felder an;
- Verwende eine vertikale Ausrichtung für die Felder deines Formulars, damit sie auf den Bildschirm eines mobilen Geräts passen.
Hier ist ein mobile Landing Page Beispiel für ein mobil optimiertes Formular von Restream, einer Multistreaming Software:
Einen CTA-Button hinzufügen
Deine Landing Page hat ein Ziel: Sie soll konvertieren.
Auf einer normalen Webseite solltest du deinen Call-to-Action vielleicht erst ganz am Ende der Seite einfügen – nachdem du sie ein wenig aufgeklärt hast. Landingpage-Besucher brauchen aber nicht immer so viel Unterstützung.
Da sie in der Regel über eine gezielte Anzeige oder eine Marketingkampagne auf eine Landing Page geleitet werden, wissen sie bereits, was sie dort erwartet. Es macht also keinen Sinn, den CTA in der Mitte oder am Ende der Seite zu verstecken, besonders nicht auf einer langen mobilen Seite.
Platziere ihn stattdessen ganz oben und dann noch einmal am Ende der Seite. Je nach Länge der mobilen Landing Page kann es auch eine gute Idee sein, den CTA in der Mitte der Seite zu platzieren!
Drift setzt den Call to Action ganz oben auf der Seite und macht mit einem kleinen Farbwechsel auf ihn aufmerksam. Diese coole Funktion wurde inzwischen geändert, aber wir wollten sie hier verwenden, um dir zu zeigen, was man damit machen kann.
Wenn du auf der Seite von Drift nach unten scrollst, bekommst du ungefähr in der Mitte denselben Call-to-Action (ohne die Farben), um dich daran zu erinnern, warum du hier bist.
Die Mindestgröße dieses Buttons für ein mobiles Gerät beträgt 44 x 44 Pixel. Nach dem Gutenberg-Prinzip beginnen die Nutzer/innen mit dem Scannen der Seite in der linken oberen Ecke und enden unten rechts. Deshalb ist der beste Platz für einen CTA-Button am Ende des Scanpfads der Besucher, wenn sie sich mit deinem Inhalt vertraut machen. Der Button sollte sich vom Hintergrund abheben, damit er gut sichtbar und groß genug ist, um angeklickt werden zu können.
Hier ist ein mobile Landing Page Beispiel für einen CTA-Button von Memberspot, einer Online Kurs Plattform, der leicht anzuklicken ist und nach dem Text platziert wird.
Erwäge das Hinzufügen eines Click-to-Call-Buttons
Wenn einige Daten über deine Produkte oder Dienstleistungen für einen Nutzer deiner mobilen Landing Page nicht leicht zugänglich sind, solltest du deine Kontaktinformationen bereitstellen. Zu diesem Zweck kannst du einen Click-to-Call-Button verwenden. Platziere ihn so, dass die Schaltfläche für deine Kunden sichtbar ist.
Insbesondere wenn dein Konversionsziel einen Telefonanruf beinhaltet (oder auch nicht), ist ein Click-to-Call-Button ein kluger Schachzug. Eine mobile Landing Page mit komplizierten Angeboten wird davon am meisten profitieren. Diese Buttons machen es den Leuten leicht, Antworten von deinem Team zu bekommen. Schließlich benutzen deine Besucher bereits ihr Telefon, warum sie also nicht zum Reden bringen?
Click-to-Scroll implementieren
In den meisten Fällen ist eine kürzere mobile Landing Page besser. Es gibt jedoch Situationen, in denen die Nutzer/innen dein Angebot durchstöbern oder etwas auf deiner Website lesen möchten. In diesen Fällen kannst du Click-to-Scroll einsetzen.
Click-to-Scroll bedeutet, dass du Navigationsbuttons einrichtest, auf die ein Nutzer klicken kann, um auf eine längere Seite zu gelangen, die gescrollt werden muss. Anstatt die Besucher deiner Website zum Scrollen zu zwingen, überlässt du ihnen die Entscheidung.
A/B-Test
Die wichtigste Best Practice für mobile Landing Pages haben wir uns für den Schluss aufgehoben: A/B-Tests. Du erhältst so viele Informationen, die du nutzen kannst, um deine Seite zu verbessern, die Conversion zu steigern und deinen Umsatz zu erhöhen, indem du nur kleine Änderungen vornimmst.
Hier ist das grundlegende Format für einen A/B-Test:
- Entscheide dich für ein Problem, das du lösen willst, z. B. die Erhöhung der Conversion Rates.
- Lege fest, was du vergleichen willst, z. B. ob ein Preisnachlass von 10 % besser ist als ein kostenloser Versand?
- Führe den Test durch, indem du zwei Versionen der Landing Page erstellst, die sich nur durch den Artikel unterscheiden, den du vergleichen willst.
- Finde den Gewinner heraus, indem du deine Daten analysierst und die Ergebnisse deines A/B-Tests überprüfst.
- Überarbeite deine Experimente und führe sie erneut durch.
Es gibt buchstäblich Tausende von Möglichkeiten, deine Website für Split-Tests zu zerlegen.
Mehr Informationen zum Thema Landing Page optimieren findest Du in meiner umfassenden Anleitung.
Mobile Landing Page Beispiele
Nachdem wir uns damit beschäftigt haben, wie man eine mobile Landing Page erstellt, die konvertiert, kannst du dich von diesen Beispielen großartiger mobiler Landing Pages inspirieren lassen.
Es gibt so viele Möglichkeiten, Besucher auf einer Landing Page zu konvertieren.
- Jetzt kaufen.
- Melde dich für unseren Newsletter an.
- Vereinbare eine Demo.
Weil es so viele Möglichkeiten gibt, mobile Landing Pages zu gestalten, gibt es keine Einheitslösung für die Gestaltung.
Schauen wir uns einige der verschiedenen Möglichkeiten an, wie beliebte Landing Pages das mobile Erlebnis für die Conversion optimiert haben:
Mobile Landing Page Beispiel #1: Mouseflow
Mouseflow* hat eine Landing Page für mobile Werbung, die wirklich funktioniert. Hier ist, was Mouseflow* richtig gemacht hat:
- Alle wichtigen Informationen passen auf einen einzigen, kompakten Bildschirm (above the fold)
- Der erste Text ist sehr kurz und spricht die wichtigsten Anliegen der Besucher an.
- Die Seite enthält einen Social Proof – die Anzahl der Kunden
- Der CTA bietet ein kostenloses Angebot und befindet sich auf einem farblich abgesetzten Button
- Es gibt ein Video für diejenigen, die mehr Informationen benötigen. Da Videos bei mobilen Nutzern sehr beliebt sind, ist dies ein kluger Schachzug
Der Rest der Landing Page enthält zusätzliche Informationen. Die Seite ist zwar lang, aber die meisten mobilen Nutzer/innen können das, was sie brauchen, auf den ersten Blick erkennen, sodass die Seite gut funktioniert.
Mobile Landing Page Beispiel #2: Restream
Hier ist ein weiteres gutes Beispiel für eine mobile Landing Page. Es ist für Restream*.
Einige der besten Eigenschaften dieser Landing Page sind:
- Die mobile Landing Page ist minimalistisch und kurz
- Der CTA ist sofort auf dem ersten Bildschirm sichtbar
- Mobile Besucher können sich sofort anmelden, da das Formular das erste ist, was sie sehen.
- Der Text ist kurz, prägnant und leicht verständlich, so dass man direkt weiß was die Software macht
Mobile Landing Page Beispiel #3: Apple TV
Dieses mobile Landing Page Beispiel von Apple wurde über Google Ads beworben. Hier ist, was mir daran gefallen hat:
- Das schlichte schwarz-weiße Farbschema mit einem Hintergrundvideo mit Filmausschnitten ist markengerecht und emotionalisierend
- Das Angebot ist klar und der CTA ist above the fold sichtbar
- Wenn Besucher nach unten wischen, erscheinen die wichtigsten TV-Sendungen des Dienstes zusammen mit CTA-Buttons und wiederholten Angeboten
Das Einzige, was ich ändern würde, wäre das Video im ersten Abschnitt der mobilen Landing Page, wenn es die Ladezeiten stark beeinträchtigen würde.
Mobile Landing Page Beispiel #4: Fronks
Hier ist ein mobile Landing Page Beispiel für eine Marke, die Bio-Nussmilch anbietet und den Kunden eine Lieferung anbietet.
Du wirst die Landing Page zu schätzen wissen, die die notwendigen Informationen für Käufer enthält und minimalistisch gestaltet ist. Außerdem hat die Landing Page von Fronks eine kurze und klare Überschrift, die erklärt, was das Unternehmen anbietet.
Mobile Landing Page Beispiel #5: Todoist
Hier ist ein mobile Landing Page Beispiel für Todoist*, eine der besten Produktivitäts Apps.
Die wichtigsten Erkenntnisse für mobile Landingpages:
- Hoher Kontrast
- Call to Action im oberen Bereich der Seite
- viel Weißer Raum
- Minimalistische Headline und Grafiken, die genau das symbolisieren, um was es in Todoist geht.
Mobile Landing Page Beispiel #6: Promo
Promo sind Experten darin, Videos zu nutzen, um die Konversionen auf ihren Landing Pages zu steigern. Und das sollten sie auch sein: Mit der einfach zu bedienenden Plattform können Kunden schnell Videos für gesponserte Social Media Posts erstellen. Wenn Promo keine Videos in ihrem Marketing einsetzt, ist das so, als würde Superman die Kraft des Fliegens nicht für sein Marketing nutzen.
Aber Videoinhalte können für mobile Besucher ein großes Problem darstellen. Wenn sie unvorsichtig eingesetzt werden, können sie das Gewicht einer Landing Page drastisch erhöhen und zu zermürbenden Ladezeiten für unterwegs führen. Eine schlechte Seitengeschwindigkeit kann alle Konversionsraten zunichte machen, die du dir durch die Einbindung eines Videos erhofft hast.
Die wichtigsten Erkenntnisse für mobile Landingpages:
- Schaffe ein leichtes Erlebnis. Man sieht es der mobilen Version dieser Landing Page nicht an, aber Promo hat viel getan, um den Inhalt gegenüber der Desktop-Version zu verschlanken. Auf der großen Seite gibt es ein Auto-Play-Video anstelle des Hero Shots und dynamische Schaltflächen, die die Beispielvideos überlagern. Die mobile Version verwendet stattdessen statische Bilder, die das Video erst abspielen, wenn der Besucher mit ihnen interagiert hat. Diese sorgfältige Optimierung trägt wesentlich dazu bei, dass die Besucher ein tolles Erlebnis haben.
- Nutze den Platz oberhalb des Falzes optimal. Die Überschrift verdeutlicht das Alleinstellungsmerkmal von Promo für dieses Zielsegment, nämlich die einfache Erstellung von Videos für soziale Medien. In Verbindung mit einem klickbaren Erklärvideo und einer prominenten Handlungsaufforderung nutzt Promo den verfügbaren Platz optimal aus, um einen tollen ersten Eindruck über der Falz zu vermitteln.
- Baue Glaubwürdigkeit mit vertrauenswürdigen Markenlogos auf. Promo hat Facebook- und Instagram-Partnerlogos knapp unterhalb des folds platziert, um sofort zu bestätigen, dass sie von den wichtigsten Social Media-Plattformen als vertrauenswürdig eingestuft werden – ein wichtiger Punkt, wenn du versuchst, mit einem Social Media Use Case zu gewinnen. Die Seite enthält außerdem eine Reihe von Kundenlogos und individuelle Kundenreferenzen, die die Glaubwürdigkeit weiter erhöhen.
Welches Tool zur mobile Landing Page Erstellung soll ich verwenden?
Um eine hochkonvertierende mobile Landing Page erstellen zu können, benötigst Du eine hochwertige Landing Page Software oder falls Du WordPress nutzt ein gutes Landing Page Plugin, das im Idealfall auch über entsprechende Vorlagen und Templates verfügt.
Dazu habe ich übrigens einen umfassenden Artikel verfasst. Meine Empfehlungen hieraus habe ich Dir in der Folgenden Tabelle grob zusammengefasst.
| Software | Beschreibung | Bewertung | Zugang |
|---|---|---|---|
Bestes Landing Page Tool | Wenn Du die in meinen Augen aktuell beste Sales Funnel Software und das beste Landing Page Tool nutzen möchtest, die zudem “Made in Germany” und DSGVO konform ist, und die auch von der Online Marketing Elite im deutschsprachigen Raum verwendet wird. TOP Empfehlung! | 9.8 | Jetzt Testen* |
Preis-/Leistungssieger | Onepage ist eine auf Landing Pages fokussierte, hochwertige und einfach zu bedienende Landing Page Software. Preis-/Leistungssieger und daher TOP Empfehlung. | 9.8 | Jetzt Testen* |
Die Beste Alternative | Leadpages ist eine der besten Landing Page Software Lösungen auf dem Markt. Es ist super einfach zu bedienen und Dir stehen unzählige conversionstarke Vorlagen zur Verfügung. Zudem ist Leadpages definitiv eine der günstigsten Optionen! | 9.7 | Jetzt Testen* |
TOP Mobile Landing Pages | Wenn Du ein wirklich tolles Tool mit einem starken einen Fokus auf mobile Funnel und Landing Pages nutzen willst, weil bspw. Deine Zielgruppe in erster Linie mobil unterwegs ist, um dadurch “besser” Leads zu generieren und diese in Kunden umzuwandeln. | 9.7 | Jetzt Testen* |
Starkes Tool mit KI  | Unbounce ist ein tolle und intuitives Landing Page Tool, das mit künstlicher Intelligenz ausgestattet ist. Der smarte Landing Page Builder von Unbounce ist deswegen sehr leistungsfähig, und zudem unglaublich einfach zu bedienen. Du kannst durch die KI Unterstützung ganz einfach dynamische Landing Pages für noch bessere Conversion erstellen. Die Seiten sehen professionell aus und sie konvertieren! Eine TOP Empfehlung! | 9.7 | Jetzt Testen* |
Top Page Builder  | Elementor ist einer der Besten WordPress Page Builder und Landing Page Plugins auf dem Markt. TOP Empfehlung! | 9.6 | Jetzt Testen* |
inkl. E-Mail Tool  | Wenn Du einen sehr guten Landing Page Builder sowie weitere zusätzliche sehr nützliche Funktionen suchst und zudem ein tolles und vor allem nahtlos integriertes E-Mail Marketing Tool nutzen willst. | 9.5 | Jetzt Testen* |
Tolle Alternative!  | Landingi ermöglicht es einfach und schnell Deine Landing Pages zu erstellen. Es kommt mit entsprechende Conversion Tools (Po-Ups). Der Pixel Perfect Landing Page Editor ist ein Alleinstellungsmerkmal. Eine tolle Alternative, mit sehr gutem Preis-Leistungsverhältnis. | 9.5 | Jetzt Testen* |
TOP All-in-One Tool!  | Wenn Du eine umfassende All-in-One Lösung suchst, die noch dazu über weitere Tools für Dein Online Business verfügt, dabei etwas komplex wird, aber dennoch ein unschlagbares Preis-/Leistungsverhältnis aufweist. | 9.5 | Jetzt Testen* |
Lifetime Deal!  | Wenn Du eine super schnelle, intuitiv zu bedienende Landing Page Software mit einem herausragenden Preis-/Leistungsverhältnis suchst. | 9.5 | Jetzt Testen* |
Top für WordPress  | Wenn du WordPress nutzt, und auf der Suche nach einem der Besten WordPress Page Builder Plugin bist, das du für mehrere (oder unbegrenzt viele) Seiten verwenden kannst. Zudem verfügt er über tausende von Styling-Optionen und ein fantastisches Layout-System. Er ist ideal für Anfänger und Entwickler gleichermaßen. | 9.4 | Jetzt Testen* |
Gut aber nur in englisch  | Wenn Du eine tolle All in One Lösung suchst, die leider nur in englisch verfügbar ist. | 9.1 | Jetzt Testen* |
Keine Empfehlung  | Wenn Du trotz der Nachteile unbedingt Clickfunnels nutzen möchtest. Alles in allem gibt es meiner Meinung nach aber bessere, schnellere und günstigere Lösungen. | 5.8 | Jetzt Testen* |
Darauf aufbauend kannst Du übrigens hier meine Funnelcockpit Erfahrungen, hier meine Perspective Funnels Erfahrungen, meine Onepage Erfahrungen, hier meine Unbounce Erfahrungen, hier meine Leadpages Erfahrungen, meine Builderall Erfahrungen, meine Divi Erfahrungen und hier meine GetResponse Erfahrungen im Detail nachlesen.
Meine Empfehlung speziell für mobile Landing Pages ist der mobile Funnel Spezialist Perspective Funnels* , mit dem Du ganz einfach mobile Landing Pages und auch Funnel erstellen kannst:
Perspective Funnels ist eine Sales Funnel Software, die sich auf mobile Funnels und mobile Landing Pages speziell für das Smartphone spezialisiert hat. Die Software ist super einfach zu bedienen und der Fokus des Tools auf die mobilen Endgeräte ist wirklich sinnvoll und noch dazu clever.
Und trotz der mobile Fokussierung von Perspective* können die mobile Funnels auf jedem Gerät besucht und genutzt werden. Also auch auf dem Desktop PC und nicht nur auf mobilen Endgeräten.
Du kannst zudem Perspective* 14 Tage kostenlos testen, um herauszufinden ob es das richtige Tool für Dich ist.
Für mich persönlich ist es das beste Tool um mobile Landing Pages und Funnel zu erstellen.
Perspective Funnels ist der wohl einfachste Mobile Funnel Baukasten mit dem du spielend einfach und in kürzester Zeit conversionstarke Funnels und mobile Landing Pages erstellst.
Dafür gibt es nach meiner Erfahrung kein vergleichbares Tool. Insbesondere zum Thema Mobile Funnel und mobile Landing Pages.
Deswegen absolute Empfehlung!
FAQ – Häufige Fragen zum Thema mobile Landing Pages
Nachfolgend gehe ich auf ein paar häufige Fragen rund um das Thema „mobile Landing Page erstellen“ ein:
Was ist eine Landing Page?
Eine Landing Page ist eine spezielle Seite, auf der Besucher landen sollen um dann eine bestimmte Aktion auszuführen. Sie ist EINE einzelne Webseite Deiner Website.
Das Elementare an einer Landing Page ist, dass sie EIN ganz spezielles Ziel verfolgt und voll auf dieses Ziel ausgerichtet ist.
Um das Ziel Deiner Landing Page dann auch tatsächlich zu erreichen muss die Landingpage den zum Ziel passenden Aufbau und die passende Struktur aufweisen, sowie über entsprechende Texte, die Werbetexte verfügen, die dem Interessenten auch „sagen“ was er auf der Landing Page konkret machen soll.
Was ist eine mobile Landing Page?
Eine mobile Landing Page ist eine spezielle Landing Page, die für mobile Browser entwickelt wurde und sich öffnet, wenn ein Nutzer mit dem Smartphone oder Handy auf ein Suchergebnis oder eine Werbeanzeige klickt. Diese mobile Landing Page sollte nur ein Ziel, einen Call-to-Action, eine einfache Navigation und ein einfaches Design haben und bringt den Nutzer dazu, eine gewünschte Handlung auszuführen. Eine mobile Landing Page ist somit eine Webseite, die speziell für die Konversion von Smartphone-Nutzer entwickelt wurde.
Welche Arten von mobile Landing Pages gibt es?
Je nach Ziel, wie zum Beispiel dem Verkauf eines Produktes, der Umwandlung eines Interessenten in einen Newsletter Abonnenten, der Umwandlung eines Interessenten in einen Webinar Teilnehmer in einem Webinar Funnel, etc. gibt es unterschiedliche Ausprägungsformen von mobile Landingpages bzw. mobile Landing Page Beispiele.
Darunter bspw.
- Sales Page
- Verkaufsseite
- Opt-In Seite
- Newsletter Landing Page
- Landing Page zur Leadgenerierung
- Dankesseiten
- Upsell Seiten
- Downsell Seiten
- Weitere Webseiten eines Sales Funnel
- usw.
Fazit – Mobile Landing Pages erstellen
Die Daten lügen nicht. Über Smartphones finden mehr Online-Aktivitäten statt als über andere Geräte. Trotzdem zögern Smartphone-Nutzer/innen immer noch, über diese Geräte zu konvertieren.
Aus diesem Grund müssen Webdesigner/innen bei der Erstellung von Landing Pages besonders auf das mobile Erlebnis achten. Der Zweck dieser Seiten ist es, Besucher/innen zu konvertieren. Deshalb müssen sie so gestaltet sein, dass Smartphone-Nutzer/innen sich wohlfühlen.
Das bedeutet Folgendes:
- Möglichst wenig Inhalt, durch den sie scrollen müssen
- Deine visuell kreative Note sowohl bei den Texten als auch bei der Gestaltung der Umgebung einbringen
- Keine Angst davor haben, Überflüssiges von der Desktop-Seite zu entfernen, um ein schlankeres mobiles Erlebnis zu schaffen
- Füge klebrige Elemente auf der Seite ein, damit sich mobile Nutzer nicht festgefahren oder überfordert fühlen
- Sicherstellen, dass der Call-to-Action immer in Reichweite des mobilen Nutzers ist, egal, wo er sich auf der Seite befindet.
Da es dafür eine Formel gibt, solltest du dir einen Mobile Page Builder wie bspw. Perspective* zulegen, mit denen du schnell und spezifische mobil Landing Pages erstellen kannst.
Perspective Funnels ist der wohl einfachste Mobile Funnel Baukasten mit dem du spielend einfach und in kürzester Zeit conversionstarke Funnels und mobile Landing Pages erstellst.
Dafür gibt es nach meiner Erfahrung kein vergleichbares Tool. Insbesondere zum Thema Mobile Funnel und mobile Landing Pages.
Deswegen absolute Empfehlung!
Was macht deiner Meinung nach eine gutem mobile Landing Page aus? Gibt es Beispiele für moble Landingpages, die wir ergänzen sollten? Teile uns deine Meinung in den Kommentaren unten mit!
