Il est un fléau sous estimé dans l’univers des emailers, un conflit dévastateur qui a conduit des équipes entières de graphistes / développeurs à se livrer une guerre sans merci. La raison de cette lutte ? Un choix cornélien : la beauté de nos emails commerciaux doit-elle être sacrifiée au détriment de leur lisibilité / délivrabilité ?

Le coupable

Depuis 20 ans, la technologie n’a cessé d’évoluer offrant au web de formidables avancées, une émulation sans précédent. Malgré cela, un outil reste bloqué à l’âge de pierre : le client mail.

A l’instar des navigateurs web, chaque client mail / webmail (Outlook, Gmail, Mail Mac, Thunderbird…) retranscrit à l’écran de l’utilisateur sa propre interprétation du code HTML / CSS soumis. L’illustration la plus parlante reste l’affichage de certains sites sous la version 6 d’Internet Explorer, un navigateur daté qui ne prend pas en compte les nouvelles fonctionnalités présentes dans le code source des sites web.

Si vous êtes sous Windows XP, et que vous utilisez encore IE6, nous vous supplions de mettre votre navigateur à jour (une nouvelle vie s’ouvrira à vous), ou de passer à Google Chrome, Firefox…

Ainsi, d’une messagerie à l’autre, votre email marketing ne s’affichera pas de manière uniforme. Au programme : décalage, bug d’affichage, typo hasardeuse voire même absence de délivrabilité… En cause, la non interprétation de bon nombre d’éléments CSS par les messageries.

Pour mieux s’y retrouver, le routeur Campaign Monitor dresse une liste des différents styles CSS acceptés par les plus importants clients / webmails du marché.

Abdiquer ou persévérer ?

Face à ce douloureux constat, deux solutions s’offrent à vous :

  • Proposer à vos abonnés un email à l’esthétique peu sophistiquée mais lisible sur tous supports ;
  • Construire un email au design audacieux mais lisible par 60% de vos lecteurs…

Courage, on ne baisse pas les bras ! Il existe une ultime alternative : optimiser votre mail d’un point de vue technique sans mettre à mal votre créativité. Afin de vous aider à dompter les différentes subtilités, Penrose vous livre quelque secrets qui nous l’espérons vous seront bien utiles :

Les bordures bleues sur les images cliquables

Sous la version logicielle d’Outlook, des bordures bleues peuvent en effet apparaître autour des images cliquables (sur lesquelles une balise <a href> est appliquée). Il existe une solution simple pour les supprimer : ajouter un border= »0″ dans votre balise :

À gauche, le résultat souhaité, à droite, la version avec ces sublimes bordures bleues...

À gauche, le résultat souhaité, à droite, la version avec ces sublimes bordures bleues…

 

Les textes noirs cliquables qui deviennent bleus

Lorsqu’un lien texte html est cliquable, par défaut sa couleur passe de noire à bleue. Pour éviter cela, il est possible d’ajouter une balise « style » au <a href> :

Problème, sur Gmail, le texte est toujours bleu. La solution ? Ne pas utiliser la couleur noire de base (#000000) mais un noir différent (la différence entre les deux variantes de noir est heureusement imperceptible) :

capture-lien-bleu

Au dessus, la version souhaitée, au dessous, la version affichée sur Gmail…

 

L’interlignage des textes sur Outlook.com

Sur Outlook.com, l’interlignage est plus espacé qu’ordinaire. Du coup, cela peut affecter le rendu souhaité sur certains blocs (qui gagnent en hauteur…). Il existe une méthode simple pour résoudre le soucis, en plaçant ce code dans la balise <head> de votre kit mail :

capture-interlignage-outlook

À gauche, la version souhaitée, à droite, la version appliquée par défaut sur Outlook.com

 

Appliquer une couleur de fond

Pour insérer une couleur de fond dans votre kit mail, deux solutions complémentaires sont à utiliser, pour avoir le bon rendu aussi bien sur le client Outlook, que sur l’ensemble des webmails populaires (Gmail, Outlook.com, Yahoo…) :

À gauche la version souhaitée, à droite la version mal interprétée.

À gauche la version souhaitée, à droite la version mal interprétée.

 

Nous espérons que ces quelques astuces vous seront utiles lors de vos prochaines créations de campagnes. Comme vous l’aurez compris, avant même la résolution éventuelle de certains bugs d’affichage, leur identification préalable est primordiale pour apporter une solution au cas par cas. Donc vous n’avez plus d’excuses, testez vos emails avant envoi sur un maximum de messageries et ne faites plus l’impasse sur l’optimisation technique et l’esthétique de vos mails !

Le printemps
Article suivant

Répondre