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)
Et donc, il se passe quoi ma bonne dame ?
En résumé, le script va appliquer le code CSS suivant :
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
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é.
