Optimiere deine Mobilgeräte in Klaviyo-Anmeldeformularen

Übersicht

Passe deine Klaviyo-Formulare für Desktop- und Mobilgeräte an, ohne Formulare zu duplizieren. So kannst du schneller veröffentlichen und das Erlebnis für mobile Besucher*innen verbessern.

Mit der Optimierung für Mobilgeräte kannst du geräteübergreifende Erlebnisse gestalten, indem du die Ansichten für Mobilgeräte und Desktops nebeneinander bearbeitest und wählst, ob Änderungen an Blöcken geräteübergreifend synchronisiert werden oder gerätespezifisch bleiben sollen.

Bevor du anfängst

• Einige Blocktypen unterstützen das Aufheben der Verknüpfung zwischen Geräten nicht. Ausnahmen sind: Offenlegung, Glücksrad, Bild (separat bearbeitet) und Telefonnummer (mehrstufige Einwilligung).

   

So funktioniert es

Vorschau für zwei Geräte umschalten

Zeige eine Vorschau deines Formulars auf Desktop und Mobilgerät nebeneinander an, um zu sehen, wie sich Bearbeitungen auf verschiedenen Geräten in Echtzeit anpassen. Dadurch wird das Hin- und Herwechseln reduziert und die Designqualität für Mobilgeräte gesteigert.

Verlinkte vs. nicht verlinkte Blöcke

Standardmäßig sind äquivalente Blöcke auf Desktop- und Mobilgeräten verknüpft: Änderungen in einer Ansicht werden auf die andere übertragen. Du kannst die Verlinkung von Blöcken aufheben, um Änderungen nur für Mobilgeräte oder Desktops vorzunehmen, ohne dein Formular zu duplizieren.

Du kannst die Verknüpfung eines ausgewählten Blocks aufheben oder wiederherstellen, indem du auf die Schaltfläche zum Aufheben der Verknüpfung im Canvas klickst oder auf die Schaltfläche zum Aufheben der Verknüpfung im Seitenbereich. 

Wenn die Verknüpfung eines Blocks aufgehoben wird:

• Die Änderungen gelten nur für die aktuelle Geräteansicht; der Block des anderen Geräts wird nicht geändert.
• Wenn du einen nicht verknüpften Block klonst, wird der Klon nur in der aktuellen Geräteansicht erstellt. (Wenn du einen verknüpften Block klonst, wird er auf beiden Geräten dupliziert.)

Blöcke neu verknüpfen:

• Durch das erneute Verknüpfen wird wieder ein neuer gepaarter Block auf allen Geräten erstellt. Wenn der Gegenstück-Block gelöscht wurde, wird er durch erneutes Verknüpfen für das andere Gerät erstellt, sodass beide Ansichten den Block wieder haben (du kannst dann alle Duplikate löschen, die du nicht benötigst).

Teaser pro Gerät

Du kannst die Verknüpfung von Teasern über das Seitenpanel aufheben, sodass Desktop- und Mobilgeräte jeweils ein eigenes Teaser-Styling haben. Durch das erneute Verknüpfen wird die Sichtbarkeit auf alle Geräte für den erneut verknüpften Teaser zurückgesetzt.

Schritt für Schritt

Doppelte Vorschau öffnen

1. Öffne dein Formular im Editor.
2. Wechsle zur Vorschau über den Umschalter, der Desktop und Mobilgerät nebeneinander anzeigt, um das Layout und den Abstand auf einen Blick zu beurteilen.

Verknüpfung eines Blocks für gerätespezifische Änderungen aufheben

1. Wähle den Block aus, den du auf Mobilgeräten anpassen möchtest.
2. Wähle Verknüpfung aufheben, damit Bearbeitungen auf Mobilgeräten keinen Einfluss auf den Desktop haben.
3. Passe dein mobiles Layout (z. B. Standort, Schriftgrößen, Abstand) an, um die Lesbarkeit auf kleineren Bildschirmen zu gewährleisten.
4. Wiederhole dies bei Bedarf für andere Blöcke.

Erneut verknüpfen, wenn du wieder gemeinsames Verhalten möchtest

1. Wähle den Block aus und wähle Neu verknüpfen.
2. Wenn das Gegenstück auf dem anderen Gerät fehlt, erstellt der Editor es automatisch.
3. Entferne doppelte Blöcke.

Teaser nach Gerät festlegen (optional)

1. Öffne die Teaser-Einstellungen und wähle Verknüpfung aufheben.
2. Desktopinhalte oder Sichtbarkeit für Teaser- und Mobilgeräte unabhängig konfigurieren

3. Verknüpfe sie später erneut, wenn du möchtest, dass ein Teaser auf beide Geräte angewendet wird.

    

Best Practices für mobile Formulare

• Priorisiere kleinere Bildschirme: Verwende größere Schriftarten und prägnante Texte.

• Erhöhe die Tap-Ziele und den vertikalen Abstand, damit Schaltflächen und Eingaben einfach zu bedienen sind.

• Ziehe den Vollbildmodus auf Mobilgeräten in Betracht, um Fokus und Klarheit zu erhalten, insbesondere auf kleineren Geräten.

• Halte deine Bilder zielgerichtet. Wenn ein Seitenbild auf kleinen Bildschirmen mit dem Inhalt konkurriert, blende es aus oder vereinfache das Layout.

   

Wichtige Einschränkungen und Verhaltensweisen

• Ein verknüpfter Block ist ein einzelner Block, bei dem die Sichtbarkeit auf dem Gerät sowohl auf dem Desktop als auch auf dem Mobilgerät eingestellt ist. Alle Änderungen, die du in einer der beiden Ansichten vornimmst, aktualisieren diesen einen gemeinsamen Block.

• Wenn du die Verknüpfung eines Blocks aufhebst, erstellt der Editor einen zweiten Block unter der Haube und legt jeden Block auf ein anderes Gerät fest (einen Block nur für Desktop-Computer, einen Block nur für Mobilgeräte). Ab diesem Zeitpunkt werden die Bearbeitungen nicht mehr zwischen ihnen synchronisiert.

• Das Aufheben der Verknüpfung wird für einige Blocktypen nicht unterstützt: Offenlegung, Glücksrad, Bild (wird separat in Seitenbildarbeit behandelt) und Telefonnummer (mehrstufige Einwilligung).

• Das Klonen verhält sich je nach Linkstatus unterschiedlich: Klone verknüpfter Blöcke werden auf beiden Geräten angezeigt; Klone nicht verknüpfter Blöcke werden nur in der aktuellen Geräteansicht angezeigt.

• Wenn du einen Relink durchführst, wird der ausgewählte Block zur Source of Truth und wird auf beiden Geräten angezeigt. Wenn ein Gegenstück fehlt, wird es vom Editor erstellt. Wenn mehrere Versionen vorhanden sind, musst du möglicherweise alle zusätzlichen Blöcke, die du nicht behalten möchtest, manuell entfernen.

   

Ergebnis

Du solltest jetzt in der Lage sein, ein Anmeldeformular zu erstellen, das für Mobilgeräte optimiert ist, ohne zwei separate Formulare zu erstellen. 

Fehlerbehebung

• Ich sehe in einem Block kein Aufheben/Aufheben der Verknüpfung:
  Der Blocktyp unterstützt möglicherweise kein Aufheben der Verknüpfung (siehe Ausnahmen).

• Meine Änderung für Mobilgeräte betraf den Desktop (oder umgekehrt):
  Vergewissere dich, dass der Block nicht verknüpft ist, bevor du die gerätespezifische Version bearbeitest.

• Mein Relink hat einen zusätzlichen Block erstellt:
  Das wird erwartet, wenn das Gegenstück fehlte. Lösche das Duplikat, das du nach dem erneuten Verlinken nicht benötigst.

   

Nächste Schritte

• Erste Schritte mit Anmeldeformularen

• Grundlagen: Formulardesign.

• So führst du A/B-Tests für ein Anmeldeformular durch.