web-dev-qa-db-fra.com

Meilleures pratiques pour le style des emails HTML

Je conçois un modèle HTML pour un bulletin d'information par courrier électronique. J'ai appris que de nombreux clients de messagerie ignorent les feuilles de style liées et que beaucoup d'autres (dont Gmail) ignorent complètement les déclarations de blocage CSS. Les attributs de style en ligne sont-ils mon seul choix? Quelles sont les meilleures pratiques pour le style des emails HTML?

htmlcssemail
190
Joe Mornin

Campaign Monitor possède un excellent matrice de support détaillant ce qui est pris en charge et ce qui ne l’est pas parmi les différents clients de messagerie.

Vous pouvez utiliser un service tel que Litmus pour voir comment un courrier électronique apparaît sur plusieurs clients et s’ils sont interceptés par des filtres, etc.

125
Jim

Je me suis déjà battu dans la bataille du courrier électronique HTML. Voici quelques-uns de mes conseils sur le style pour une compatibilité maximale entre les clients de messagerie.

  • styles en ligne êtes-vous le meilleur ami. Ne liez absolument pas les feuilles de style et n'utilisez pas de balise <style> (GMail, par exemple, déshabille cette balise et tout son contenu).

  • Contre votre meilleur jugement, tables d'utilisation et d'abus. <div>s ne veut tout simplement pas le couper (surtout dans Outlook).

  • N'utilisez pas d'images d'arrière-plan, elles sont irrégulières et vous gêneront.

  • N'oubliez pas que certains clients de messagerie transforment automatiquement les liens hypertexte typés en liens (si vous ne les ancrez pas <a> par vous-même). Cela peut parfois avoir des effets négatifs (par exemple, si vous mettez un style sur chacun des liens hypertexte pour lui donner une couleur différente).

  • Soyez prudent en hyperliant un lien réel avec quelque chose de différent. Par exemple, ne tapez pas http://www.google.com et ne le liez pas à https://gmail.com/. Certains clients signalent le message comme spam ou courrier indésirable.

  • Enregistrez vos images au format peu de couleurs possibles pour économiser en taille.

  • Si possible, intégrez vos images dans votre email. L'e-mail n'aura pas besoin de se connecter à un serveur Web externe pour être téléchargé, et ils ne s'afficheront pas sous forme de pièces jointes.

Et enfin, test, test, test! Chaque client de messagerie fait les choses différemment des navigateurs.

242
Michael Irigoyen

Mail chimp ont un bon article sur ce qu'il ne faut pas faire. (Je sais que cela ne sonne pas comme 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 constituent une mauvaise pratique pour la conception Web semblent être la seule option pour le courrier électronique HTML.

Les bases sont:

  • Avoir des chemins absolus pour les images (par exemple. https://stackoverflow.com/random-image.png )
  • Utilisez des tableaux pour la mise en page (jamais pensé je le recommanderais!)
  • Utilisez des styles inline (et les vieux CSS aussi, tout au plus 2.1, box-shadow ne fonctionnera pas, par exemple;))

Testez simplement dans autant de clients de messagerie que vous le pouvez ou utilisez Litmus comme quelqu'un d'autre suggéré ci-dessus! (crédit à Jim)

MODIFIER :

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

Il applique vos classes CSS à vos éléments HTML inline pour vous!

35
SamMullins

En plus des réponses affichées ici, assurez-vous de lire cet article:

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

9
Stephan Muller

La ressource sur laquelle je finis toujours par revenir au sujet des emails HTML est guide CSS de CampaignMonitor .

Étant donné que leurs activités sont uniquement axées sur la livraison d’e-mails, ils connaissent leur travail comme tout le monde le fera.

6
Gareth

'Fraid donc. Je créerais une page HTML avec une feuille de style, puis utiliserais jQuery pour appliquer la feuille de style au style attr de chaque élément. Quelque chose comme ça:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Copiez ensuite le DOM et utilisez-le dans le courrier électronique.

5
Nathan MacInnes

Je trouve que la cartographie d'image fonctionne assez bien. Si vous avez des en-têtes ou des pieds de page qui sont des images, assurez-vous d'appliquer un bgcolor = "remplissez les blancs", car Outlook ne chargera généralement pas l'image et vous laissera un en-tête transparent. Si vous définissez au moins une couleur qui convient à l’ensemble du message, le choc sera moins grand pour l’utilisateur. N'essayez jamais d'utiliser des feuilles de style. Ou CSS du tout! Juste l'éviter.

Selon que vous copiez le contenu d'un document Word ou Google partagé, veillez à (commande + F) rechercher tous les (') et (") et les remplacer dans votre logiciel d'édition (en particulier dreemweaver), car ils apparaîtront sous forme de code. et ce n'est pas bon.

ALT est votre meilleur ami. utilisez la balise ALT pour ajouter du texte à toutes vos images. Parce que les chances sont qu'ils ne vont pas charger correctement. Et ce texte ALT est ce qui amène les gens à cliquer sur le bouton (voir les images). Définissez également vos images Width, Height et faites de la frontière 0 afin que vous n'ayez pas de lignes étranges autour de votre image.

Envisagez de modifier toutes les images dans Photoshop avec une bordure de 15 pixels de chaque côté (rendre l’arrière-plan transparent et enregistrer au format PNG 24). Parfois, les clients de messagerie ne lisent pas les styles de remplissage que vous appliquez aux images, ce qui évite toute mise en forme étrange!

De plus, j'ai trouvé la ligne sous les liens particulièrement gênante, donc si vous appliquez <style = "text-decoration: none; color: #w importe la couleur que vous voulez ici!" > cela enlèvera la ligne et vous donnera le look désiré.

Il y a beaucoup de choses qui peuvent vraiment gâcher l'apparence générale.

1
Stephen