Gmail Android « munge » vos emails… parfois.

Restez informé.e via les newsletters de Badsender

Chaque mois, nous publions une newsletter sur l’email marketing et une infolettre sur la sobriété et le marketing. Pour avoir plus de détails sur le contenu et le rythme de nos communications, rendez-vous ici.

Votre adresse email servira uniquement à vous envoyer nos newsletters et nos invitations. JAMAIS ô grand jamais, nous ne la communiquerons à un tiers. Vous pourrez vous désabonner à tout moment en un seul clic.

S’il y a parmi vous des fan de RNG (= facteur aléatoire pour les néophytes), vous n’allez pas être déçu. Vous aimez voir votre code se comporter différemment en fonction du contenu et non du code HTML lui-même ? Alors cet article est pour vous (et si vous aimez vraiment ça, je vous conseille de consulter…) !

Il était une fois…

Récemment, j’ai intégré un email avec ce type de bloc:

J’ai du par la suite décliner différentes versions de cet email avec du contenu légèrement différent. Mais ni le contenu, ni le code du bloc en question, n’ont bougé entre les différentes versions.
Du coup, quelle ne fût pas ma surprise en lançant les tests de trouver, pour certaines déclinaisons un rendu identique et pour d’autres le rendu suivant pour Gmail sur Android :

WTF ?!

Ma première réaction fût de tenter de débugguer le schmilblick en supprimant des bouts de code en pensant qu’il devait y avoir une balise mal fermée ou un guillemet qui traine et qui provoquerait des problèmes.
Heureusement, je n’ai plus de cheveux à arracher, car il s’agit en fait d’un problème qui apparaît « aléatoirement ». Ou en tout cas, selon le bon vouloir d’un script de chez Google, ce qui revient, en l’état de nos connaissances, au même.

Heureusement pour moi, d’autres intégrateurs ont déjà été confronté à ce script démoniaque (je suis certain qu’il a été créé par un esprit pervers dans le but unique de rendre fous les intégrateurs) comme Stefano Bagnara qui détaille tout ça dans un article (en anglais)

Besoin d'aide ?

Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.


Et donc, il se passe quoi ma bonne dame ?

En résumé, le script va appliquer le code CSS suivant :

table.munged {
width: auto !important;
table-layout: auto !important;
}
td.munged {
width: auto !important;
white-space: normal !important;
}

Et va « scanner » le rendu de l’email ; je mets des guillemets car l’opération exacte reste un peu obscure. Après ce « scan« , le script va décider si oui ou non le rendu lui convient. Si oui, votre email sera pollué, si non, votre email sera (plus ou moins) intact.

Que faire si cela vous arrive me direz-vous ?
N’ayez craintes bonnes gens. Une solution existe: il s’agit d’ajouter à votre table une propriété CSS min-width.
Par exemple, votre table aura alors cette tronche là:

<table style="width:100%; min-width: 100%;" cellpadding="0" cellspacing="0" border="0">

Et dans mon cas, Ô magie :

Apparemment, ce script ne tourne que sur Android laissant les appareils Apple tranquilles (pour le moment…).
Comme le suggère Mark Robbins, l’idée de Google est probablement de fluidifier un maximum l’email pour le rendre plus facile à lire sur mobile.
Si en théorie c’est une bonne idée, en pratique on est loin du résultat espéré.

Partagez
L’auteur

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *