Utilisez l’optimisation pour mobile dans les formulaires d’inscription Klaviyo

Vue d’ensemble

Personnalisez vos formulaires Klaviyo pour ordinateur et mobile sans les dupliquer, ce qui vous aidera à publier plus rapidement et à améliorer l’expérience des visiteurs sur mobile.

L’optimisation pour mobile vous permet de concevoir des expériences par appareil en modifiant côte à côte les vues sur mobile et sur ordinateur, et en choisissant de synchroniser les blocs entre les appareils ou de rester spécifique à chaque appareil.

Avant de commencer

• Certains types de blocs ne prennent pas en charge la dissociation entre les appareils. Les exceptions sont les suivantes : clause de divulgation, « Roue de la chance », « Image » (traitée séparément) et « Numéro de téléphone » (consentement à plusieurs étapes).

   

Comment ça marche

Bouton bascule de prévisualisation sur deux appareils

Prévisualisez votre formulaire sur ordinateur et sur mobile côte à côte pour voir comment les modifications s’adaptent sur tous les appareils en temps réel. Cela réduit le basculement et accélère la qualité de la conception sur mobile.

Blocs liés ou non liés

Par défaut, les blocs équivalents sur ordinateur et sur mobile sont liés : les modifications d’une vue sont répercutées sur l’autre. Vous pouvez choisir de dissocier les blocs pour effectuer des modifications uniquement sur mobile ou sur ordinateur sans dupliquer votre formulaire.

Vous pouvez dissocier/relier un bloc sélectionné en cliquant sur le bouton de dissociation dans le canevas, ou en cliquant sur le bouton de dissociation du panneau latéral. 

Lorsqu’un bloc n’est pas lié :

• Les modifications ne s’appliquent qu’à l’affichage actuel de l’appareil. Le bloc de l’autre appareil n’est pas modifié.
• Le clonage d’un bloc non lié crée le clone uniquement dans la vue actuelle de l’appareil (le clonage d’un bloc lié le duplique sur les deux appareils).

Relier les blocs :

• Le recréage de liens crée à nouveau un bloc apparié sur tous les appareils. Si le bloc de contrepartie a été supprimé, le recréer un lien le crée pour l’autre appareil afin que les deux vues aient à nouveau le bloc (vous pouvez alors supprimer tous les doublons dont vous n’avez pas besoin).

Teasers par appareil

Vous pouvez dissocier les teasers via le panneau latéral, de sorte que les ordinateurs et les mobiles aient chacun leur propre style de teaser. Le réengagement réinitialise la visibilité sur tous les appareils pour le teaser réassocié.

Étape par étape

Ouvrir le double aperçu

1. Ouvrez votre formulaire dans l’éditeur.
2. Passez à l’aperçu via le bouton bascule qui affiche à la fois les ordinateurs et les mobiles côte à côte pour évaluer la mise en page et l’espacement en un coup d’œil.

Dissocier un bloc pour des modifications spécifiques à un appareil

1. Sélectionnez le bloc que vous souhaitez personnaliser sur mobile.
2. Choisissez Dissocier pour que les modifications sur mobile n’affectent pas les ordinateurs.
3. Ajustez votre mise en page mobile (par exemple, la localisation, la taille des polices, l’espacement) pour une meilleure lisibilité sur les écrans plus petits.
4. Répétez l’opération pour d’autres blocs si nécessaire.

Renouez le lien lorsque vous souhaitez à nouveau partager le comportement

1. Sélectionnez le bloc et choisissez Relink.
2. Si la contrepartie est manquante sur l’autre appareil, l’éditeur la crée automatiquement.
3. Supprimez les blocs en double.

Définissez les teasers par appareil (facultatif).

1. Ouvrez les paramètres du teaser et choisissez Dissocier.
2. Configurez indépendamment le contenu ou la visibilité du teaser pour les ordinateurs et les mobiles.

3. Veuillez revenir plus tard si vous souhaitez qu’un seul teaser s’applique aux deux appareils.

    

Bonnes pratiques pour les formulaires mobiles

• Privilégiez les écrans plus petits : utilisez des polices plus grandes, du texte concis.

• Augmentez les cibles des robinets et l’espacement vertical pour faciliter l’utilisation des boutons et des saisies.

• Envisagez le plein écran sur mobile pour plus de précision et de clarté, en particulier sur les appareils plus petits.

• Conservez des images pertinentes. Si une image latérale est en concurrence avec du contenu sur de petits écrans, masquez-la ou simplifiez la mise en page.

   

Limites et comportements à connaître

• Un bloc lié est un bloc unique dont la visibilité sur l’appareil est définie sur ordinateur et mobile. Toutes les modifications que vous apportez dans l’une ou l’autre des vues mettent à jour ce bloc partagé.

• Lorsque vous dissociez un bloc, l’éditeur crée un deuxième bloc sous le capot et définit chaque bloc sur un appareil différent (un ordinateur uniquement, un mobile uniquement). À partir de ce moment, les modifications ne sont plus synchronisées entre elles.

• La dissociation n’est pas prise en charge pour certains types de blocs : clause de divulgation, « Roue de la chance », « Image » (géré séparément dans les images latérales) et « Numéro de téléphone » (consentement à plusieurs étapes).

• Le clonage se comporte différemment en fonction de l’état du lien : les clones de blocs liés apparaissent sur les deux appareils ; les clones de blocs non liés n’apparaissent que dans la vue actuelle de l’appareil.

• Lorsque vous renouez des liens, le bloc sélectionné devient la source de vérité et est configuré pour s’afficher sur les deux appareils. S’il manque un homologue, l’éditeur le crée. S’il existe plusieurs versions, vous devrez peut-être supprimer manuellement les blocs supplémentaires que vous ne souhaitez pas conserver.

   

Résultat

Vous devriez maintenant pouvoir créer un formulaire d’inscription optimisé pour les appareils mobiles sans avoir à créer deux formulaires distincts. 

Résolution de problèmes

• Je ne vois pas de dissociation/de nouveau lien dans un bloc :
  Le type de bloc peut ne pas prendre en charge la dissociation (voir exceptions).

• Mon changement de mobile a affecté les ordinateurs de bureau (ou vice versa) :
  Assurez-vous que le bloc n’est pas lié avant de modifier la version spécifique à l’appareil.

• Mon nouveau lien a créé un bloc supplémentaire :
  C’est ce qui est attendu si la contrepartie manquait. Supprimez le doublon dont vous n’avez pas besoin après avoir relancé.

   

Prochaines étapes

• Démarrer avec les formulaires d’inscription

• Notions de base : conception de formulaires

• Comment effectuer un test A/B sur un formulaire d’inscription.