Comment rendre un email Emailify responsive sur mobile ?
Emailify exporte automatiquement du HTML responsive, et vous pouvez affiner le comportement sur mobile grâce aux ajustements mobiles de chaque calque Emailify. Partez du frame d’email desktop, puis utilisez l’aperçu du plugin pour vérifier la version mobile avant l’export.
Où définir les ajustements mobiles ?
Sélectionnez le calque Emailify à ajuster, cliquez sur le bouton Settings dans l’en-tête du plugin, puis utilisez les réglages mobiles de ce calque. Les calques Text, Column, Row, Hero, Wrapper, image et bouton peuvent proposer des réglages mobiles différents selon le type de calque sélectionné.
Pourquoi la mise en page mobile commence-t-elle à une autre largeur ?
Emailify utilise un seul point de rupture responsive, basé sur la largeur du frame Emailify desktop dans Figma. Si votre frame Emailify mesure 600px de large, les styles mobiles s’appliquent à partir de 599px et en dessous. Si votre frame est plus large, le point de rupture mobile l’est aussi.
Pour ajouter des ajustements de style mobiles, cliquez sur n’importe quel calque Emailify de votre design, puis sur le bouton Settings dans l’en-tête du plugin, et appliquez les ajustements mobiles voulus au calque sélectionné.
Par exemple, cliquer sur un calque Text de votre email vous permet d’ajuster pour le mobile sa taille de police, son interligne, son interlettrage, l’espacement entre paragraphes, sa marge intérieure (padding) et son alignement ; cliquer sur un calque Row vous permet d’ajuster son padding, l’espacement entre ses colonnes, l’empilement ou non des colonnes sur mobile et, lorsque plusieurs colonnes partagent encore une même rangée sur mobile, leur alignement vertical sur mobile.
Vous pouvez prévisualiser vos ajustements mobiles avec la fonctionnalité d’aperçu du plugin Emailify.
Point de rupture mobile des emails. Les emails HTML exportés depuis Emailify ont un seul « point de rupture », défini automatiquement par la largeur du frame desktop dans Figma. Par exemple, si votre frame Emailify mesure 600px, les styles et ajustements mobiles s’appliquent à partir de 599px et en dessous.
Il est généralement recommandé de garder une largeur d’email comprise entre 600px et 640px, car les panneaux de lecture de certains clients ou applications de messagerie peuvent faire moins de 700px de large et afficher les styles mobiles au lieu de la mise en page desktop.
Vous pouvez appliquer des réglages en masse : ouvrez Settings, puis sélectionnez dans Figma plusieurs calques Emailify du même type. Chaque réglage que vous modifiez s’applique alors à tous les calques sélectionnés.