Dans un de nos précédents articles sur les bonnes pratiques de codage, nous avions déjà pointé des problèmes d’interprétation des images de fond.
Cette fois, Litmus, qui fourni un service de tests de rendu et de délivrabilité, a publié récemment un article révélant un souci sur la façon d’utiliser une couleur de fond (background color) et sur la meilleure façon de la coder. Leurs tests ont été effectués sur les différents webmail (Hotmail, Gmail, AOL, Yahoo) ainsi que sur les dernières versions de navigateurs (Internet Explorer, Chrome, Firefox).
Dans la création d’un email, la couleur de fond peut être utilisée en temps que telle ou pour pallier le non affichage de l’image de fond. Elle est principalement utilisée dans les balises <body>, <table>, <td> et <div>. Selon les habitudes de codage, on peut dénombrer 6 façons de coder la couleur de fond :
L’attribut bgcolor avec 3-digit hexadécimal => bgcolor=’#DDD’
L’attribut bgcolor avec 6-digit hexadécimal => bgcolor=’#DDDDDD’
L’attribut bgcolor avec une valeur RGB => bgcolor=’rgb(221, 221, 221)’
La propriété CSS background-color avec 3-digit hexadécimal => style=’background-color:#DDD’
La propriété CSS background-color avec 6-digit hexadécimal => style=’background-color:#DDDDDD’
La propriété CSS background-color avec une valeur RGB => style=“background-color:rgb(221, 221, 221’)
Tout d’abord, je vous invite à utiliser au maximum les attributs inline (bgcolor dans ce cas) car d’anciens webmail et outils de messagerie interprètent mal les propriétés CSS (inline ou non).
Concernant les différentes variantes du bgcolor, en parallèle des nombreuses expériences de litmus, je vous propose un rapide test de rendu entre Internet Explorer et Firefox.
Le premier test montre que sous Internet Explorer 8, l’utilisation de bgcolor et 3-digit hexadécimal est mal interprété car le fond est noir au lieu de gris. Sur le second test sous Firefox 8, la couleur de fond définie avec la méthode RGB est verte au lieu de grise. Grâce aux deux exemples, il est clair que la meilleure façon de coder la couleur de fond est d’utiliser l’attribut bgcolor avec 6-digit hexadécimal.
Rendu du bgcolor dans Internet Explorer
Rendu du bgcolor dans Firefox
Finalement, cette étude montre qu’avec des versions d’outils de messageries et de webmails très nombreuses et des moteurs de rendu tellement différents, le meilleur moyen d’avoir un email HTML cohérent sur n’importe quelle plateforme est de coder ses emails en utilisant les règles de l’ancienne école.
Si vous avez des questions, des remarques, un projet ou des suggestions, n’hésitez pas à contacter NSP qui met tout savoir faire et son expertise à votre disposition.
Réagissez à cet article en laissant un commentaire, partagez le à vos connaissances et inscrivez-vous à notre flux RSS pour être informé dès la parution de nouveaux articles.
