Des problèmes d’affichages sous GMX et Web.de ? Nous en avons eu également

Vous faites de l’email marketing? Vos emails sont responsives? Parfait!
Vous avez des clients allemands et il important d’avoir un rendu impeccable dans des clients emails comme GMX ou Web.de et vous vous apercevez que votre design ressemble à un hybride de rendu mobile et de rendu desktop? Et bien nous avons eu le même problème…

Votre code est ré-interprété par les clients emails

Si vous faites de l’emailing, être compatible pour les terminaux mobile n’est plus quelque chose d’accessoire mais devient bien une condition nécessaire. Hors certains client email ont une couche de protection qui, avant de délivrer un email à leurs utilisateurs, va checker le code de l’email et, dans certains cas, le réinterpréter.

C’est ce qui explique entre autre que si vous regardez un email sur un terminal mobile dans l’app Gmail, vous aurez probablement* un rendu desktop. L’app Gmail prends le code de l’email, supprime les balises styles qui ne sont pas inline, et envoie le code modifié aux utilisateurs (en très gros).

L’importance de la nomenclature

Dans le cas de GMX et Web.de, ils scannent également le code. Un programme  parcourt probablement les lignes de code de l’email et le passe aux utilisateurs après l’avoir ré-interprété.

Hors il se trouve que pour GMX et Web.de, si vous écrivez dans vos media queries quelque chose comme:

height: 100%; !important

Et bien votre email va avoir un sérieux problème de rendu dû à la ré-interprétation du code. Le lecteur attentif aura remarqué que la nomenclature correcte aurait-été:

height: 100% !important;

où le point-virgule est bien derrière le important.

Ce qui signifie qu’une erreur d’écriture qui n’a aucun impact sur les autres clients emails a ici provoqué un comportement bizarre du programme qui surveille le code, et lorsque ce programme réécrit le code, il s’emmêle les pinceaux ; vous obtenez alors un rendu qui, du coup, est un hybride entre un rendu desktop et un rendu mobile.

Voici un aperçu de rendu avec l’erreur de nomenclature via emailOnAcid

Et ici un aperçu sans erreur, toujours via emailOnAcid

Moralité, le point-virgule a encore de beaux-jours devant lui 😉

* Probablement car si votre email est codé (correctement) avec des largeurs en %, il s’adaptera