Rendez la conception de votre e-mail réactive et adaptée aux mobiles en 5 étapes faciles
Publié: 2024-01-17Voulez-vous que vos newsletters par e-mail et vos campagnes marketing soient superbes sur n'importe quel appareil ? Bien sûr, vous le faites. Personne ne veut que son travail acharné devienne illisible dans la boîte de réception de quelqu'un. Heureusement, en seulement cinq étapes, vous pouvez vous assurer que vos e-mails sont réactifs et prêts à impressionner les abonnés. Alors prenez quelques rafraîchissements, votre playlist préférée ou une boisson, et commençons à nous assurer qu'ils soient à leur meilleur sur n'importe quel écran.
Définir les largeurs de colonnes en pourcentages et non en pixels
Pour rendre la conception de votre e-mail réactive, définissez les largeurs de colonnes en utilisant des pourcentages plutôt que des valeurs de pixels fixes. Cela permet aux colonnes de s'adapter de manière flexible à différentes largeurs d'écran.
Utiliser une grille fluide
L'approche de grille fluide utilise des pourcentages pour les largeurs de colonnes afin qu'elles puissent s'étendre et se contracter selon les besoins en fonction de la taille de l'écran. Pour une disposition simple à deux colonnes, faites en sorte que la colonne de gauche ait une largeur de 60 à 70 % et celle de droite une largeur de 30 à 40 %. Par exemple:
<tableau>
<tr>
<td width="65%">Contenu de la colonne 1 ici</td>
<td width="35%">Contenu de la colonne 2 ici</td>
</tr>
</table>
Cela permettra à la colonne 1 d'occuper 65 % de l'espace disponible et à la colonne 2 les 35 % restants. Sur un grand écran de bureau, la colonne 1 peut avoir une largeur de 650 px, tandis que sur un petit écran de mobile, elle ne peut avoir qu'une largeur de 200 px. Mais les proportions relatives resteront les mêmes.
Ajoutez des requêtes multimédias pour des points d'arrêt réactifs
Les requêtes multimédias vous permettent d'appliquer différentes règles de style en fonction de la largeur de l'écran. Vous pouvez les utiliser pour apporter d'autres ajustements à votre grille fluide à différents points d'arrêt. Par exemple:
/* Pour les téléphones mobiles : */
Écran @media uniquement et (largeur maximale : 600 px) {
tableau, td {
largeur : 100% !important;
}
}
/* Pour les tablettes : */
Écran @media uniquement et (largeur min : 601 px) et (largeur max : 900 px) {
tableau, td {
largeur : 80% !important;
}
}
Cela permettra d'agrandir le tableau et les colonnes pour remplir 100 % de la largeur de l'écran sur les petits téléphones et 80 % sur les tablettes, ce qui rendra la conception entièrement réactive.
Utilisez des images fluides et des médias redimensionnables
Pour rendre la conception de votre e-mail adaptée aux mobiles, les images et autres médias doivent être redimensionnés de manière fluide pour s'adapter à n'importe quelle taille d'écran. Suivez ces conseils :
Utiliser des tailles d'image réactives
Lorsque vous ajoutez des images à votre e-mail, utilisez un dimensionnement d'image réactif. Cela signifie fournir plusieurs tailles d'image afin que le client de messagerie puisse choisir la bonne taille pour l'écran sur lequel il est affiché.
Par exemple, au lieu d’inclure simplement une grande image de 1 000 px de large, incluez également :
- Une taille moyenne (environ 600px)
- Une petite taille pour les colonnes étroites (environ 400px)
- Une taille minuscule pour les petits écrans mobiles (environ 200px)
Le client de messagerie choisira automatiquement la meilleure taille pour l'écran et la bande passante. Pour spécifier plusieurs tailles d'image dans votre e-mail, utilisez l'attribut <img srcset>.
Rendre les médias adaptés aux mobiles
Pour d’autres médias comme les vidéos ou les GIF, proposez également plusieurs options de taille. Les vidéos doivent avoir des sources MP4 dans différentes résolutions. Les GIF et les iframes (comme les intégrations YouTube) doivent avoir des contraintes de largeur qui se redimensionnent pour s'adapter à n'importe quel écran.
Gardez ces conseils à l’esprit et les images, vidéos et autres médias de vos e-mails s’afficheront magnifiquement sur n’importe quel appareil. Vos abonnés apprécieront un e-mail beau et facile à lire partout où ils l'ouvriront.
Taille de la police en ems, pas en pixels
Pour rendre la conception de votre e-mail adaptée aux mobiles, vous souhaiterez dimensionner la police en ems au lieu de pixels. Les pixels sont des unités fixes, donc si quelqu'un fait un zoom avant sur son navigateur, le texte peut être déformé. Les Ems, en revanche, sont des unités relatives qui évoluent en fonction des paramètres de l'utilisateur.
Utiliser un cadre de messagerie réactif
Un cadre de messagerie réactif comporte des composants prédéfinis qui se redimensionnent automatiquement pour n'importe quelle largeur d'écran. Certaines options populaires sont MJML, Foundation for Emails et Ink. Ces frameworks utilisent ems pour le dimensionnement, vous n'avez donc pas à vous soucier de faire la conversion vous-même.
Si vous n'utilisez pas de framework, convertissez les pixels en ems
Si vous souhaitez un contrôle total sur votre CSS et préférez ne pas utiliser de framework, vous devrez convertir toutes les tailles de pixels en ems. Voici comment:
- Déterminez la taille de votre police de base en pixels. Disons que c'est 16px.
- Convertissez cela en ems. 1em = 16px (votre taille de base), donc 16px = 1em.
- Quelle que soit la taille que vous souhaitez utiliser, divisez par 16 px et multipliez par 1em. Par exemple, pour un en-tête de 24 px, 24px/16px = 1,5em.
- Remplacez toutes les tailles de pixels dans votre CSS par les équivalents em.
Alignez votre contenu de manière réactive
Pour rendre la conception de votre e-mail réactive, vous devez aligner votre contenu afin qu'il s'affiche correctement sur n'importe quelle taille d'écran. Suivez ces étapes:
Utiliser des mesures de fluides
Plutôt que d'utiliser des largeurs de pixels fixes pour les colonnes, les images et les conteneurs, utilisez des pourcentages. Cela permettra à votre contenu d’évoluer proportionnellement en fonction de la largeur de l’écran. Par exemple, au lieu d'une image avec width=”600px”, utilisez width=”50%”.
Évitez les coiffures lourdes
Gardez votre courrier électronique simple en limitant l'utilisation de styles personnalisés, qui ne s'afficheront pas correctement dans certains clients de messagerie. Appuyez-vous sur les tableaux HTML de base, les styles en ligne et l'attribut align pour la mise en page. Centrer les éléments si nécessaire.
En suivant ces étapes pratiques, vous garantirez que le contenu de vos e-mails s'affichera magnifiquement, quel que soit l'appareil utilisé par vos lecteurs pour ouvrir leur boîte de réception. Créer une excellente expérience de conception d'e-mails réactifs pour vos abonnés en vaut la peine.
Testez, testez et testez encore
Vérifiez comment il s'affiche sur les appareils mobiles
Nous savons tous que la majorité des gens utilisent leurs appareils mobiles pour accéder à leurs e-mails. Alors pour vous assurer que votre email est adapté aux mobiles, testez vos emails en les envoyant sur différents mobiles. Vérifiez-les sur les Androids, les iPhones et les tablettes. Vérifiez comment les images, les boutons et le texte sont affichés en mode portrait et paysage.
Test sur les principaux clients de messagerie
Tous les clients de messagerie n'affichent pas les e-mails de la même manière. Faites des tests sur Gmail, Outlook, Yahoo Mail et tout autre service de messagerie majeur que vos abonnés utilisent couramment. Recherchez tout problème lié à l'affichage des images, des liens intégrés, des boutons ou d'autres éléments interactifs. Apportez des modifications à votre code pour résoudre les problèmes d'affichage et garantir la cohérence entre les clients.
Vérifiez comment le contenu de secours apparaît
Pour les abonnés dont les images sont désactivées dans leur client de messagerie, votre contenu de secours apparaîtra à la place des images. Vérifiez à nouveau que tous les textes alternatifs, légendes d'images et descriptions d'images ont un sens en eux-mêmes et fournissent un contexte pour le contenu de votre e-mail. Le contenu de secours devrait toujours offrir une bonne expérience de lecture, même sans les images.
Avis sur un service de rendu d'email
Utilisez un service gratuit de test de rendu des e-mails comme Litmus, Email on Acid ou Mosaico pour voir comment votre conception d'e-mail s'affiche simultanément sur un large éventail de clients et d'appareils de messagerie. Ils fournissent des rapports mettant en évidence tous les problèmes à résoudre pour améliorer la réactivité de votre courrier électronique. Apportez des modifications à votre code et téléchargez à nouveau les e-mails de test jusqu'à ce que les rapports reviennent propres.
Vérifiez les liens et les éléments interactifs
Les liens, boutons et autres composants interactifs intégrés à votre courrier électronique doivent fonctionner correctement sur toutes les plateformes. Vérifiez à nouveau que les liens vont vers la destination prévue et que tous les boutons ou formulaires fonctionnent comme prévu. Testez-les plusieurs fois pour vous assurer qu'il n'y a pas de liens rompus ou d'éléments non fonctionnels avant de lancer votre campagne.
Des tests et des ajustements constants sont nécessaires pour perfectionner la conception réactive de votre e-mail. Mais en déployant des efforts dès le départ, vous obtiendrez un e-mail avec une large portée et un engagement élevé sur tous les appareils et clients de messagerie de vos abonnés.
Dépannage des problèmes courants de messagerie réactive
Contenu débordant sur mobile
- Utilisez des mises en page à une seule colonne. Plusieurs colonnes fonctionnent rarement correctement dans les e-mails.
- Gardez les paragraphes et les sections courts et concis. Les longs blocs de texte sont difficiles à lire sur les petits écrans.
- Utilisez des puces et des listes numérotées lorsque cela est possible. Ils prennent moins de place que les paragraphes.
- Masquez le contenu secondaire sur les petits écrans. Vous pouvez utiliser des requêtes multimédias pour afficher/masquer le contenu en fonction de la largeur de l'écran.
Problèmes de largeur d'e-mail
Certains clients de messagerie plus anciens ont des problèmes avec la largeur des e-mails réactifs. Pour résoudre ce problème :
- Définissez une largeur maximale sur votre conteneur de messagerie. Nous recommandons 600 px pour la plupart des e-mails.
- Ajoutez !important après les déclarations de largeur pour remplacer certains CSS du client de messagerie. Par exemple:
- Ajoutez un code de secours pour Outlook 2007-2013. Ces anciennes versions nécessitent un style séparé :
Suivre ces conseils de dépannage résoudra les problèmes de courrier électronique réactif les plus courants. Faites-moi savoir si vous avez d'autres questions !
Conclusion
Voici quelques moyens simples de vous assurer que vos e-mails sont réactifs. Gardez à l’esprit que plus de 50 % des e-mails sont ouverts aujourd’hui via des appareils mobiles, il est donc essentiel d’optimiser les écrans de plus petite taille. Passez en revue tous vos modèles de courrier électronique et apportez les modifications nécessaires à la taille de la police ainsi qu’à la taille et à l’espacement des images. Vos destinataires apprécieront de recevoir un e-mail qu'ils pourront lire et avec lequel ils pourront interagir, quels que soient les appareils qu'ils utilisent.