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

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 !) :

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 …

Vous désirez l'aide de spécialistes pour vos emailings ?

A propos de Jonathan Loriaux

Actif depuis plus de six ans dans l'emailing, j'ai eu un parcours qui a commencé du côté technique (intégration de campagnes emailing) avant de m'orienter vers la vente (en tant qu'expert eCRM) et enfin le conseil marketing. Depuis 4 ans je suis l'auteur du blog Badsender.com. L'emailing n'est pas seulement une expertise, c'est véritablement devenu ma passion, c'est pourquoi Badsender est maintenant mon activité principale avec la création d'une activité de consultant emailing liée au site.

Laisser un commentaire

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