HTML et CSS dans les e-mails : qu’est-ce qui fonctionne en 2024 ?

Publié par Emma le


Codage • Conception d’e-mailsDaniel Schwarz • • 7 minutes LIRE

L’un des aspects les plus intéressants du développement Web ces dernières années a sans doute été un niveau de prise en charge beaucoup plus cohérent des nouvelles normes HTML, CSS et ECMAScript (JavaScript) parmi les navigateurs Web. Cependant, on ne peut pas en dire autant des clients de messagerie malgré l’introduction de nouvelles fonctionnalités telles que les requêtes multimédias, les unités flex, rem, etc.

Créer des modèles d’e-mails avec le générateur d’e-mails de cartes postales

Cartes postales : générateur de modèles d’e-mails

Comprendre les contraintes des clients de messagerie et leurs différents degrés de prise en charge CSS est crucial si vous souhaitez styliser vos e-mails avec CSS. Voici un guide rapide de l’assistance par courrier électronique pour CSS :

  • Utiliser des styles en ligne : les clients de messagerie ont besoin de styles en ligne, et non de sites Web, qui utilisent fréquemment des feuilles de style externes. La balise « style » doit donc être utilisée pour intégrer directement vos règles CSS dans votre code HTML.
  • Assurez la simplicité : il est recommandé de respecter les propriétés CSS fondamentales telles que la taille de la police, la couleur et la couleur d’arrière-plan, car elles ne sont pas toutes prises en charge par les clients de messagerie. Les caractéristiques compliquées et inutiles telles que les ombres, les dégradés et les animations doivent être évitées.
  • Utiliser des tableaux pour la mise en page : la conception des e-mails utilise encore largement les tableaux, malgré le fait que la conception en ligne moderne repose principalement sur CSS pour la mise en page. Pour organiser la mise en page de votre courrier électronique, utilisez des tableaux plutôt que des flottants, des flexbox ou des grilles.
  • Testez vos e-mails pour vous assurer qu’ils s’affichent correctement sur toutes les plateformes, compte tenu de la variété de clients de messagerie et d’appareils disponibles. Vous pouvez vérifier la compatibilité CSS de vos e-mails en utilisant des outils tels que Litmus et Email on Acid.
  • Utiliser des solutions de secours : c’est toujours une bonne idée de mettre en place une solution de secours au cas où un client de messagerie ne prend pas en charge un attribut CSS spécifique. Par exemple, vous pouvez proposer une police de secours qui est plus couramment prise en charge si un client ne prend pas en charge les polices Web.

Ces recommandations vous aideront à générer des e-mails attrayants et efficaces qui fonctionnent avec la majorité des clients de messagerie. Pour garantir une compatibilité optimale, n’oubliez pas de tester fréquemment vos emails et de modifier votre CSS si nécessaire.

Jetons un coup d’œil à certaines de ces fonctionnalités et à la manière dont nous pouvons les faire fonctionner pour tous les clients de messagerie, en 2024.

CSS interne

Sans aucun doute, l’un des aspects les plus ennuyeux de la création d’e-mails est de devoir déclarer des styles pour chaque élément individuel dans son attribut de style (par exemple ), autrement connu sous le nom de « CSS en ligne ». ‘.

Heureusement, le CSS interne (c’est-à-dire les styles écrits dans un élément