Gebruik mobiele optimalisatie in Klaviyo aanmeldingsformulier

Overzicht

Stem je Klaviyo formulieren af op desktop en mobiel zonder formulieren te dupliceren, zodat je sneller kunt publiceren en de ervaring voor mobiele bezoekers kunt verbeteren.

Met mobiele optimalisatie kun je ervaringen per apparaat ontwerpen door mobiele en desktopweergaven naast elkaar te bewerken en door te kiezen of wijzigingen in blokken worden gesynchroniseerd tussen apparaten of apparaatspecifiek blijven.

Voordat je van start gaat

• Sommige bloktypes ondersteunen het ontkoppelen tussen apparaten niet. Uitzonderingen zijn onder andere: Openbaarmaking, Draaien om te winnen, Afbeelding (apart behandeld) en Telefoonnummer (toestemming in meerdere stappen).

   

Hoe het werkt

Knoppen voor voorvertoning van twee apparaten

Bekijk een voorbeeld van je formulier op desktop en mobiel naast elkaar om te zien hoe bewerkingen op apparaten in realtime worden aangepast. Dit vermindert het heen-en-weer geloop en versnelt de kwaliteit van het mobiele ontwerp.

Gekoppelde vs. ongelinkte blokken

Standaard zijn gelijkwaardige blokken in desktop en mobiel gekoppeld: wijzigingen in de ene weergave worden doorgevoerd in de andere. Je kunt ervoor kiezen om blokken te ontkoppelen om bewerkingen te maken voor alleen mobiel of desktop zonder je formulier te dupliceren.

Je kunt een geselecteerd blok ontkoppelen/relinken door te klikken op de ontkoppelknop in het canvas of op de ontkoppelknop in het zijpaneel. 

Wanneer een blok wordt losgekoppeld:

• Bewerkingen zijn alleen van toepassing op de huidige apparaatweergave; het blok van het andere apparaat wordt niet gewijzigd.
• Het klonen van een ongelinkt blok creëert de kloon alleen in de huidige apparaatweergave (het klonen van een gelinkt blok dupliceert het op beide apparaten).

Blokken opnieuw koppelen:

• Opnieuw koppelen creëert een nieuw gekoppeld blok op alle apparaten. Als het tegenhangerblok is verwijderd, dan wordt het door opnieuw te koppelen aangemaakt voor het andere apparaat, zodat beide weergaven het blok weer hebben (je kunt dan alle duplicaten die je niet nodig hebt verwijderen).

teaser per apparaat

Je kunt teaser loskoppelen via het zijpaneel, zodat desktop en mobiel elk hun eigen teaser styling hebben. Door opnieuw te linken wordt de zichtbaarheid teruggezet naar alle apparaten voor de opnieuw gelinkte teaser.

Stap voor stap

Dubbel voorbeeld openen

1. Open je formulier in de editor.
2. Schakel over naar de preview via de toggle die zowel desktop als mobiel naast elkaar laat zien om de lay-out en spatiëring in één oogopslag te beoordelen.

Een blok ontkoppelen voor apparaatspecifieke bewerkingen

1. Selecteer het blok dat je mobiel wilt aanpassen.
2. Kies voor Unlink zodat mobiele bewerkingen geen invloed hebben op de desktop.
3. Pas je mobiele lay-out aan (bijv. locatie, lettergroottes, spatiëring) voor leesbaarheid op kleinere schermen.
4. Herhaal dit voor de andere blokken als dat nodig is.

Koppel opnieuw wanneer je weer gedeeld gedrag wilt

1. Selecteer het blok en kies Relink.
2. Als de tegenhanger ontbreekt op het andere apparaat, maakt de editor deze automatisch aan.
3. Dubbele blokken verwijderen.

Teaser per apparaat instellen (optioneel)

1. Open teaser instellingen en kies Ontkoppelen.
2. Configureer teaser inhoud of zichtbaarheid voor desktop en mobiel onafhankelijk van elkaar.

3. Koppel later opnieuw als je één teaser op beide apparaten wilt toepassen.

    

Best practices voor mobiele formulieren

• Geef prioriteit aan kleinere schermen: gebruik grotere lettertypen, beknopte tekst.

• Vergroot de tapdoelen en verticale afstand zodat knoppen en invoer gemakkelijk te gebruiken zijn.

• Overweeg schermvullend op mobiel voor meer focus en duidelijkheid, vooral op kleinere apparaten.

• Houd beeldspraak doelgericht. Als een zijafbeelding concurreert met de inhoud op kleine schermen, verberg deze dan of vereenvoudig de lay-out.

   

Beperkingen en gedrag om te weten

• Een gekoppeld blok is een enkel blok waarvan de zichtbaarheid is ingesteld op zowel desktop als mobiel. Alle bewerkingen die je in beide weergaven maakt, werken dat ene gedeelde blok bij.

• Als je een blok loskoppelt, maakt de editor een tweede blok onder de motorkap en stelt elk blok in op een ander apparaat (één alleen desktop, één alleen mobiel). Vanaf dat moment worden bewerkingen niet meer met elkaar gesynchroniseerd.

• Unlinking wordt niet ondersteund voor sommige bloktypen: Openbaarmaking, Draaien om te winnen, Afbeelding (apart behandeld in side-image werk) en Telefoonnummer (toestemming in meerdere stappen).

• Klonen gedraagt zich verschillend op basis van de linkstatus: klonen van gelinkte blokken verschijnen op beide apparaten; klonen van ongelinkte blokken verschijnen alleen op de huidige apparaatweergave.

• Als je opnieuw koppelt, wordt het geselecteerde blok de bron van de waarheid en wordt het op beide apparaten weergegeven. Als een tegenhanger ontbreekt, maakt de editor deze aan; als er meerdere versies bestaan, moet je misschien handmatig de extra blokken verwijderen die je niet wilt behouden.

   

Resultaat

Je zou nu een aanmeldingsformulier moeten kunnen maken dat geoptimaliseerd is voor mobiele apparaten zonder twee aparte formulieren te maken. 

Probleemoplossing

• Ik zie geen unlink/relink op een blok:
  Het blokkeertype ondersteunt mogelijk geen ontkoppelen (zie uitzonderingen).

• Mijn mobiele wijziging heeft invloed gehad op desktop (of omgekeerd):
  Zorg ervoor dat het blok is losgekoppeld voordat je de apparaatspecifieke versie bewerkt.

• Mijn relink creëerde een extra blok:
  Dat is te verwachten als de tegenhanger ontbrak. Verwijder het duplicaat dat je niet nodig hebt na het opnieuw koppelen.

   

Volgende stappen

• Aan de slag met aanmeldingsformulier.

• Grondbeginselen: vormgeven.

• Hoe je een aanmeldingsformulier A/B test.