Die besten Tipps für das Design mobiler Landingpages, die Sie sonst nirgendwo finden

Es gibt viele Ressourcen online, die sich mit mobilen Post-Click-Landingpages befassen, aber es gibt nicht viele spezifische Designanweisungen, wie Sie tatsächlich eine hochkonvertierende Seite erstellen können.

Welches Strukturlayout wird für die mobile Anzeige empfohlen? Wie viele Pixel sollten Schaltflächen haben? Wie viele Pixel sollten Elemente trennen? Sollten Sie den „Hover“ -Effekt verwenden? Sollten Formularetiketten innen oder außen sein?

Mein Name ist Cosmin Serban, Director of Design Services bei Instapage. Sie fragen sich vielleicht, was Cosmin qualifiziert, auf mobile Post-Click-Landingpage-Design zu schreiben?

Ich habe Kunden über Best Practices bei der Gestaltung und Strukturierung ihrer Post-Click-Landingpages aufgeklärt, um ihre Conversion-Raten zu verbessern. Ebenfalls, Ich habe:

  • Hat über 1.000 Post-Click-Landingpages überprüft
  • Hat sich mit Kunden zusammengetan, um sicherzustellen, dass ihre Botschaft ankommt und ihre Besucher eine gute Erfahrung haben, die schließlich zu einer Conversion führt

Darüber hinaus war ich Teil des Teams, das über 200 optimierte Vorlagen entwickelt hat, mit denen über 200.000 Post-Click-Landingpages erstellt und gestartet werden.

Mobiles Post-Klick-Landingpage-Design: Was Sie wissen sollten, bevor Sie beginnen

Einige Konzepte in diesem Artikel wurden intern bei der Erstellung unserer Vorlagenbibliothek entwickelt. Das bedeutet nicht unbedingt, dass alle diese Tipps für jede einzelne Post-Click-Landingpage gelten sollten, die Sie erstellen. Jede Post-Click-Landingpage hat ihre eigenen Herausforderungen, aber das Verständnis dieser Grundbegriffe sollte Ihnen auf jeden Fall helfen, jedem, der von seinem mobilen Gerät aus besucht, ein besseres Erlebnis zu bieten.

Beginnen wir mit den wichtigsten Unterschieden zwischen dem Desktop- und dem mobilen Erlebnis.

Struktur

Auch wenn es zu Beginn Ihres Projekts nicht so aussieht, ist es wichtiger, eine Struktur zu haben, in der Sie die richtige Gruppe von Elementen zur richtigen Zeit liefern, als Sie denken.

Das erste, was mir in den Sinn kommt, ist die völlig andere Art und Weise, wie unsere Besucher die Inhalte auf mobilen Seiten scannen. Wir haben alle von dem F-Muster oder Z-Muster auf Desktop-Post-Click-Landingpages gehört, aber wie heißt das Muster für Handys? Wir werden ihm nicht unbedingt einen Namen geben, aber höchstwahrscheinlich ist es sehr linear. Scrollen nach oben und unten ist der einzige Weg, um zu verstehen, was diese Post-Click-Landingpage bietet:

Da dies eine der wichtigsten Einschränkungen bei der Interaktion von Besuchern mit einer Post-Click-Zielseite ist, empfehlen wir, sich an ein einspaltiges Layout zu halten, anstatt zu versuchen, viele Inhalte horizontal zu stopfen. (Niemand mag es zu kneifen und zu zoomen.)

Auf dem Desktop denken digitale Vermarkter meistens über die Platzierung jedes einzelnen Elements und dessen Auswirkungen nach. Auf Mobilgeräten ist es besser, eine Verschiebung vorzunehmen und über Gruppen von Elementen nachzudenken und darüber, wie Sie sie übereinander stapeln, um eine maximale Wirkung zu erzielen.

Dieser Side-by-Side-Vergleich zeigt, wie eine Desktop-Seite im Vergleich zu einer mobilen Seite strukturiert ist:

 mobile Post-Click Landing Page Design Vergleich

Wir empfehlen, von links nach rechts zu gehen und jede Gruppe von Elementen untereinander zu platzieren. Nehmen wir zum Beispiel den Header-Bereich (above-the-Fold). Wir haben das Logo oben, gefolgt von der Gruppe, die aus der Hauptüberschrift und der unterstützenden Überschrift besteht, und dann die gesamte Formularfeldgruppe darunter.

Die Möglichkeit, Elemente zu gruppieren, erzeugt einen nativ mobil ansprechenden Satz von Objekten. Alternativ können Gruppen so konfiguriert werden, dass das Seitenverhältnis komplexer Arrangements gesperrt wird, um ihre genauen Proportionen beizubehalten, wenn sie in die mobile Version Ihrer Seite konvertiert werden.

Die Sperre für das mobile Seitenverhältnis hält Ihre mehrschichtigen Gruppierungen zusammen und sperrt das Seitenverhältnis, unabhängig davon, ob sie sich auf einem Desktop- oder mobilen Layout befinden.

Zwei oder mehr Elemente, die eng miteinander verwandt oder komplementär sind, sollten immer zusammenhalten. In dieser Situation wäre es nicht sinnvoll, das Formularfeld ganz oben auf der Seite zu haben, daher ist das Konzept, das Formular im Bereich oberhalb der Falte zu haben, nicht ideal. Es ist wichtiger, dem Besucher den Kontext dessen zu geben, was er zuerst anmeldet, als ihm nur eine Möglichkeit zu geben, so schnell wie möglich zu handeln.

Ladezeit

Unabhängig davon, welches Gerät Ihre Besucher verwenden, ist die Ladegeschwindigkeit der Seite sehr wichtig. Bitte beachten Sie, dass die meisten Ihrer Besucher ihre mobilen Datenbeschränkungen nutzen und Kosten verursachen, um Ihre Seite zu sehen, also seien Sie vorsichtig, welche Art von Grafiken oder Elementen Sie Seiten hinzufügen. Stellen Sie sich vor, Sie greifen auf eine Seite zu und lassen ein Video automatisch abspielen.

Wenn Sie viele Animationen zur Unterstützung von Inhalten benötigen, empfehlen wir Ihnen, bei einfachen Bildern für Mobilgeräte zu bleiben. Ganz einfach, ich meine, Sie müssen benutzerdefinierte Hintergrundbilder für einen bestimmten Abschnitt erstellen. Die Verwendung einer Fotobearbeitungssoftware zum Anpassen der Größe oder des Layouts des Fotos ist möglicherweise die zusätzliche Zeit wert, die erforderlich ist, wenn Sie Ihre Seiten beschleunigen können.

Dasselbe gilt für Hintergrundbilder, da Sie kein Bild mit einer Breite von 2.000 Pixel und einer Größe von 300 KB zum Laden in Ihrem Abschnitt benötigen, schlage ich vor, einen Designer zu beauftragen, ein benutzerdefiniertes Bild zu erstellen, das Sie als Abschnittshintergrund festlegen können:

 mobile Post-Click Landing Page Design Bilder

Die meiste Zeit ist es immer eine gute Idee, die mobile Seite so einfach wie möglich zu halten. Wenn Sie beispielsweise mehrere grafische Elemente haben, die dieselbe Nachricht übermitteln, zeigen Sie einfach eines auf dem Handy an.

Da sich die meisten Mobiltelefone an die Größe des Inhaltsbereichs anpassen, der im Mobile Builder bereitgestellt wird, ist es eine gute Faustregel, ein Bild mit einer Breite von mindestens 400 Pixel zu haben, um sicherzustellen, dass an den Seiten keine leeren Stellen vorhanden sind.

Erstellen einer AMP-Post-Click-Landingpage

Das Erstellen einer positiven Post-Click-Landingpage auf Mobilgeräten ist unerlässlich, da auf der Post-Click-Landingpage Conversions stattfinden. Wenn Ihre Seite zu langsam geladen wird oder von der Anzeige bis zum Post-Click ein unzusammenhängendes Erlebnis erzeugt, springen die Besucher ab.

Bedenken Sie dann, dass Google die Landingpage-Erfahrung nach dem Klick als einen Faktor zur Bestimmung des Anzeigenrangs betrachtet, der letztendlich zu Ihrer Klickrate beiträgt. Fügen Sie all das hinzu und Marken haben ein großes Problem in ihren Händen. Glücklicherweise gibt es das AMP-Framework.

AMP-Seiten sind insbesondere für Werbetreibende attraktiv, da sie durch nahezu sofortige Ladezeiten und reibungsloses Scrollen überzeugendere mobile Benutzererlebnisse ermöglichen und gleichzeitig eine gewisse Anpassbarkeit von Styling und Branding unterstützen. Da AMP HTML / CSS und JavaScript einschränkt, ermöglicht es ein schnelleres Rendern von Zielseiten nach dem Klicken. Im Gegensatz zu herkömmlichen mobilen Seiten werden AMP-Seiten automatisch vom Google AMP-Cache zwischengespeichert, um die Ladezeiten in Google zu verkürzen.

Die Vorteile des AMP-Frameworks überwiegen seine Grenzen:

  • Schnellere Seitenladegeschwindigkeit auf mobilen Geräten
  • Bessere Benutzererfahrung beim mobilen Surfen
  • Die Verwendung von AMP-Seiten kann dazu beitragen, Ihren Qualitätsfaktor zu erhöhen
  • Google wird Seiten bevorzugen, die AMP verwenden

Ab Juni 2018 bietet Instapage AMP-Post-Click-Landingpages an, auf denen digitale Vermarkter AMP-konforme seiten innerhalb der App ohne Entwickler. Denn wenn die Seite nicht sofort geladen wird, ist sie am Ende nicht schnell genug.

14- day trial Instapage create new page

Designing for touch

Eine Ihrer größten Herausforderungen beim mobilen Post-Click-Landingpage-Design besteht darin, sicherzustellen, dass Besucher so einfach wie möglich Maßnahmen ergreifen können. Diese Aktion kann eine Formularübermittlung oder ein einfaches Tippen auf eine Schaltfläche sein. Sie würden erwarten, dass die meisten Leute einige Anpassungen vornehmen werden, aber das ist nicht immer der Fall.

Wir alle haben Seiten erlebt, auf denen es sehr schwierig ist, etwas anzuzapfen, oder die Erfahrung nicht auf mobile Benutzer zugeschnitten ist. Besonders Textlinks – Das Anpassen der Größe eines Textelements, das verlinkt ist, ist sehr hilfreich. Ihr Besucher sollte nicht zoomen müssen, um die gewünschte Aktion auszuführen.

Schaltflächen

Das größte Problem, das uns aufgefallen ist, ist jedoch die Größe der Schaltflächen auf Zielseiten nach dem Klicken. Unser Team empfiehlt, Schaltflächen mit einer Höhe von mindestens 70 Pixel zu entwerfen und keine Angst zu haben, sie so breit wie möglich zu machen, aber sie niemals über die gesamte Breite (400 Pixel) zu dehnen, da sie möglicherweise mit einem kleinen Abschnitt verwechselt werden.

Der Hover-Effekt ist eine nette Geste für Desktop-Seiten, da er dem Besucher signalisiert, dass er Maßnahmen für dieses bestimmte Element ergreifen kann. Auf Mobilgeräten sind Hover-Effekte jedoch redundant.

Ränder

Für Ränder empfehlen wir, auf jeder Seite eine Sicherheitszone von mindestens 20 Pixeln vertikal frei zu halten und visuelle Spannungen zu vermeiden, die bei Elementen auftreten können, die zu nahe an den Seiten des Telefonbildschirms liegen.

Leerraum ist für mobile Seiten genauso wichtig wie für Desktop-Seiten. Die grundlegenden Konzepte gelten immer noch, versuchen Sie einfach, alles zu räumen und keine Elemente wirklich nahe beieinander zu haben. Auf diese Weise vermeiden Sie visuelle Spannungen.

Konsistente Margen führen definitiv zu einer besseren Benutzererfahrung. Unser Team stellt normalerweise sicher, dass zwischen jedem Element mindestens 20 bis 40 Pixel liegen. Wie viel Sie entscheiden, liegt bei Ihnen, da jeder Block eine einzigartige Struktur von Elementen haben kann.

Es ist ziemlich subjektiv, aber sobald Sie eine Regel festgelegt haben, versuchen Sie, sie auf der gesamten Seite zu replizieren, um ein moderneres Aussehen zu erhalten:

Lesbarkeit

Sie würden denken, dass es selbstverständlich ist, den Inhalt klar lesen zu können, aber zu oft haben wir Post-Click-Zielseiten gesehen, auf denen der Text entweder zu klein oder zu groß ist. Eine gute Balance zu finden ist ziemlich einfach, eine gute Faustregel für die Schriftgröße für bestimmte Elemente verwendet werden:

  • Hauptüberschrift: 28 Pixel
  • Unterüberschrift: 22 Pixel
  • Absätze: 17 Pixel
  • Andere Details: 15 Pixel

Natürlich können Sie diese Größen anpassen, da es nicht eine Größe gibt, die allen Anforderungen entspricht. Es sollte jedoch als gute Grundlage für die Gestaltung einer mobilen Post-Click-Landingpage dienen.

Ein weiterer erwähnenswerter Punkt ist die Zeilenhöhe bei Textelementen.

In bestimmten Situationen auf dem Desktop ist es sinnvoll, 1.0 oder sogar 1.2 zu haben, wenn Sie Ihre mobile Post-Click-Landingpage erstellen, stellen Sie sicher, dass die Zeilenhöhe für Textelemente mindestens 1.4 beträgt.

Fazit: Je kleiner die Schriftgröße, desto größer sollte die Zeilenhöhe sein.

Formulare

Da Formulare der wichtigste Teil der meisten Post-Click-Landingpages sind, ist es wichtig, dass Personen ihre Informationen einfach übermitteln können.

Auf unseren mobilen Seiten dehnen wir die Formularfelder normalerweise so weit wie möglich horizontal aus und vermeiden Situationen wie ein Formularfeld und die Schaltfläche in derselben Zeile. Das ist nur eine schlechte Erfahrung:

Eine andere Sache, die sehr oft herauskommt, ist der Umgang mit Formularen, die viele Felder haben.

Die bewährte Methode, die unser Team aufgedeckt hat, besteht darin, dass eine Seite mit mehr als 2 Formularfeldern die Beschriftungsposition auf outside , sodass Besucher leichter wissen, welche Informationen benötigt werden, anstatt sich an die Eingabe zu erinnern:

Steigern Sie Ihre mobilen Conversions ab heute

Genau wie bei Desktop-Seiten dreht sich beim mobilen Post-Click-Landingpage-Design alles um die Benutzerfreundlichkeit und darum, was die Leute dazu bringt, sich zu engagieren und zu konvertieren. Ohne die oben genannten Vorschläge zu berücksichtigen, wird Ihre mobile Conversion-Rate wahrscheinlich leiden und die Leute werden abprallen.

Erwägen Sie, die Empfehlungen umzusetzen, und sehen Sie, wie sich Ihre Zielseiten nach dem Klicken in hochoptimierte Conversion-Assets verwandeln. Holen Sie sich noch heute eine Instapage AMP-Demo.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.