Introduction
Le design responsive est la méthode qui garantit que vos emails s'affichent correctement et offrent une expérience agréable sur tous les appareils (téléphone, tablette, ou ordinateur).
Étant donné que la majorité des emails sont désormais ouverts sur mobile, l'adoption d'un design responsive est essentielle pour atteindre vos destinataires de manière optimale.
Comment réaliser un contenu responsive avec Factorly ?
Factorly vous permet de créer des emails responsives en s'appuyant sur plusieurs dimensions :
Un Contenu fluide par défaut
Par défaut, Factorly assure un comportement fluide de vos emails.
- Le contenu s'adapte naturellement à la taille de l'écran.
- Grâce à des largeurs définies en pourcentage, les blocs s'étirent ou se rétractent automatiquement pour ajuster la largeur au support de lecture (ordinateur, tablette ou mobile).
Comportement des colonnes sur mobile (3 options)
Vous disposez de trois options pour gérer l'affichage de vos colonnes sur mobile :
- Colonnes côte à côte - l’option ‘comportement adaptatif des colonnes sur mobile’ est activé : Les colonnes conservent leur disposition horizontale, même sur mobile.
- Empilement standard - l’option ‘comportement adaptatif des colonnes sur mobile’ est désactivé : Pour une meilleure lisibilité, les colonnes se placent les unes en dessous des autres (passage à la ligne) sur mobile.
- Empilement inversé - L’option ‘Inverser l'ordre des colonnes sur mobile’ est activé : Les colonnes passent à la ligne sur mobile, mais l'ordre d'affichage est inversé par rapport à la version ordinateur.
Comportement adaptatif des images
Les images peuvent être configurées selon deux modes principaux :
-
Taille en pourcentage (%)
L'image ajuste automatiquement sa largeur à l'écran tout en préservant ses proportions. C'est la meilleure option pour un affichage harmonieux sur tous les supports. -
Taille fixe en pixels
L'image conserve la largeur exacte que vous avez définie, assurant un contrôle précis du design sur ordinateur (desktop).
Conseil mobile : Même si vous choisissez une taille fixe, vous pouvez forcer l'image à s'afficher à 100% de la largeur uniquement sur mobile.
Double Intégration
La Double Intégration est l'approche la plus personnalisée. Elle consiste à créer deux structures différentes d'un même bloc de contenu (une pour ordinateur, une pour mobile) pour n'afficher ou cacher qu'une seule version en fonction de l'appareil.
Contrôle de la visibilité des éléments :
Par défaut, tous les éléments sont visibles sur ordinateur et mobile. Pour ajuster l’affichage d’un élément selon les besoins :
-
Affichage sur Ordinateur seulement :
Sélectionnez Édition de la structure ligne > Comportement mobile > Choisissez ‘Ordinateur seulement’ dans la liste déroulante. -
Affichage sur Mobile seulement :
Sélectionnez Édition de la structure ligne > Comportement mobile > Choisissez ‘Mobile seulement’ dans la liste déroulante.
Conclusion
Le design responsive est essentiel à l'ère du mobile. Factorly vous fournit tous les outils nécessaires pour garantir un affichage optimal et performant de vos emails, tant sur ordinateur que sur mobile, maximisant ainsi l'impact de vos campagnes.
Articles complémentaires
Factorly : Produire un contenu accessible grâce à l'éditeur de contenu Drag & Drop