On va pas se mentir, coder une newsletter responsive qui marche correctement sur un maximum de clients mail n'est pas chose évidente. Voici un petit retour d'expérience sur le sujet.
Quel que soit le contenu de notre newsletter, ce que l'on souhaite c'est que celle-ci soit accessible de la meilleure manière possible à tous nos destinataires. Si vous êtes développeur web, vous connaissez sans doute les joies du développement d'application cross-browser. Un email html est confronté aux mêmes problématiques et se comporte différemment suivant les clients de messagerie de nos destinataires.
Bien souvent, une newsletter comporte un header avec logo et slogan (identification et présentation), le contenu du mail avec des images et liens, ainsi qu'un footer avec les informations de contact, des liens vers les réseaux sociaux…
{<1>}
Dans le cadre d'une communication régulière sur un produit avec une identité, le format HTML possède des avantages sur le format texte. En effet, en HTML il est possible de réaliser une mise en page particulière (logo, image principale, textes appuyés et illustrés, boutons, liens originaux…). Cette forme d'email offre donc une plus large force de frappe pour une entreprise souhaitant trouver de nouveaux clients par exemple. Cependant, contrairement au format texte, certains logiciels clients ne supportent pas certaines techniques d'intégration notamment au niveau des feuilles de styles. Sur certains clients mail notre newsletter se retrouve donc totalement cassée. Le problème ne s'est pas amélioré avec la démocratisation des appareils mobiles connectés. Notre newsletter doit maintenant pouvoir supporter les différents clients desktops, mobiles, mais aussi les différentes résolutions d'écrans.
{<2>}
Ce qu'il faut savoir, c'est que de nombreux clients mail sont en retard sur les standards du web. Oui oui vraiment en retard puisque… la mise en page en tableau est reine ! Hé oui les bonnes vieilles balises <table> utilisées pour mettre en page les sites web il y a… tellement longtemps que je n'ai jamais eu à m'en servir avant :D
Avant de se jeter corps et âme dans l'intégration, un bon réflexe est d'aller jeter un oeil aux services spécialisés dans les campagnes d'emailing, ils donnent de précieuses informations sur le support des différents clients de messagerie. Campaign Monitor et Mailchimp nous proposent une revue du support des propriétés css suivant les clients, ainsi que de bons tuyaux :
- https://www.campaignmonitor.com/css/
- http://templates.mailchimp.com/development/css/client-specific-styles/
Sachez que les clients mail incontournables sont les versions desktop et mobile de Gmail, Outlook et mail d'Apple.
Maintenant que l'on connait un peu mieux en théorie nos clients mail, il faut tester pour se rendre compte ! Un conseil, ne développez pas un template de newsletter de zéro. Beaucoup de services vous proposent des bases de templates de newsletters qui sont un très bon point de départ (ré-inventer la roue n'a jamais mené quelqu'un bien loin). Pour ceci mon conseil irait vers le framework dédié aux newsletters Ink by Zurb les créateurs du célèbre framework front Foundation (http://zurb.com/ink/).
{<3>}
Vous y trouverez tout un processus d'aide à la création d'une newsletter responsive qui fonctionne sur la majorité des clients mail. Vous pouvez y télécharger des templates de bases ainsi que des exemples, tester leurs supports directement sur le site pour vous rendre compte de leurs comportements selon les clients de messagerie. La documentation vous aidera à créer des templates personnalisés et réussir vos campagnes d'emailing.
Vous allez vite vous rendre compte, en ouvrant ces templates dans votre éditeur de texte préféré, du style d'intégration à adopter. Oubliez toutes les bonnes pratiques de ces dernières années car ici on code avec des tableaux dans des tableaux pour le HTML, et des styles dans le <head> ou en inline directement dans notre markup HTML. Non pas que l'on y mette de la mauvaise volonté, mais sinon vous risquez d'être surpris du résultat de certains rendus (notamment avec Outlook ou même Gmail).
Rappelons-nous de nos objectifs, on veut un template pouvant être lu sur les différents clients mail sur desktops et mobiles. Vous vous dites alors que c'est facile et qu'il suffit d'utiliser les medias queries et hop le tour est joué ! Ce serait trop beau, rappelez-vous, les clients mail sont en retard… Outlook et Gmail ne les supportent pas par exemple. Un conseil, restez simple dans vos mises en page. En utilisant une seule colonne, vous êtes sûr de cibler bon nombres de clients mail et ainsi assurer la transmission de votre message à un maximum de personnes. On ne le répètera jamais assez, la simplicité triomphe toujours ! Cela n'empêche pas d'ajouter des medias queries pour les appareils qui les supportent histoire que sur mobile on ait une largeur de 100% sur notre colonne. Les clients mail d'Apple (iphone et ipad) ainsi que celui d'Androïd les supportent, cependant beaucoup d'utilisateurs d'Androïd n'utilisent pas ce dernier et préfèrent l'application Gmail, qui elle ne les supporte pas. Nous rendrons au moins heureux les utilisateurs de clients récents. Pour les autres, l'important est que le message ne soit pas cassé et s'affiche correctement, pour cela le mieux est donc d'oublier les mises en pages à plusieurs colonnes qui se retrouveront les unes sur les autres en résolutions réduites, ou tellement étroites que cela devient illisible.
Je vous préconise la lecture de cet article d'Alsacréation qui évoque toutes les bonnes pratiques pour réaliser une email HTML responsive notamment sur la manipulation des styles CSS :
En effet certains clients supportent la balise <style> dans le <head> de votre template alors que pour d'autres ces styles doivent être disposés en inline dans vos balises HTML.
Retrouvez sur mon github mon template de newsletter sur ce retour d'expérience :
Je suis parti comme mentionné plus haut d'un template du framework Ink. Quelques éléments importants :
Tout d'abord une chose à savoir est l'utilisation d'un doctype de type XHTML strict (cf article alsacreations):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
L'utilisation du doctype XHTML transitional est aussi possible comme mentionné dans cet article de Campaign Monitor :
Afin que le template soit responsive, il ne faut pas oublier de mettre la balise <meta> mentionnant que la largeur du contenu correspond à la largeur du device :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Les styles sont inclus dans la balise <style> dans le <head>, cependant certains styles sont à ajouter en inline sur les balises HTML car certains clients ne prennent pas en compte la balise <style> :
<style>
body,
#bodyTable,
#bodyCell {
height:100% !important;
margin:0;
padding:0;
width:100% !important;
font-family:Helvetica, Arial, "Lucida Grande", sans-serif;
}
…
</style>
Des outils existent pour vous aider à automatiser la mise en place de vos styles en inline dans votre markup HTML. Notamment Campagn Monitor avec CSS inliner :
Vous allez aussi devoir utiliser des attributs que nous n'avons pas l'habitude de voir dans nos templates de site web, à l'image de bgcolor pour préciser la couleur de fond ou align afin d'aligner le texte :
<body bgcolor="#E1E1E1" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" offset="0">
<center bgcolor="E1E1E1" align="left">
…
</center>
</body>
Vous remarquez la présence d'une balise <center> afin de centrer le contenu sur la page.
La mise en page en tableau peut déstabiliser au début, mais ne prenez pas peur :
<table>
<tr>
<td style="padding:15px!important;">
<p style="font-size:20px;">See you soon,</p>
<h6 style="font-size:23px;">Signature.</h6>
</td>
</tr>
</table>
Je vous laisse découvrir l'intégralité du code, n'hésitez pas à expérimenter et utiliser ce template :)
En suivant tous ces conseils et ressources, vous mettez toutes les chances de votre côté pour que votre newsletter s'affiche correctement sur un maximum de clients de messagerie, et ainsi garantir la transmission de votre message (ce qui est quand même le but de votre email avant d'être beau et original).
N'hésitez pas à nous faire des retours de vos expériences :)
Quelques ressources supplémentaires :