E-mail HTML dans Gmail - attribut de style CSS supprimé
Je travaille sur un e-mail HTML et j'utilise les modèles d'e-mails réactifs de MailChimp en combinaison avec leur outil d'incrustation CSS . Pour la plupart, l'e-mail a fière allure dans la myriade de clients de messagerie, mais dans Gmail, les choses sont horriblement déformées.
Si j'utilise l'option "Afficher l'original" de Gmail dans le menu déroulant à côté de la flèche de réponse, le code HTML d'origine est différent de ce qui est réellement affiché dans le client de messagerie. Je peux le confirmer en inspectant l'élément avec les outils de développement. Cela se produit sur ordinateur et mobile; le client de messagerie supprime les attributs de style en ligne des éléments.
Il semble que l'un des critères de suppression de l'attribut style soit si l'élément contient également une classe. Quelqu'un peut-il confirmer cela? En outre, il semble supprimer tous les attributs de style d'une balise de table. Quelqu'un peut-il le confirmer également?
Quelles sont les solutions pour cela?
Captures d'écran des e-mails avec source dans Gmail et Yahoo inclus ci-dessous.
Capture d'écran des e-mails dans Gmail avec la source affichée via Chrome outils de développement
Capture d'écran du courrier électronique dans Yahoo avec la source affichée via Chrome outils de développement
En tant que personne qui code régulièrement des e-mails pour des campagnes de marketing à mon travail, je ressens votre douleur. Gmail, ainsi que de nombreux autres clients de messagerie, peut être un peu génial à coder. D'une part, il supprime tout CSS en dehors du corps. Donc, mettre des choses comme les requêtes multimédias et les styles au niveau du document ne fonctionne pas. Le meilleur conseil que je puisse vous donner est de coder à la main votre CSS en ligne et d'éviter toute fantaisie. En fait, si vous pouvez utiliser un attribut HTML pour faire votre style, utilisez-le à la place de n'importe quel CSS. Un exemple serait bgcolor au lieu de background-color.
Voici un article lié à votre problème spécifique que j'ai trouvé. Bonne chance.
Je viens de vérifier maintenant: Gmail supprime votre attribut de style en ligne si vous ne mettez pas d'espaces entre ;, , Et : Caractères
cela fonctionne bien:
<span style="color: #8d8c87; display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 120%; text-align:center;">text</span>
mais la même règle sera supprimée si vous n'utilisez pas d'espaces; si vous écrivez ceci:
<span class="small-text" style="color:#8d8c87;display:block;font-family:'Titillium Web',Arial,sans-serif;font-size:12px;line-height:120%;text-align:center">text</span>
vous obtiendrez cette sortie sur le client Gmail:
<span>text</span>
MODIFIER :
En plus de ce comportement, j'ai remarqué que Gmail a tendance à supprimer le style en ligne si vous déclarez un font-family Dans un <table> Ou un <td> Imbriqué, je ne suis toujours pas sûr de quelle est la règle générale de son préprocesseur, j'ai vérifié sur Google mais je ne trouve aucune documentation officielle sur la composition du courrier html pour Gmail.
Il existe plusieurs solutions pour gmail. Gmail est tout à fait un farceur quand il s'agit de votre style, car il supprimera complètement ce qu'il n'aime pas de votre e-mail.
Voici quelques petits conseils:
Gmail ajoute un espace blanc entre les images ou étend la taille de son conteneur td: vous pouvez corriger cela en spécifiant style = "display: block" sur vos images (assurez-vous que votre TD a la même largeur) et/ou la hauteur comme image).
Gmail rend les liens noirs comme des liens bleus: oui, c'est moche. Utilisez # 000001 au lieu de # 000000.
Gmail rend les numéros de téléphone cliquables: cela peut être une bonne chose ou non, selon votre client, mais une façon de contourner ce problème consiste à inclure une balise d'ancrage vide avec des styles autour du numéro de téléphone.
Ex: <a style="color:#000001; text-decoration:none;>555 555-5555</a>. Cela vous fera honte de votre code, mais c'est un petit hack efficace.
Je pensais juste ajouter ça au mix. J'ai également rencontré ce problème et en regardant la source brute, j'ai réalisé que l'encodage 8 bits divisait les lignes aux endroits étranges en raison de la limite de 1000 caractères, donc je me retrouvais avec un contenu comme celui-ci:
<td style="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">734 340 9795</td></tr><tr> <td sty
le="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">
La solution consiste à coder en base64 le contenu et à utiliser le fractionnement de morceaux ou tout autre outil dont vous disposez pour accomplir la même chose.
En php, j'ai fait $html = chunk_split(base64_encode($html)) puis mis Content-Transfer-Encoding: base64. Maintenant, Gmail m'aime.
L'utilisation de sélecteurs CSS est une autre solution de contournement que j'ai pu utiliser. Dans mon exemple, j'essaie de formater un tableau HTML. J'ai trouvé que gmail supprimait tous les attributs ID et CLASS rendant mon CSS inutile.
Après une enquête, j'ai remarqué que gmail n'avait pas supprimé mon attribut title. J'ai donc créé une règle CSS à l'aide d'un sélecteur de titre. Cela semble fonctionner correctement:
[title~=myTitle] {background: black; color: white;}
Je ne pense pas que ce soit la meilleure pratique, mais j'ai pensé que je le mentionnerais.