Comment adapter ses e-mails à tous les clients de messagerie ?

By Arnaud Doucerain, on April 13, 2016
8 min

Les e-mails sont surprenants ! On aurait tendance à croire que les réseaux sociaux ou les notifications sur smartphone auraient annoncé leur déclin mais, pourtant, le marché des e-mails est toujours en nette progression (de 9,8 milliards de $ en 2013 à 20,4 milliards pour fin 2017 selon Radicati Group).

On aurait aussi tendance à croire qu'en tant que service service assez ancien (datant de 1965, plus vieux que le web lui même !), et donc assez mature, l’envoi d’e-mails depuis une application web serait devenu particulièrement facile et normé. Pourtant, peu de développeurs web arrivent à générer de beaux e-mails du premier coup, et il est très courant de passer du temps à se creuser les méninges sur des histoires de compatibilité.

Puisqu’il faut un bouc émissaire à toute chose, le fautif principal est… Microsoft Outlook qui, comme Internet Explorer pour les sites web mais à un niveau plus dramatique, semble être resté bloqué dans l’Internet du siècle dernier, tant les styles CSS qu’il ne prend pas en compte sont pourtant aujourd’hui essentiels (Microsoft a d’ailleurs récemment demandé de l’aide aux développeurs). Cependant Gmail, qui se trouve être le client web le plus utilisé et de loin (même en entreprise), n’est pas en reste avec notamment une gestion particulièrement mauvaise du responsive (lecture sur petits écrans) et la non gestion de la balise HTML style, comme se plaint l’auteur de cet article sur TechCrunch.

Chez elCurator, nous militons pour la réduction de l’infobésité, et donc la réduction du nombre d’e-mails envoyés. Cependant, pour les quelques e-mails que nous envoyons, il nous a fallu nous assurer que leur apparence soit identique sur tous les clients de messagerie.

Mais plus personne n’utilise le logiciel Outlook aujourd’hui, pourquoi s’y attarder ?

Alors non, ce n’est pas “plus personne”, et même si ce n’était qu’une poignée de personnes ne dit-on pas que la satisfaction d’un utilisateur vaut tout l’or du monde ? ;)

Plus sérieusement, même si le logiciel Outlook est en déclin (passant de 9,5% de part de marché à 6,8% en 2015 selon Litmus), il reste l’outil privilégié des professionnels, et notamment des grands comptes. Si vous faîtes un produit B2B, il est donc important de se pencher sur ce sujet.

Chez elCurator, par exemple, nous sommes bien au dessus de ce chiffre puisque 12% des ouvertures de nos mails correspondent à une version desktop d’Outlook !

Devices

Environ 21% de nos ouvertures de mails correspondent à un logiciel desktop

Clients desktop

Environ 57% de ces ouvertures de mails sur un logiciel desktop correspondent à un logiciel Outlook

En outre, même si les versions récentes du logiciel (2013 et 2016) commencent à se populariser dans les entreprises, les précédentes versions (de 2000 à 2010) sont toujours à un fort niveau, comme l’indique ce schéma :

Outlook Shares

Manque de chance, ce sont les versions qui nécessitent particulièrement d’attention pour le design de mails. Il est donc important que leur design soit impeccable d’autant plus si le mailing est pour vous un moyen de rétention et de fidélisation.

Enfin, 4 versions d’Outlook figurent dans le Top 5 des clients les plus testés selon Litmus, ce qui montre bien qu’il s’agit d’une préoccupation partagée par de nombreuses entreprises.

La lutte des classes

Maintenant que vous êtes convaincus par le principe, passons à la pratique.

Si vous utilisez le framework HTML/CSS Foundation, vous pouvez utiliser Foundation for emails (anciennement Ink), qui promet des e-mails responsive et adaptés à tous types de clients. Cependant, si vous ne souhaitez pas dépendre d’un autre framework, vous lancer dans un refactoring de votre système existant, ou que vous souhaitez avoir davantage de liberté sur l’apparence globale, il suffit de suivre quelques règles assez simples.

Content-type

En premier lieu, si tous vous e-mails étaient en format texte jusqu’à présent, il faut vous assurer qu’ils sont bien envoyés en HTML, sinon il n’est même pas question de parler de design (en texte, les balises HTML, qui portent le design ne sont pas reconnues). texte est souvent le type par défaut.

Sous Rails, il suffit d’avoir une vue welcome.html.erb au lieu de welcome.text.erb.

En PHP, il faut fournir le type dans les headers de la fonction mail() :

additional_headers = 'Content-type: text/html; charset=utf-8';
mail ($to, $subject, $message, $additional_headers);

CSS inline

En second lieu, il faut savoir qu’il n’est pas possible de faire appel à une feuille de style dans le corps d’un e-mail. On peut faire appel à la balise style, mais cela encombre les templates, peut poser des problèmes et ne centralise pas le design des e-mails. Les éléments CSS doivent donc être ajoutés par l’intermédiaire de l’attribut style des balises HTML, ce qui rend le développement compliqué. Heureusement, il existe des solutions pour continuer à utiliser les feuilles de style, solutions qui se chargent de remplir automatiquement l’attribut style. Sous Rails, par exemple, il existe deux gems permettant d’inliner le CSS : Roadie et Premailer.

Pour la première, il suffit d’installer la gem et d’ajouter include Roadie::Rails::Automatic à votre classe de mailer pour que la magie opère...

Les bons attributs aux bonnes balises

Une fois ces deux étapes de préparation assurées, nous pouvons entrer dans le vif du sujet. Comme je le disais précédemment, le noeud du problème est la gamme Outlook, qui n’affiche pas les e-mails comme la plupart des autres clients. En effet, pour des raisons obscures, Windows décida que ce logiciel devait suivre les règles de mise en forme de Word 2007 plutôt que d’Internet Explorer ou autres navigateurs web. Word n’étant pas un navigateur lui-même, il est logique que ses compétences de rendu web soient minimes. Il nous faut donc composer avec cela, mais la bonne nouvelle est que cela convient aux autres clients, comme Gmail ou Thunderbird.

En regardant la conférence ParisWeb de Rémi Parmentier sur l'intégration des e-mails, je suis tombé sur un tableau particulièrement utile, qui est une sorte de résumé de la documentation officielle de Word 2007. Sur ce tableau, on peut voir que si Outlook n’accepte pas certains attributs CSS pour certaines balises, il peut les accepter pour d’autres.

CSS pris en compte dans Outlook 2007/2010/2013

CSS pris en compte dans Outlook 2007/2010/2013

(Les niveaux Core, CoreExtended et Full dépendent des versions de Word, et donc de Outlook. Pour être sûr d'avoir des e-mails clean, il faut prendre en compte ces trois colonnes, mais ne pas utiliser un attribut CSS pour une balise d'une autre colonne.)

Selon ce tableau, si l’on souhaite ajouter du padding à un texte, il n’est pas possible de le faire au sein d’un bloc div ou d’un paragraphe p, mais cela est par contre possible au sein d’une cellule de tableau td.

<div style="padding:5px;">Ce padding ne fonctionnera pas</div>
<table><tr><td style="padding:5px;">Ce padding fonctionnera correctement</td></tr></table>

Dans la même idée, là où on aurait pu ajouter une couleur (color) ou une police (font) à un paragraphe p, il faut plutôt passer par la balise span pour cela.

<p style="color: red;">Ceci ne sera pas en couleur.</p>
<p><span style="color: red;">Ceci sera en couleur.</span></p>

Bien sûr, il faut éviter les situations extrêmes comme créer un tableau à chaque fois que l’on souhaite faire un bloc avec un padding, il y a probablement d’autres solutions. Cela amène à repenser sa façon d’architecturer son e-mail, et donc aussi à réfléchir à des designs plus simples (sauf si vous participez à un concours de création d’e-mails originaux !).

Si vous souhaitez avoir davantage de connaissances sur les bonnes pratiques des e-mails, voici deux sites compétents sur le sujet :

Un regard extérieur

Maintenant que vos e-mails respectent ces règles particulières, et que le logiciel de Microsoft n’a plus de secret pour vous, … et bien il reste toutefois à s’assurer que ce travail a bien porté ses fruits, et que le design a bien été corrigé sur Outlook, sans avoir été perturbé sur les autres clients mail.

Puisqu’il est rare d’avoir à la fois Outlook 2007, 2010 et 2013, et qu’il est assez compliqué de tester en parallèle Gmail, Thunderbird ou encore les clients mail Apple, plusieurs applications web proposent un service de “client mail à la demande”.

Chez elCurator, nous avons utilisé Email on acid, permettant de comparer ces différents clients mail sur une seule page (Litmus, dont on a cité des articles précédemment, fait aussi cela). Le principe est simple : le service génère une adresse e-mail temporaire sur laquelle vous pouvez envoyer les e-mails dont vous souhaitez mettre le design à l’épreuve. Il réalise ensuite des copies d’écran de chaque client mail et les assemble afin de vous donner une vue d’ensemble, comme celle-ci :

Grâce à EmailonAcid, on a pu se rendre compte que les e-mails étaient bien moches auparavant

Vous remarquerez sur cette image l’étendue des dégâts et la grosse disparité dans l’affichage sur tous ces clients… Nous avions bien besoin de comparer ces designs !

Heureusement, après avoir appliqué les règles évoquées précédemment, nous sommes arrivés à rendre notre design homogène sur l’ensemble des clients mail : mission réussie !

Liked it ? Share it

4a5f562af35ae06dc6634d6d00edc988
About the author

Arnaud Doucerain is web developer at elCurator.