Courriel HTML

Saviez-vous que dans un courriel HTML, les images de fonds ne sont pas recommandées?

C’est quoi, une image de fond?

Une image de fond peut être insérée via l’attribut background :
background= »http://www.monsiteweb.com/monimage.jpg »

Ou en css, via l’attribut style :
style= »background-image:url(http://www.monsiteweb.com/monimage.jpg); »

Ces deux méthodes peuvent être appliquées sur un élément comme un td, par exemple, pour générer une image qui sera affichée derrière le texte. Comme un fond d’écran par exemple. Le texte sera tout de même sélectionnable et modifiable.

Alors, qu’est-ce qui ne fonctionne pas?

Le problème vient principalement de Microsoft Outlook. Depuis la version 2007 de leur logiciel, les images de fond ne sont plus supportées. Même chose donc pour les versions 2010, 2013 et même pour Outlook.com, l’équivalent en ligne.

Pourquoi?

Entre la version 2003 et 2007 du logiciel, Microsoft a « mis à jour » le moteur d’interprétation du code HTML. Plutôt que d’utiliser celui d’Internet Explorer, le choix a été fait de se baser sur celui utilisé par Microsoft Word. Sans vouloir être négative, ce moteur est beaucoup plus limité au niveau du support des différentes fonctionnalités visuelles de HTML/CSS.

*Pour un aperçu des fonctionnalités supportées ou non sur les principaux logiciels ou services courriels, consultez l’excellent guide de Campaign Monitor.

Conclusion : y a-t-il des solutions?

Oui, mais non. Il existe une façon de le faire avec du VML (Vector Markup Language, un langage similaire au XML utilisé par Microsoft Word, entre autres). Cette méthode est cependant compliquée quand vient le temps de charger plusieurs images, ne permet pas une aussi grande latitude avec les propriétés de l’image et a même tendance à faire planter Outlook au moment de l’affichage. Somme toute, il est plus simple d’éviter les images de fond.

Si vous désirez quand même en utiliser une pour les logiciels qui le supportent, pensez à mettre une couleur de fond sous l’image qui rendra le texte bien lisible si elle ne peut être affichée.

Exemple :Courriels HTML-couleur de fond

L’autre option, c’est de créer une image qui comporte à la fois l’image et le texte. Toutefois, n’oubliez pas que c’est une mauvaise pratique de n’utiliser que des images dans vos envois.