Die besten Tipps zum Design von mobilen Zielseiten, die Sie nirgendwo anders finden werden

Es gibt viele Online-Ressourcen, die sich mit dem Design von mobilen Post-Click-Landingpages befassen, aber es gibt nicht viele spezifische Designanweisungen, wie man tatsächlich eine Seite mit hoher Konversion erstellt.

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

Mein Name ist Cosmin Serban, Director of Design Services bei Instapage. Sie fragen sich vielleicht: Was qualifiziert Cosmin dazu, über das Design von mobilen Post-Click-Landingpages zu schreiben?

Ich habe Kunden über Best Practices bei der Gestaltung und Strukturierung ihrer Post-Click-Landingpages aufgeklärt, um ihre Konversionsraten zu verbessern. Außerdem habe ich:

• Über 1.000 Post-Click-Landingpages überprüft
• Wir arbeiten mit Kunden zusammen, um sicherzustellen, dass ihre Botschaft ankommt und ihre Besucher eine gute Erfahrung machen, 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 wurden. Die Vorlagen finden Sie hier.

Mobile Post-Click-Landingpage-Design: Was Sie wissen sollten, bevor Sie beginnen

Einige Konzepte in diesem Artikel wurden intern beim Erstellen 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 einzigartigen Herausforderungen, aber das Verständnis dieser grundlegenden Begriffe sollte Ihnen auf jeden Fall dabei helfen, jedem Besucher, der über sein mobiles Gerät 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, als Sie denken, eine Struktur zu haben, in der Sie die richtige Gruppe von Elementen zur richtigen Zeit liefern.

Das erste, was einem in den Sinn kommt, ist die völlig andere Art und Weise, wie unsere Besucher den Inhalt auf mobilen Seiten scannen. Wir alle haben vom F-Muster oder Z-Muster auf Desktop-Post-Click-Landingpages gehört, aber wie heißt das Muster für Mobilgeräte? 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-Landingpage ist, empfehlen wir, sich an ein einspaltiges Layout zu halten, anstatt zu versuchen, viele Inhalte horizontal einzufügen. (Niemand mag es, zu kneifen und zu zoomen.)

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

Dieser direkte Vergleich zeigt, wie eine Desktop-Seite im Vergleich zu einer mobilen Seite aufgebaut ist:

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, erstellt einen nativ mobil ansprechenden Satz von Objekten. Alternativ können Gruppen so konfiguriert werden, dass das Seitenverhältnis komplexer Anordnungen gesperrt wird, um ihre genauen Proportionen beizubehalten, wenn sie in die mobile Version Ihrer Seite konvertiert werden.

Mobile Aspect Ratio Lock hält Ihre geschichteten Gruppierungen zusammen und sperrt das Seitenverhältnis, egal 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 über dem Falz zu haben, nicht ideal. Es ist wichtiger, dem Besucher den Kontext seiner Anmeldung zu vermitteln, als ihm nur die Möglichkeit zu geben, so schnell wie möglich zu handeln.

Ladezeit

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

Wenn Sie viele Animationen für unterstützende Inhalte benötigen, empfehlen wir, bei einfachen Bildern für Mobilgeräte zu bleiben. Mit einfach meine ich, dass Sie benutzerdefinierte Hintergrundbilder für einen bestimmten Abschnitt erstellen müssen. Die Verwendung einer Fotobearbeitungssoftware zum Anpassen der Größe oder des Layouts des Fotos kann den zusätzlichen Zeitaufwand wert sein, wenn Sie Ihre Seiten beschleunigen können.

Das Gleiche gilt für Hintergrundbilder, da Sie kein Bild mit einer Breite von 2.000 Pixeln und 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:

Meistens 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 Botschaft vermitteln, zeigen Sie einfach eines auf dem Handy an.

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

Erstellen Sie eine 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 eine unzusammenhängende Erfahrung von der Anzeige bis zum Post-Klick erzeugt, springen Besucher ab.

Bedenken Sie dann, dass Google die Landingpage-Erfahrung nach dem Klick als einen Faktor betrachtet, um den Anzeigenrang zu bestimmen, der letztendlich zu Ihrer Klickrate beiträgt. Addieren Sie all das und Marken haben ein großes Problem in der Hand. Glücklicherweise existiert das AMP-Framework.

Insbesondere AMP-Seiten sind für Werbetreibende attraktiv, da sie durch nahezu sofortige Ladezeiten und reibungsloses Scrollen überzeugendere mobile Nutzererlebnisse 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 der Landingpage nach dem Klick. Im Gegensatz zu herkömmlichen mobilen Seiten werden AMP-Seiten automatisch von Google AMP Cache zwischengespeichert, um schnellere Ladezeiten in Google zu erzielen.

Die Vorteile des AMP-Frameworks überwiegen wirklich seine Grenzen:

• Schnellere Seitenladegeschwindigkeit auf Mobilgeräten
• Bessere Benutzererfahrung beim mobilen Surfen
• Die Verwendung von AMP-Seiten kann Ihren Qualitätsfaktor erhöhen
• Google bevorzugt Seiten, die AMP verwenden

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

Design für Berührung

Eine Ihrer größten Herausforderungen beim Design von mobilen Post-Click-Landingpages besteht darin, sicherzustellen, dass Besucher so einfach wie möglich handeln 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 kennen Seiten, auf denen es sehr schwer ist, auf etwas zu tippen oder die Erfahrung nicht auf mobile Benutzer zugeschnitten ist. Insbesondere Textlinks – die Anpassung der Größe von Textelementen, auf die ein Hyperlink verweist, ist sehr hilfreich. Ihr Besucher sollte nicht heranzoomen müssen, um die gewünschte Aktion auszuführen.

Tasten

Das größte Problem, das uns aufgefallen ist, ist jedoch die Größe der Schaltflächen auf Post-Click-Landingpages. Unser Team empfiehlt, Schaltflächen mit einer Höhe von mindestens 70 Pixeln zu entwerfen und sie so breit wie möglich zu machen, aber niemals die volle Breite (400 Pixel) zu dehnen, da sie mit einem kleinen Abschnitt verwechselt werden könnten.

Der Hover-Effekt ist eine nette Geste für Desktop-Seiten, da er dem Besucher signalisiert, dass er auf dieses bestimmte Element reagieren kann. Auf Mobilgeräten sind Durch-Hover-Effekte überflüssig.

Ränder

Für Ränder empfehlen wir, auf jeder Seite einen sicheren Bereich von mindestens 20 Pixeln vertikal frei zu halten und visuelle Spannungen zu vermeiden, die durch Elemente zu nahe an den Seiten des Telefonbildschirms auftreten können.

Leerzeichen sind für mobile Seiten genauso wichtig wie für Desktop-Seiten. Die Grundkonzepte gelten immer noch, versuchen Sie einfach, alles zu verteilen und keine Elemente wirklich nah beieinander zu haben. Auf diese Weise können Sie visuelle Spannungen vermeiden.

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, bleibt Ihnen überlassen, 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, und das verleiht ihr ein moderneres Aussehen:

Lesbarkeit

Man könnte meinen, dass eine klare Lesbarkeit des Inhalts eine Selbstverständlichkeit ist, 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 sind:

• Hauptüberschrift: 28 Pixel
• Untertitel: 22 Pixel
• Absätze: 17 Pixel
• Sonstige Angaben: 15 Pixel

Natürlich können Sie diese Größen anpassen, da es nicht eine Größe für alle Bedürfnisse gibt. Es sollte jedoch als guter Ausgangspunkt für die Entwicklung einer mobilen Post-Click-Landingpage dienen.

Erwähnenswert ist auch die Zeilenhöhe bei Textelementen.

In bestimmten Situationen auf dem Desktop ist es sinnvoll, 1.0 oder sogar 1.2 zu verwenden. 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.

Formen

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

Auf unseren mobilen Seiten strecken wir die Formularfelder normalerweise so weit wie möglich horizontal 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 Vorgehensweise, die unser Team aufgedeckt hat, ist, dass, wenn eine Seite mehr als 2 Formularfelder enthält , die Beschriftungsposition nach außen gesetzt werden kann, damit Besucher leichter wissen, welche Informationen benötigt werden, anstatt sich daran zu erinnern, was sie eingeben müssen:

Steigern Sie ab heute Ihre mobilen Conversions

Genau wie bei Desktop-Seiten dreht sich beim Design von mobilen Post-Click-Landingpages zunächst alles um die Benutzererfahrung und darum, was die Menschen dazu bringt, sich zu engagieren und zu konvertieren. Ohne Berücksichtigung der obigen Vorschläge wird Ihre mobile Conversion-Rate wahrscheinlich leiden und die Leute werden abspringen.

Ziehen Sie die Umsetzung der Empfehlungen in Betracht und sehen Sie, wie sich Ihre Post-Click-Landingpages in hochoptimierte Conversion-Assets verwandeln. Holen Sie sich noch heute eine Instapage AMP-Demo.