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

publié le 03/04/2015,

mis à jour le 18/08/2022

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é:

Besoin d’aide ?

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

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

Soutenez l’initiative “Email Expiration Date”

Brevo et Cofidis soutiennent financièrement le projet. Rejoignez le mouvement et ensemble, responsabilisons l’industrie de l’email face à l’urgence climatique.

Je me renseigne

L’auteur/autrice

Grégory Van Gilsen

Ayant suivi des études de graphisme, Grégory a ensuite développé l’ensemble de sa carrière dans le domaine de l’email marketing et de l’eCRM. Après avoir été Digital Campaign Architect dans diverses agences, il rejoint Badsender en janvier 2015 pour y remplir le rôle de responsable des opérations.

Toutes les publications