65 % des Search traffic, also Suchverkehrs und mehr als 80 % des Facebook-Verkehrs, also der Facebook Nutzung sind heute mobil. Ist deine mobile Landing Page bereit, diesen Traffic zu bewältigen? Dieser Leitfaden zeigt dir, wie du deine Seite so gestalten kannst, dass sie konvertiert.
Das mobile Suchen und Browsen hat den Desktop längst überholt. Und dennoch sind die Konversionsraten bei mobilen Nutzer*innen 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 *innen davon abhalten, höhere Konversionsraten 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 Konversionsrate zwischen Desktop und Handy spiegelt dies direkt wider.
Dies ist ein großes Problem. Der Hauptzweck einer Landing Page besteht darin, Besucher*innen zu Abonnenten, Anhängern, Mitgliedern, Kunden, Klienten usw. 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 Trichter enden.
Webdesigner*innen müssen sich jetzt einen neuen Plan einfallen lassen. 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 mobile-spezifische Landing Pages erstellen musst und wie du das machst, damit sie konvertieren.
Was ist eine mobile Landing Page?
Eine Landing Page ist eine Webseite, auf die Nutzer über Anzeigenkampagnen, Online-Empfehlungen, Marketingkampagnen und Suchergebnisse geleitet werden.
Eine Landing Page hat in der Regel nur eine einzige Aufforderung zur Handlung. Um die Chancen auf eine Konvertierung auf diesen Seiten zu verbessern, kann die Navigation minimiert werden, was jedoch nicht immer der Fall ist.
Eine mobile Landing Page ist eine Webseite, die speziell für die Konvertierung von Smartphone-Besuchern konzipiert ist.
Was ist der Unterschied zwischen Mobile und Desktop Landing Pages?
Während die Ziele beider Seiten im Grunde die gleichen sind (d. h. Konvertierung), sind das Design und die Aufforderung zum Handeln möglicherweise nicht die gleichen.
Das liegt daran, dass sich die Absichten der mobilen Nutzer*innen manchmal von denen der Desktop-Nutzer*innen unterscheiden. Jemand, der beispielsweise auf der Homepage eines Restaurants eine Reservierung vornehmen möchte, zieht es vielleicht vor, auf dem Desktop das Buchungssystem und auf dem Handy die Click-to-Call-Option zu nutzen.
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. Desktop-Benutzer*innen, die beispielsweise nach Angeboten für Autoversicherungen suchen, werden auf der Nationwide-Website auf die folgende Landing Page geleitet:
Sie ist minimalistisch gestaltet, gut organisiert und soll den Nutzern den Einstieg in den Angebotsprozess erleichtern. Mobile Nutzer finden eine ähnliche, wenn auch nicht identische, Landing Page vor:
Der Hero-Bereich auf beiden Landing Pages sieht ähnlich aus. Die Desktop-Version bietet den Nutzer*innen jedoch nur eine Schaltfläche „Angebot starten“, während die mobile Seite ein kurzes Formular enthält, in dem sie die Art des benötigten Versicherungsangebots sowie ihre Postleitzahl auswählen können.
Dies soll wahrscheinlich den Aufwand verringern, den Kund*innen, die ein mobiles Angebot einholen wollen, haben, wenn sie auf der falschen Angebotsseite landen.
Warum brauchst du eine hochleistungsfähige mobile Landing Page?
Beginnen wir damit, warum Designer*innenmobile-spezifische Landing Pages für ihre Kampagnen erstellen müssen. Laut den von Think with Google veröffentlichten Daten von SaleCycle für 2019:
Die Kluft zwischen Desktop- und mobilem Datenverkehr vergrößert sich seit Jahren. Es ist nicht nur die Suche, bei der wir mehr mobile Nutzer*innen als Desktop-Nutzer*innen sehen.
Nimm zum Beispiel Facebook. Es ist das beliebteste Social-Media-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 Nutzer*innen verwendet:
Nur 1,5 % der Facebook-Nutzer greifen über einen Laptop oder Desktop-Computer auf die Anwendung zu. 16,7 % haben sowohl das Telefon als auch den Computer für die Nutzung von Facebook verwendet. Und satte 81,8 % der Facebook-Nutzer*innen greifen nur über ihr Smartphone darauf zu.
Es spielt keine Rolle, wie deine Kund*innen hoffen, die Nutzer*innen online zu erreichen. Organische Suchergebnisse. Pay-per-Click-Anzeigen bei Google. Marketing- und Werbekampagnen in sozialen Medien.
Die meisten dieser Marketing- und Verkaufskampagnen werden Leads erreichen, wenn sie auf ihren Smartphones sind.
Leider zeigen die Daten des jüngsten KIBO Ecommerce Quarterly Benchmarks-Berichts, dass die Wahrscheinlichkeit, dass mobile Nutzer*innen konvertieren, geringer ist als bei Desktop-Nutzern:
Obwohl mobile und Desktop-Benutzer*innen in etwa die gleichen Add-to-Cart-Raten haben, ist die Konversionsrate bei mobilen Benutzern fast halb so hoch wie bei Desktop-Benutzern.
Es liegen keine Daten darüber vor, wie viele mobile Nutzer das Gerät wechseln, um ihre Einkäufe abzuschließen. Aber ist das etwas, womit du dich abfinden solltest? Das Ziel ist es, die Benutzererfahrung so schnell, bequem und angenehm wie möglich zu gestalten, und die Benutzer dazu zu bringen, von einem Gerät zum anderen zu wechseln, um zu konvertieren, ist diesem Ziel nicht gerade förderlich.
Wenn das nicht schon Anreiz genug ist, dann ist es Googles Mobile-First-Indexing. Google belohnt optimierte mobile Landing Pages nicht nur mit besseren Rankings. Es teilt seinen Nutzer*innen auch mit, wenn eine Anzeige „mobilfreundlich“ ist:
Wenn deine Kund*innen Geld für Google-Anzeigen ausgeben, um ihre mobilen Landingpages vor den Nutzer*innen zu platzieren, könnte das Unterscheidungsmerkmal „Mobile-Friendly“ eine größere Rendite für sie bedeuten.
Best Practices für die Gestaltung von mobilen Landing Pages
Lass uns kurz aufschlüsseln, was du tun kannst, um die Conversions deiner mobilen Landing Page zu maximieren:
1. Gestalte die Landing Page mit einem Mobile Page Builder
Um eine wirklich responsive und mobile-first Landing Page zu erstellen, solltest du sie mit einem mobilen Editor und Tools gestalten. Schauen wir uns kurz an, wie du den Elementor Page Builder verwenden kannst, um eine mobilspezifische Landing Page zu gestalten.
Als Erstes kannst du damit eine spezielle Landing Page erstellen:
Im Gegensatz zu normalen Webseiten findest du die Landing Pages von Elementor unter dem Menüpunkt Templates.
Wenn du den Elementor Page Builder öffnest, kannst du deine Seite entweder von Grund auf mit Elementor Widgets und Funktionen erstellen oder du kannst eine responsive Vorlage für deine Landing Page auswählen:
Hier findest du Vorlagen für einige der gängigsten Arten von Landing Pages. Verkaufsseiten. Event-Promotionen. Produkt-Werbegeschenke. Und mehr.
Nachdem du die Landing Page-Vorlage auf deine Seite geladen hast, wechsle in den responsiven Modus, damit du auf den Mobile Builder von Elementor zugreifen kannst:
Mit dem Mobile Builder kannst du von einer Oberfläche aus gestalten und bearbeiten, die die gleiche Größe hat wie die Geräte der Zielnutzer. Du kannst auch Bearbeitungen vornehmen, die nur für die mobile Landing Page gelten.
2. Achte darauf, wie sich dein Design auf die Ladegeschwindigkeit auswirkt
Studien haben einen direkten Zusammenhang zwischen der Ladegeschwindigkeit mobiler Seiten und den Absprungraten 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 bereits eine Verbesserung von 0,1 Sekunden die mobilen Konversionen erheblich steigern kann.
Bei Einzelhandelswebsites beispielsweise stiegen die Konversionen 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 untermauert diesen Zusammenhang zwischen mobiler Seitengeschwindigkeit und Konversion (oder deren Fehlen):
Alles, was du tun kannst, um deine mobilen Landing Pages schneller laden zu lassen, ist ein Muss. Unsere Experten sind zum Beispiel große Befürworter der Bildoptimierung und empfehlen, Bilder zu verwenden, die nicht mehr als 22KB-33KB wiegen, damit Websites blitzschnell geladen werden.
Möchtest du weitere Tipps zur Geschwindigkeitsoptimierung? Hier findest du 19 Optimierungen, die dir den Einstieg erleichtern.
3. Minimalistisch im Design
Bei der Gestaltung von mobilen Landingpages solltest du dich an alle guten Designpraktiken halten, die du auch für den Rest der Website anwenden würdest. Achte jedoch darauf, wie lang diese Seiten werden können.
Einige mobile Landing Pages sind gar nicht so lang. Nimm die Landing Page von Marie Forleo:
Was du siehst, ist das, was du bekommst. Unter dieser Einladung zum Herunterladen ihres Audio-Trainings gibt es nichts als eine Fußzeile mit einigen „As Seen On“-Logos.
Trotzdem hätte diese Seite länger ausfallen können, wenn der Designer einen traditionellen responsiven Wrapping-Ansatz verwendet hätte. Hier ist der Grund dafür:
Hätte man dieser Seite erlaubt, sich responsiv zu gestalten, 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 im Wesentlichen 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 entwirfst, 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 die CTA und das Formular oberhalb der Falz platzieren, damit die Besucher konvertieren können, ohne durch alles andere scrollen zu müssen?
Dies sind alles Dinge, über die du nachdenken sollten.
4. Sticky Bars und Schaltflächen einbeziehen, wenn sie relevant sind
Früher hatten Landingpages für den Verkauf keine Kopfzeile. Diese Designentscheidung erleichterte es den Besucher*innen, sich auf das Angebot der Seite zu konzentrieren und auf nichts anderes.
Bei der Gestaltung langer Landingpages für Mobiltelefone ist dies jedoch nicht unbedingt die beste Idee. Wenn die Seite nicht hauptsächlich hochqualifizierte Besucher anzieht und ein großer Teil von ihnen garantiert konvertiert, kann eine Landing Page ohne Navigation dazu führen, dass sich deine mobilen Nutzer „festgefahren“ fühlen.
Du musst auch darüber nachdenken, wie sich dies auf das Scrolling auswirken kann. Ohne Navigation oder zumindest eine „Click to Scroll“-Schaltfläche müssen die Nutzer lange scrollen, um zum Anfang der Seite oder zum Ende zu gelangen oder um eine andere Seite aufzurufen.
Deshalb ist es eine gute Idee, deine mobilen Landing Pages mit einer minimalen und klebrigen Navigation zu erstellen.
Mit Elementor ist dies ganz einfach zu bewerkstelligen.
Nehmen wir diese Vorlage für eine mobile App-Landingpage als Beispiel:
Du musst nur eine Kopfzeile oben auf der Seite hinzufügen (was du mit Elementor-Blockvorlagen tun kannst) und dann Motion Effects verwenden, um sie zu fixieren.
5. Visuelle Unterbrechungen in der Kopie hinzufügen
Du kannst zwar nicht immer vorschreiben, wie viel Inhalt auf eine Landing Page kommt, aber die Design-Entscheidungen, die du triffst, können dazu beitragen, dass die Nutzer*innen die Seite schneller durchsehen und lesen können.
Wenn es um Texte geht, sind Hierarchie und Abstände sehr wichtig.
Hier ist ein weiteres Beispiel für eine Elementor-Landingpage-Vorlage:
Diese Seite ist für ein E-Commerce-Geschäft, das Kameras verkauft. Diese Art von Seiten sind in der Regel vollgestopft mit Informationen über die Produktmerkmale, Spezifikationen, Verwendungszwecke, Bewertungen und so weiter.
Um sicherzustellen, dass der Benutzer*innen die wichtigsten Informationen findet, verwende große Kopfzeilen-Tags, um den Inhalt einzuführen 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, Zitierkästen für Zeugnisse und Icons sind weitere Möglichkeiten, das Design Ihrer Texte mobilfreundlicher zu gestalten.
6. Begrabe den CTA nicht
Deine Landing Page hat ein Ziel: eine Konversion.
Bei einer normalen Webseite solltest du deinen Call-to-Action vielleicht erst ganz am Ende der Seite einführen – nachdem du sie ein wenig aufgeklärt hast. Die Besucher einer Landing Page brauchen jedoch nicht immer so viel Unterstützung.
Da sie in der Regel über eine gezielte Anzeige oder eine Marketingkampagne auf eine Landing Page geleitet werden, sind sie mit dem, was sie dort erwartet, einigermaßen vertraut. Es macht also keinen Sinn, die CTA in der Mitte oder am Ende der Seite zu verstecken, insbesondere nicht auf einer langen mobilen Seite.
Platzier ihn stattdessen ganz vorne 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!
Dies ist ein weiterer Grund, warum es eine gute Idee ist, mit einer Elementor-Landingpage-Vorlage zu beginnen. Der CTA erscheint immer oberhalb des Falzes und dann wieder am unteren Rand. Das gilt sowohl für Buttons als auch für Formulare.
8 Beispiele für hoch-konvertierende mobile Landing Pages
Es gibt so viele Möglichkeiten, Besucher auf einer Landing Page zu konvertieren. Jetzt kaufen. Abonnier unseren Newsletter. Demo vereinbaren. Da es so viele Möglichkeiten für mobile Landing Pages gibt, gibt es keine Einheitslösung für die Gestaltung.
Schauen wir uns einige der verschiedenen Möglichkeiten an, mit denen beliebte Landing Pages das mobile Erlebnis für die Konversion optimiert haben:
1. ClickUp
ClickUp ist eine Produktivitäts-App, die Berufstätigen bei einer Reihe von Aufgaben hilft, unter anderem bei der Verwaltung ihrer Zeit. Tatsächlich ist dies eine der ersten Landing Pages, die man bei Google sieht, wenn man nach einer Zeitmanagement-Lösung sucht.
Der Bereich oberhalb des Falzes ist gut gestaltet. Er beinhaltet einen schnellen Verkauf des Produkts mit einem Ein-Feld-Formular, um den Benutzer*innen zu starten.
Wenn der Nutzer*innen Am unteren Ende der Seite befindet sich die gleiche CTA. Und sie können jederzeit den Sticky Header verwenden, wenn sie all diese Informationen umgehen und sich einfach anmelden möchten.
Obwohl es hier eine Menge an Informationen gibt, hat der Designer gute Arbeit geleistet und sie in verdauliche Häppchen aufgeteilt.
Die Überschriften sind groß, fett und leicht zu finden, was das Scannen sehr erleichtert. Die animierten Grafiken tragen ebenfalls zu einem einfachen Leseerlebnis bei, da sich die Besucher schnell auf die visuelle Handlung auf der Seite konzentrieren können und nichts Wichtiges übersehen.
2. CoPilot
CoPilot ist ein Dienst, der seine Kund*innen mit Fitness- und Ernährungstrainern verbindet. Diese spezielle Landing Page, die wir uns ansehen, ist die CoPilot-Startseite.
Der obere Teil der Seite ist perfekt. Ein kleines Bild, gepaart mit einem winzigen Text, fasst zusammen, was die Nutzer*innen hier finden.
Anstatt die Landing Page mit einem langwierigen Anmeldeformular zu überfrachten, hat der Designer es aus dem Weg geräumt und den Nutzer*innen stattdessen eine Schaltfläche „Finde deinen Ihren Coach“ überlassen. Wenn du siehst, wie viele Schritte in dem langen, aber gut gestalteten Formular enthalten sind, wirst du sehen, warum dies eine kluge Entscheidung war.
Für Besucher, die sich nicht sofort auf die Suche nach einem Trainer begeben, bietet der Rest der Landing Page ein ebenso schlankes Erlebnis. Es sind nur wenige Bildläufe erforderlich, um die „Wie gesehen“-Logos, die Liste der Vorteile und die Preise durchzusehen.
Wenn du eine mobile Landing Page für einen Service oder ein Produkt entwirfst, das die Nutzer*innen dringend benötigen, ist es ein guter Schritt, sie so übersichtlich und intuitiv zu gestalten wie bei CoPilot.
3. Fandango
Jemand, der sich auf einen Kinobesuch freut, hat in der Regel einen bestimmten Film im Kopf. Sie könnten zwar auch auf die Fandango-Homepage gehen und die Navigation nutzen, um die Landing Page des Films zu finden, aber eine schnelle Google-Suche oder ein Klick auf eine Social-Media-Anzeige für den Film könnte sie auch sofort dorthin führen.
Das war der Fall, als ich nach den Vorführzeiten von Malignant suchte.
Das Design dieser mobilen Landing Page ist in vielerlei Hinsicht großartig. Zunächst einmal ist es nicht die übliche Informationsflut, die man auf der Hauptseite von Fandango findet. Diese Seite ist ausschließlich diesem Film gewidmet.
Außerdem werden die Filmdetails in geordneter Form präsentiert.
Der Benutzer kann sich den Trailer ansehen, wenn er eine einminütige Erinnerung daran haben möchte, worum es geht.
Sie können die Inhaltsangabe des Films lesen oder sich die Kritiken ansehen, um ihre Entscheidungsfindung weiter zu unterstützen.
Die Website erkennt automatisch die Postleitzahl der Nutz*innen, so dass er die relevantesten Ergebnisse für seinen Standort zuerst sieht.
Mit der Datumsauswahl können sie dann nach Vorführzeiten suchen. Ein Dropdown ist nicht erforderlich. Die Zeiten werden als einzelne Schaltflächen angezeigt.
Wenn Vorstellungszeiten verfügbar sind, kann der Benutzer auf die gewünschte Zeit klicken und wird sofort zur Kasse weitergeleitet.
Erwähnenswert sind auch die Kopf- und Fußzeile. Sie lassen diese Website eher wie eine mobile App als eine mobile Website erscheinen, mit Schnellzugriffs-Links im Daumenbereich.
4. HoneyBook
HoneyBook ist eine Kundenverwaltungssoftware, daher ist es nur logisch, dass sie professionelle Vertragsvorlagen verschenkt. Vorlagen sind immer ein guter Weg, um neue Kund*innen zu gewinnen, auch wenn sie noch nicht bereit sind, vollwertige Kund*innen zu werden. Auch für bestehende Kunden bieten sie einen zusätzlichen Nutzen.
Wenn du dir diese Seite in ihrer Gesamtheit ansiehst, wirst du feststellen, dass es sich um eine ganz normale Landing Page handelt. Die Aufforderung zur Handlung befindet sich über der Falte für Nutzer*innen, die bereit sind, zu konvertieren. Diejenigen, die noch ein wenig Überzeugungsarbeit leisten müssen, können nach unten scrollen und die verschiedenen Funktionen und Vorteile der hochwertigen Vertragsvorlagen erkunden.
Wenn du zu irgendeinem Zeitpunkt beschließt, dass du keine weitere Überzeugungsarbeit mehr leisten musst, kannst du über die Schaltfläche „Jetzt loslegen“ zurück zum Formular gelangen.
Der Grund, warum ich dieses Formular besonders hervorgehoben habe, ist, dass es so mobilfreundlich ist.
Zunächst einmal können die Nutzer*innen das Formular umgehen und stattdessen „Mit Facebook verbinden“. Wenn man bedenkt, wie hoch der Anteil der mobilen Facebook-Nutzer ist, ist das eine großartige Idee. Sie müssen nichts ausfüllen, was die Konvertierung umso einfacher macht.
Für diejenigen, die sich nicht über Facebook anmelden wollen, stellt das Formular ebenfalls kein Hindernis dar. Die Tastatureingabe ändert sich, wenn sie ihre Daten in die beiden Felder eingeben: „Vollständiger Name“ und „E-Mail“. Alles, was noch zu tun ist, ist auf „Kostenlose Testversion starten“ zu klicken.
5. ResortPass
ResortPass ist ein interessanter Dienst. Er bietet die Möglichkeit, Tagespässe für Pools, Spas und Resorts zu buchen.
Ähnlich wie beim Fandango-Beispiel müssen die Nutzer*innen nicht die gesamte ResortPass-Website durchsuchen, um den gewünschten Pass zu finden. Sie können Google-Suchergebnisse oder Ein-Klick-Anzeigen verwenden, die sie direkt auf die Landing Page des gewünschten Ortes führen.
Diese Seite für das InterContinental Miami ist ähnlich aufgebaut wie eine E-Commerce-Seite – Bilder oben, Beschreibung in der Mitte, Bewertungen unten. Der Hauptunterschied besteht darin, dass die Seite ablenkungsfrei ist (d. h. keine Werbung oder Empfehlungen für ähnliche Hotels) und dass mehrere CTA-Schaltflächen auf der Seite erscheinen.
Dies ist ein wirklich effektives Design für die Konversion.
Nehmen wir an, jemand ist in Miami unterwegs und hat das Bedürfnis, den Rest des Nachmittags am Pool zu verbringen. Eine schnelle mobile Suche führt ihn zu dieser Seite, auf der das Erlebnis wunderbar beworben und die Funktionen des Passes klar und logisch erklärt werden. Außerdem ist die Schaltfläche „Jetzt buchen“ auf dem Handy nur einen Bildlauf entfernt.
6. Rocket Lawyer
Wenn du schnelle rechtliche Beratung und Unterstützung brauchst, kann ein Dienst wie Rocket Lawyer wirklich nützlich sein.
Auf dieser mobilen Landing Page gibt es eigentlich nicht viel, nur das offene Formular „Rechtsberatung in Minuten“ oben und einige grundlegende Informationen darüber, wie es funktioniert, unten.
Mit diesem Beispiel möchte ich dir zeigen, wie du mit kleinen Änderungen am Desktop-Design ein viel optimierteres Erlebnis für mobile Benutzer schaffen kannst.
So sieht die Desktop-Landingpage aus:
Sie ist genauso gut gestaltet wie die mobile Seite. Allerdings gibt es hier ein bisschen mehr zu sehen.
Oben gibt es ein Hintergrundbild, das einen der Anwälte von Rocket Lawyer vorstellt. Auf dem Handy gibt es dieses Bild nicht. Außerdem wird auf der Desktop-Seite der Abschnitt „Wie es funktioniert“ als Prozess mit Pfeilen dargestellt, die den Besucher von einem Schritt zum nächsten führen. Auf dem Handy sind die Schritte vertikal angeordnet, und die Pfeile sind verschwunden.
Ist dadurch etwas verloren gegangen? Nicht wirklich. Im Gegenteil, die mobilen Nutzer*innen haben mehr von diesem vereinfachten Design.
Durch den Wegfall des Hintergrundbildes müssen sie eine Sache weniger überprüfen, bevor sie ihre Rechtsfrage einreichen. Außerdem trägt das fehlende Hintergrundbild wahrscheinlich auch dazu bei, dass diese mobile Landing Page schneller geladen wird.
7. Teachable
Teachable ist eine Plattform für die Erstellung und das Hosting von Kursen für alle, die ihre eigenen Online-Kurse veröffentlichen möchten.
Die obige Seite wurde Anfang September in der Benachrichtigungsleiste der Hauptwebsite beworben. Sie ist für das Teachable-Webinar „How to Sell More With a Powerful Sales Page“.
Diese Seite entspricht eher dem Aussehen einer Seite für einen Verkaufstrichter mit hohen Umsätzen. Alle Schlüsselelemente sind vorhanden:
- Handlungsaufforderung oberhalb der Faltfläche
- Anerkennung des Schmerzes der Nutzer
- Vorteile der Schulung
- Aufforderung zur Handlung
- Vorstellung der Experten
- Testimonials
- FAQ-Akkordeon
- Aufruf zum Handeln
Abgesehen davon ist das Design dieser Landing Page bei weitem nicht so lang, wie viele andere Verkaufs-Landing Pages, und das ist auch gut so. Teachable ist eine bekannte und vertrauenswürdige Marke und braucht daher nicht so viel Platz, um Besucher davon zu überzeugen, sich für die kostenlose Schulung anzumelden. Alles, was es braucht, ist dieses attraktive Design und ein prägnanter Text, um die Aufgabe zu erfüllen.
Dies ist ein großartiges Beispiel dafür, dass beim mobilen Design weniger mehr ist. Wenn Sie den Ruf der Marke Ihres Kunden nutzen und eine effizientere Landing Page für mobile Nutzer entwerfen können, tun Sie das. Die Wahrscheinlichkeit, dass die Seite konvertiert, ist größer, wenn sie weniger Zeit in Anspruch nimmt und die Nutzer sie leichter durcharbeiten können.
8. WP-Engine
WP Engine ist ein Anbieter von verwaltetem WordPress-Hosting. Das Unternehmen konzentriert sich vor allem auf die Bereitstellung von Hochgeschwindigkeits-Hosting für WordPress-Website-Kunden, weshalb diese Performance-Landingpage eine wirklich wichtige Seite in ihrem Marketing- und Verkaufsprozess ist.
Während wir das attraktive Design dieser mobilen Seite untersuchen könnten, möchte ich deine Aufmerksamkeit stattdessen auf zwei Merkmale dieser Website lenken.
Die erste ist die Telefonie-Funktion. Beachten Sie, was passiert, wenn ich am Ende der Seite ankomme.
Wenn ich auf das Live-Chat-Widget klicke, öffnet sich kein winziges Popup-Fenster in der Ecke, wie wir es von der Desktop-Seite gewohnt sind. Es öffnet ein bildschirmfüllendes Chat-Modul, das sich nicht wesentlich von dem unterscheidet, das man für eine SMS oder DM verwendet.
Danach klicke ich auf die Telefonnummer für den Vertrieb oben auf der Seite. Die Seite öffnet dann die Wahlaufforderung meines Telefons.
Beides sind wesentliche Funktionen einer Landing Page, wenn man hochpreisige oder komplexe Produkte verkauft. Es wäre zwar schön, wenn die Besucher*innen am Ende der Seite bereit wären, ein Geschäft abzuschließen, aber wahrscheinlich müssen sie noch mehr überzeugt werden. Und mobilfreundliche Verkaufs-Chat-Funktionen wie diese können Ihrer Landing Page wirklich helfen, mehr dieser Leads in Konversionen statt in Abbrüche zu verwandeln.
Das andere beeindruckende Merkmal, das ich hervorheben möchte, ist die schnelle Ladezeit. Von PageSpeed Insights:
Ich habe viele Seiten mit diesem Tool getestet und es ist sehr selten, dass eine mobile Landing Page so gut abschneidet. Dies ist nicht nur ein Beweis für das hochwertige mobile Design der Seite, sondern auch für die schnellen Hosting-Services von WP Engine.
Schlussfolgerung
Die Daten lügen nicht. Über Smartphones finden mehr Online-Aktivitäten statt als über andere Geräte. Allerdings zögern Smartphone-Nutzer noch immer, über diese Geräte zu konvertieren.
Aus diesem Grund müssen Webdesigner bei der Erstellung von Landing Pages besonders auf das mobile Erlebnis achten. Der Zweck dieser Seiten ist es, Besucher zu konvertieren, daher müssen sie so gestaltet sein, dass Smartphone-Nutzer sich wohlfühlen.
Das bedeutet Folgendes:
- Minimierung der Menge an Inhalten, durch die sie scrollen müssen
- Sie sollten sowohl den Text als auch das Design visuell kreativ gestalten
- Keine Angst davor haben, Überflüssiges von der Desktop-Seite zu entfernen, um ein schlankeres mobiles Erlebnis zu schaffen
- Hinzufügen von klebrigen Elementen auf der Seite, damit sich mobile Nutzer nicht festgefahren oder überfordert fühlen
- Sicherstellen, dass die Handlungsaufforderung immer innerhalb von ein oder zwei Bildschirmsprüngen des mobilen Nutzers liegt, egal wo auf der Seite er sich befindet
Da es hierfür eine Formel gibt, ist es eine gute Idee, sich einen mobilen Editor und ein Toolkit zuzulegen, mit denen Sie schnell mobilspezifische Landing Pages für Ihre Kunden entwerfen können. Wie wir oben gesehen haben, können der Page Builder und die Sammlung von Widgets, Funktionen und Vorlagen von Elementor Ihnen genau dabei helfen.
übersetzt von Lisa Kraus
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/mobile-landing-page/
