Comment écrire le code HTML d’une newsletter pour Outlook et d’autres clients de messagerie ?

Dans ce billet, j’aimerais vous montrer comment j’ai créé un code HTML de newsletter qui s’affichera correctement dans tous les clients de messagerie, y compris Outlook. Grâce à ce tutoriel, vous serez en mesure d’écrire vous-même n’importe quel modèle HTML pour le contenu de votre mailing.

Dans l’article précédent, j’ai décrit le fonctionnement du mailing d’un point de vue technique et j’ai montré comment créer la conception graphique de la newsletter. Je vous invite à le lire :

Comment créer une newsletter responsive pour tous les clients de messagerie ? (cliquez)

Comment écrire le code HTML d’une newsletter pour Outlook ?

Créer du code sous Newsletter n’est pas facile et j’en ai parlé dans un article précédent. La plupart des clients de messagerie évoluent avec le temps et mettent à jour leur logiciel de messagerie pour lire correctement les messages HTML d’aujourd’hui. Malheureusement, tout le monde ne suit pas l’évolution du temps et ne met pas à jour son logiciel avec les nouvelles tendances HTML ou CSS. Microsoft et son application Outlook s’avèrent problématiques.

Outlook a le plus grand mal à lire de nombreux styles CSS populaires (par exemple, border-radius, bords arrondis) et des structures comme les div. Certes, elle lit la balise <div>, mais elle ne fonctionne pas bien avec cette structure et il y a souvent des problèmes. De plus, certaines choses fonctionneront sur une version d’outlook sur une autre et cela dépend de la version de l’application. Cela impose au programmeur beaucoup de travail supplémentaire lors de l’écriture du code et de son test. Alors comment le créer correctement ?

Le meilleur moyen est de faire des tests à la volée. Nous ne sommes pas en mesure de vérifier chaque fonctionnalité, code, style s’ils sont supportés ou non par l’application. C’est pourquoi il est préférable d’envoyer des éléments prêts à l’emploi à la volée pendant la création de la vue de la newsletter et de vérifier comment ils s’affichent dans les différents clients de messagerie. Un bulletin d’information envoyé à des applications de messagerie peut avoir une apparence complètement différente de celle qu’il a lorsqu’il est consulté dans un navigateur. Ce n’est qu’après l’envoi du message que l’on découvre à quoi ressemble la lettre d’information en tant que message électronique dans un courrier et une application donnés.

Le bulletin d’information doit être rédigé de manière simple, de préférence à l’aide de tableaux, les styles doivent être peu développés et les fonctionnalités de base doivent être utilisées. Cela nous permettra de nous rapprocher de l’aspect correct sur la plupart des clients de messagerie.

Tableau en HTML – qu’est-ce que c’est et comment l’utiliser ?
Une table en HTML est une structure qui nous permet de positionner du contenu dans la vue. Comme pour tout tableau, nous devons traiter les lignes et les colonnes. À l’intérieur du tableau, nous pouvons disposer les éléments en position horizontale et verticale.

Pourquoi utiliser un tableau pour les newsletters ?

Le positionnement du contenu dans la vue à l’aide de tableaux nous donne la garantie que chaque navigateur, application ou appareil le lira correctement. Dans le cas des vues basées sur la structure div, la situation se présente différemment en cas de mailing. Nous pouvons nous risquer à utiliser des divs dans le cas d’une lettre d’information et la plupart des clients de messagerie liront cette structure, mais lorsqu’il s’agit de styles écrits pour des divs, ils risquent malheureusement de ne pas fonctionner correctement.

Les tentatives de création de mises en page utilisant des divs se sont soldées par des mises en page plantées dans le cas des boîtes aux lettres Microsoft (outlook).

Comment utiliser les tableaux ? 

C’est très simple. Il est vrai que cela prend beaucoup plus de temps que d’utiliser les balises div ordinaires, car au lieu d’une <div></div> nous devons utiliser 3 balises :

1. 1. <table></table> – la balise table est une balise de tableau et doit avoir des lignes et des colonnes à l’intérieur,
   2. <tr></tr> – une ligne de tableau,
   3. <td></td> – colonne du tableau.

Bien sûr, au-delà de cette simple mise en page, il existe de nombreuses autres balises ou valeurs de tableau que nous pourrions utiliser. Il s’agit de balises telles que <thead> correspondant à l’en-tête du tableau ou <tfoot> correspondant au pied du tableau. En outre, il existe des fonctions telles que la fusion des colonnes, etc. etc. Mais la question est de savoir si nous avons besoin de tout cela. Pas nécessairement. La plupart des vues peuvent être créées en utilisant une construction simple de tables imbriquées.

Qu’est-ce que les tableaux imbriqués ?

Nous créons une table imbriquée à l’intérieur de la table principale qui correspond aux éléments suivants de notre vue (si nécessaire, bien sûr).

CSS conditionnel Outlook – affichage uniquement dans Outlook

Il arrive parfois que notre newsletter s’affiche correctement sur tous les types de clients de messagerie, mais que certains éléments soient impossibles à convertir pour les applications Outlook. Nous pouvons alors utiliser une condition pour