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 :
Et voici le code html d’origine de l’emailing (oui, je sais, pas cool le screenshot pour du code html) :
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.
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 :
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) :
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 …