La solution au Bug de la newsletter de Badsender … merci Outlook

Restez informé.e via les newsletters de Badsender

Chaque mois, nous publions une newsletter sur l’email marketing et une infolettre sur la sobriété et le marketing. Pour avoir plus de détails sur le contenu et le rythme de nos communications, rendez-vous ici.

Votre adresse email servira uniquement à vous envoyer nos newsletters et nos invitations. JAMAIS ô grand jamais, nous ne la communiquerons à un tiers. Vous pourrez vous désabonner à tout moment en un seul clic.

Merci Outlook ! S’il y a bien une chose qui fait de l’emailing une discipline unique … c’est la gestion de l’HTML des différents clients email. Et parmi tous ces clients email, Outlook détient la palme !

Attention, pour comprendre cet article il vous faudra de bonnes notions d’html … et l’estomac bien accroché !

La gestion html d’Outlook : ce que vous voyez n’est pas le code que vous avez créé !

Il y a une chose très importante à avoir en tête lorsque vous avez des problèmes de rendu dans Outlook ! Celui-ci, qui utilise le moteur de rendu html de la suite Office, réécrit totalement votre code. Par exemple, le code css que vous avez placé dans le header de votre email est inséré « inline ».

Autre phénomène lié à cette réécriture, si Outlook juge que certaines balises ne sont pas présentes, par exemple la balise <p> autour d’un texte (ce que l’on évite de faire en email), il va l’ajouter automatiquement. Cela donne toute une série d’effets non désirés, comme par exemple des marges qui bougent, des couleurs d’arrière plan qui ne s’appliquent pas partout, etc.

L’exemple de la newsletter de Badsender !

Pour rappel, le bug dans Outlook

newsletter-badsender-bug

Et voici le code html d’origine de l’emailing (oui, je sais, pas cool le screenshot pour du code html) :

code-html-emailing-avant-optim-outlook

Le code corrigé (attention, avec un contenu différent !) :

Besoin d'aide ?

Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.


code-html-emailing-apres-optim-outlook

La principale différence est l’ajout de deux classes, l’une sur la cellule du tableau et l’autre sur le div qui permet de faire l’arrondi dans les clients email qui supportent cette fonctionnalité.

L’utilité des deux classes :

outlook-css-fix

Le but est simple, vu qu’outlook s’amuse à ajouter des marges à l’intérieur du div (voir ci-dessous pourquoi) et que de tout façon celui-ci n’est pas capable de gérer les bords arrondis, on va faire passer la bordure du <div> vers le <td> et ajouter une couleur de fond dans ce dernier.

Que donne ce code modifié dans le monde d’Outlook ?

Voici la réponse (attention aux yeux) :

code-html-email-outlook

Incroyable, n’est-ce pas ? Si vous regardez attentivement le code généré par Outlook, on retrouve bien les changements induits par le code CSS. Ce qui est plus difficile à comprendre, c’est tout ce code ajouté et … inutile, par exemple le nouveau <span> autour d’un espace ou la balise <p> qui ajoute une marge qui n’existait pas ! Merci Outlook, grâce à toi, chaque jour est unique …

Partagez
L’auteur

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *