Meilleures pratiques pour styliser les courriels HTML

Question

Je conçois un modèle HTML pour une lettre d'information électronique. J'ai appris que de nombreux clients de messagerie ignorent les feuilles de style liées, et que beaucoup d'autres (y compris Gmail) ignorent complètement les déclarations de blocs CSS. Les attributs de style en ligne sont-ils mon seul choix ? Quelles sont les meilleures pratiques pour styliser les courriels HTML ?

Answer 1

J'ai déjà mené la bataille de l'e-mail HTML. Voici quelques-uns de mes conseils en matière de style pour une compatibilité maximale entre les clients de messagerie.

• Styles en ligne sont vos meilleurs amis. Ne liez absolument pas les feuilles de style et n'utilisez pas d'outil d'aide à l'écriture. <style> (GMail, par exemple, supprime cette balise et tout son contenu).

• En dépit de votre bon sens, tableaux des usages et abus . <div> ne suffisent pas (surtout dans Outlook).

• Ne pas utiliser d'images d'arrière-plan Ils sont irréguliers et vous gêneront.

• N'oubliez pas que certains clients de messagerie transforment automatiquement les hyperliens tapés en liens (si vous n'ancrez pas les hyperliens dans le texte). <a> les faire soi-même). Cela peut parfois avoir des effets négatifs (par exemple, si vous appliquez un style à chacun des hyperliens pour qu'ils apparaissent dans une couleur différente).

• Attention à l'hyperlien d'un lien réel avec quelque chose de différent. Par exemple, ne tapez pas http://www.google.com puis le lier à https://gmail.com/ . Certains clients marqueront le message comme Spam ou Junk.

• Enregistrez vos images sous le moins de couleurs possible pour réduire la taille.

• Si possible, incorporez vos images dans votre courriel. Le courrier électronique n'aura pas à se connecter à un serveur web externe pour les télécharger et ils n'apparaîtront pas en tant que pièces jointes au courrier électronique.

Et enfin, test, test, test ! Chaque client de messagerie fait les choses différemment d'un navigateur.

Answer 2

Campaign Monitor dispose d'une excellente matrice de soutien détaillant ce qui est pris en charge et ce qui ne l'est pas par les différents clients de messagerie.

Vous pouvez utiliser un service comme Litmus pour voir comment un courriel apparaît sur plusieurs clients et s'il est pris en compte par les filtres, etc.

Answer 3

Mail chimp a publié un article très intéressant sur ce qu'il ne faut pas faire. (Je sais que cela semble aller à l'encontre de ce que vous voulez).

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

En général, toutes les choses que vous avez apprises et qui sont de mauvaises pratiques pour la conception d'un site web semblent être la seule option pour le courrier électronique en html.

Les principes de base sont les suivants :

• Avoir des chemins d'accès absolus pour les images (ex. https://stackoverflow.com/random-image.png )
• Utiliser des tableaux pour la mise en page (jamais pensé que je recommanderais cela).
• Utiliser les styles en ligne (et la vieille méthode css) également, au plus 2.1, box-shadow ne fonctionnera pas par exemple ;) )

Testez avec autant de clients de messagerie que possible, ou utilisez Litmus comme quelqu'un d'autre l'a suggéré plus haut ! (crédit à Jim)

EDIT :

Mail chimp a fait un excellent travail en rendant cet outil à la disposition de la communauté.

Il applique vos classes CSS à vos éléments html en ligne pour vous !

Answer 4

En plus des réponses affichées ici, n'oubliez pas de lire cet article :

http://24ways.org/2009/rock-solid-html-emails

Answer 5

La ressource à laquelle je reviens toujours à propos des courriels HTML est la suivante Guide CSS de CampaignMonitor .

Leur activité étant exclusivement axée sur l'envoi de courriers électroniques, ils connaissent leur métier comme personne ne peut le faire.