Photo de Matthew M sur Unsplash.com.
À chaque article que je lis sur l’intégration d’e-mails, ça ne rate pas. Il y a forcément quelqu’un qui commente un truc du genre : « Ah ah les e-mails sont encore coincés en 1990. » Et il n’y a rien qui m’agace plus. Parce que c’est complètement faux.
Quand j’intègre un e-mail, j’utilise des styles modernes : des media queries, des dégradés et des fonds en CSS, des mises en page en flexbox, voire même CSS Grid. J’utilise aussi des balises HTML sémantiques : des niveaux de titres (<h1>
, <h2>
, …), des paragraphes (<p>
), des listes (<ul>
, <li>
).
Mais j’utilise aussi des tableaux. Parce que, oui, d’accord, ok, en 2019, il est encore largement recommandé d’utiliser des tableaux pour intégrer ses e-mails. Mais la seule et unique raison à ça tient en un mot : Outlook. Ou plutôt en trois mots : Outlook sur Windows. En 2007, Microsoft a eu la riche idée de passer le moteur de rendu HTML de son application mail de Internet Explorer à… Word. Et Word n’est pas vraiment très bon dès qu’il s’agit d’afficher du HTML et du CSS. Du coup, le moyen le plus sûr pour dompter Word est de passer par des tableaux.
Mais on n’est pas obligé d’infliger des tableaux à tout le monde ni à tous les clients mails. En 2015, Nicole Merlin expliquait dans un article fondateur comment créer des e-mails responsive sans media queries. Et surtout, elle montrait comment utiliser des commentaires conditionnels pour créer des tableaux uniquement sur Outlook et gérer la mise en page en <div>
partout ailleurs.
<!--[if mso]>
<table width="100%">
<tr>
<td width="200" valign="top">
<![endif]-->
<div class="column">
[column to go here]
</div>
<!--[if mso]>
</td><td width="200" valign="top">
<![endif]-->
<div class="column">
[column to go here]
</div>
<!--[if mso]>
</td><td width="200" valign="top">
<![endif]-->
<div class="column">
[column to go here]
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
Ça, c’était en 2015. Il y a déjà presque cinq ans. Depuis, le monde des clients mails n’a cessé de bouger. En 2015, Yahoo a corrigé un bug permettant enfin d’utiliser des media queries. En 2016, Gmail a suivi le pas en supportant officiellement les media queries dans la plupart de ses versions. Outlook.com a été refait. Deux fois. (En 2015 puis à nouveau en 2018.) Apple Mail n’a cessé d’enrichir son moteur de rendu de trucs qu’on n’utilise à peine dans le web, de backdrop-filter()
aux CSS Scroll Snap.
En 2018, JavaScript fait partiellement son entrée dans les e-mails via le support de bibliothèques maison. (Adaptive Cards pour Microsoft, amp4email pour Google.) Et puis en 2019, le côté obscur a fait son apparition dans Apple Mail, Outlook et Gmail avec l’arrivée du « dark mode » (mode sombre) et le support partiel des requêtes de préférences utilisateurs @media
(prefers-dark-mode
).
Même les outils propres au développement d’e-mails se sont multipliés au cours de cette décennie. Il y a bien sûr les incontournables Litmus et Email on Acid, pour tester le rendu visuel de ces e-mails sur moult clients.
Mais on a aussi des développeurs prolifiques, comme Roy Revelt qui a lancé Email Comb (pour supprimer les styles inutiles d’un e-mail), HTML Crush (pour minifier son code HTML) ou Detergent (pour nettoyer ses textes des impuretés laissées par d’autres logiciels).
Il y a aussi Cosmin Popovici qui gère SendTest.email (pour rapidement s’envoyer un e-mail de test), Alter.email (pour appliquer tout un tas de transformation au code de son e-mail) et qui a lancé Maizzle, un cadre de travail pour le développement d’e-mails.
Et puis j’aime bien aussi Dylan Smith, co-administrateur du Slack #emailgeeks, qui a lancé How to Target Email Clients (pour cibler un client mail bien particulier dans son code dans les cas les plus extrêmes), What Does It Paste? (pour copier/coller un e-mail et obtenir son code HTML, hyper pratique sur mobile) ou encore EmailGeeksCommunity.com (des articles écrits par et pour la communauté des concepteurs et conceptrices d’e-mails).
J’ai pris l’habitude de dire que tout est possible dans un e-mail. On peut créer un menu interactif et un carousel défilant, comme dans cet e-mail de LEGO. On peut utiliser l’appareil photo de son téléphone pour prendre un selfie et s’afficher dans un e-mail, comme dans cet e-mail de EmailTees développé par Kevin Mandeville. On peut carrément jouer à une aventure en 8-bits, comme dans cet e-mail intitulé Super Mail Quest développé par Aaron Simmonds.
Tout est possible. Mais rien ne fonctionne partout. Les exemples ci-dessus vont très bien marcher sur Apple Mail. Mais on aura un comportement de repli sur la plupart des autres clients mail.
En fait, tous les principes de conception universelle, de design inclusif, de dégradation gracieuse et d’amélioration progressive venus du Web s’appliquent parfaitement à l’intégration d’e-mails. Mais la première étape pour y arriver, c’est d’arrêter de penser comme en 1990.
3 réponses
Énorme !! J’imagine trop un mic drop à la fin de l’article 😀 Je trouve que l’acceptation du métier d’intégrateur email est encore difficile en 2019, je pense que cela va évoluer (en tout cas j’espère) avec les innovations. Et puis il y a tellement de chose à tester… J’adore ce métier, mais je trouve que c’est encore perçu comme un sous-métier par rapport à un dév front par ex. Et je trouve ça dommage parce qu’en+, la communauté #emailgeeks rocks du poney !!! Merci pour cet article très intéressant !
Merci pour cet article très intéressant qui est également une mine d’or pour un intégrateur email grâce à tous ces petits outils que tu cite.
@Aurélie: En effet, l’acceptation du métier d’intégrateur email est encore difficile en 2019. En revanche, il y a une chose qui est inévitable, c’est l’évolution de l’email, il évolue et évoluera encore, et il y aura toujours besoin d’un intégrateur emails pour répondre à la demande.
@Derya je suis d’accord, l’email évolue, et perso je manque de temps dans mon entreprise actuelle pour essayer 1/10e de ce qu’il existe, c’est frustrant ! Par contre est-ce qu’on aura toujours besoin d’un intégrateur, je pense que oui (j’espère que oui !) mais plus le temps passe, plus j’ai des doutes. Et j’espère me tromper ! Mais le but d’une boite, ca va être de faire de l’email, de l’email, de l’email à en crever, donc ca va passer par de l’industrialisation via un email builder (qui sont de plus en plus performants). Et du coup, bah à quoi je sers ? C’est tellement simple à utiliser… Oui je peux apporter de l’innovation, oui je peux apporter du scrolling effect, du carrousel, mais c’est pas ca qui fait vendre, si ?
On pourrait faire la comparaison avec l’arrivée de WordPress, on pensait que l’intégrateur allait disparaitre, et il est toujours là. Donc à priori, mes doutes sont infondés. Mais pour l’email ? Arf, j’aimerais être aussi sûre que toi… Je voudrais emprunter la dolorean de doc et aller dans le futur, et me dire “Non de zeus Aurélie, tu avais tort !!!”