Ouuuhhh je sens que j’ai piqué ta curiosité avec ce titre mein Freund… Et je dois avouer qu’il est capilotracté. “Quel rapport entre le sketch de Chevallier/Laspalès et l’emailing?” Honnêtement, aucun, mais je trouve que ça collait bien! Ou plutôt (l’ami de Mickey) SI! Il y a tout de même un rapport, bien que léger, et il réside dans les termes “direction” et “Allemagne” (le premier ne faisant d’ailleurs pas parti du gag initial, mais je réécris l’histoire à ma manière).
Avez-vous déjà codé des emails en responsive?
Question rhétorique, si vous lisez cet article, cela va sans dire. Je développe des emails quotidiennement (ou presque), et chaque jour apporte son lot de surprises (C’est comme une boîte de chocolats, on ne sait jamais sur quoi on va tomber). J’en synthétise certaines (des surprises) dans des articles sur le blog de Badsender, dont un des derniers en date s’attelait à La Poste et son client mail, et aux multiples interprétations et ajouts étranges au code HTML et CSS qu’il pouvait faire (attribution de couleurs de fond sur des <th> par exemple, ou, découvert plus récemment, le passage automatique des balises <span> en display:none, rien que ça…)
Mais je dois vous dire un secret : je vois des gens qui sont morts je teste mes intégrations HTML d’email sur EmailOnAcid, mais je ne prends pas le temps de m’assurer que tout est ok sur la TOTALITÉ des clients mail.
Je m’explique : lorsque vous intégrez des emails, vous allez sans doute concentrer votre attention sur le rendu parfait sur les clients mails et logiciels de messagerie les plus usités dans le/les pays de vos destinataires. Si je code un email pour le service des impôts français, que j’aime tant, il est fort probable que la majorité des ouvertures ait lieu sur des clients mails français (encore que…)
Mais prenez garde, pauvres fous ! Ne négligez pas pour autant les autres clients mail, car votre façon de coder n’apportera peut-être pas forcément le même rendu sur ces derniers. C’est flou ce que je viens de dire? Je développe.
Attribut dir
Considérons une partie d’une maquette d’un email.
Dans le module ci-dessus, il y a du texte à gauche, et une image à droite. La logique de l’intégration HTML pour emailing voudrait que nous concevions donc un tableau, constitué d’une ligne, comprenant deux colonnes (une pour le texte, une pour l’image).
Que va-t-il se passer sur mobile? Hm? Je vous pose la question. Il y a fort à parier que vous allez passer les deux cellules en display:block pour qu’elles viennent s’empiler. Nous allons donc avoir tout d’abord le texte puis, en-dessous, l’image.
Mais est-ce pour autant ce que j’attends? Non. Personnellement, j’aimerai avoir mon image en premier, et en-dessous, mon texte. Comme ceci :
Mais si l’on peut réorganiser l’affichage, on ne peut réorganiser le DOM (pour Document Object Model). Comprenez : je peux décider de faire apparaître la cellule de droite avant la cellule de gauche en responsive, mais je ne peux pas “couper” la cellule de droite et la mettre “avant” celle de gauche et modifier ainsi le code HTML.
Pour ce faire donc, j’avais (j’utilise l’imparfait, car ma méthode va justement changer) l’habitude d’ajouter un attribut dir="rtl" au <table> comprenant ce contenu, indiquant alors qu’il fallait changer la “direction” du contenu de tableau, et ne plus aller de gauche à droite (ltr, pour left to right), mais bien de droite à gauche (rtl, pour right to left). Puis, je changeais l’ordre de mes deux cellules, et enfin j’appliquais un dir="ltr" à chaque cellule pour que le texte soit correctement ferré à gauche.
Ca, c’est sans se poser de question. Maintenant, posons-nous des questions. Was passiert mit T.Online.de, Web.de, Freenet.de oder GMX ?
L’Allemagne
Car c’est un fait : quelques-uns de ces clients mail n’interprètent pas DU TOUT l’attribut dir de la même façon. En l’occurrence, Web.de et GMX (je ne m’attarderai pas sur le rendu sur Terra, cela nécessiterait un autre article) : l’attribut dir n’y est pas du tout pris en compte. De ce fait, j’obtiens le résultat suivant : mon image est à gauche et mon texte à droite sur Desktop sur ces deux clients mail. Peut-on ne pas s’en soucier?
Je crois que ce graphique parle tout seul… GMX et Web.de représentent, à eux seuls, plus de 49% de parts de marché sur les clients mail allemands. Je ne peux donc décemment continuer à utiliser cette méthode de codage.
J’en ai profité pour poser la question sur le slack des #emailgeeks. Sans surprise, j’ai eu des réponses de Mark Robbins et de Wilbert Heinen, deux intégrateurs emailing de génie. Deux solutions s’en dégagent.
- La première, évoquée par Mark Robbins, consiste tout d’abord à implémenter l’ordre correct en desktop (soit texte à gauche, et image à droite) puis à jouer avec les propriétés
display:table-header-groupetdisplay:table-footer-group(que je ne connaissais pas) depuis les media queries. Ainsi, l’image à droite pourra se comporter comme un “header” de<table>, quand le texte pourra se comporter comme un “footer” de<table>. La technique est bien supportée, et terriblement intéressante, puisqu’elle permettrait d’aller encore plus loin dans la disposition des colonnes en responsive. Je vous invite grandement à consulter le bien nommé site goodemailcode pour en découvrir davantage sur cette méthode, et j’en profite pour remercier très très chaleureusement Mark pour son conseil et ses partages réguliers de morceaux de code parfaits !
- La seconde, détaillée par Wilbert Heinen donc, consiste juste à ne pas utiliser l’attribut
dir, mais plutôt… La propriété CSSdirection. ???? Ce qui est fou, c’est que lors de mes formations HTML pour l’emailing, je conseille justement aux participants d’utiliser des propriétés CSS plutôt que des attributs pour pouvoir travailler plus facilement dessus en responsive (cf plus haut : on ne peut changer le DOM). Ce sont souvent les cordonniers les plus mal chaussés non? Du fait, le code suivant affichera lui-aussi un résultat probant.
C’est dingue non? Son frère? (cf les Visiteurs et Isabelle Nanty). Peut-on en rester là? Je réponds oui! Mais j’ajouterai une autre petite curiosité à T.Online.de : Mark Robbins précisait que le webmail affichait le contenu compris dans un commentaire conditionnel Outlook. Vous le saviez ? On en apprend tous les jours vous dis-je… Et j’aime ça.