Meilleures pratiques pour styliser les e-mails HTML [fermé]

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

Campaign Monitor possède une excellente 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 comme Litmus pour voir comment un e-mail apparaît sur plusieurs clients et s'ils sont pris par des filtres, etc.

J'ai déjà combattu la bataille des e-mails HTML. Voici quelques-uns de mes conseils sur le style pour une compatibilité maximale entre les clients de messagerie.

• Les styles en ligne sont votre meilleur ami. Ne liez absolument pas les feuilles de style et n'utilisez pas de <style>balise (GMail, par exemple, supprime cette balise et tout son contenu).

• Contre votre meilleur jugement, utilisez et abusez des tables . <div>s ne suffit pas (en particulier dans Outlook).

• N'utilisez pas d'images d'arrière-plan , elles sont inégales et vous ennuieront.

• N'oubliez pas que certains clients de messagerie transformeront automatiquement les hyperliens tapés en liens (si vous ne les ancrez <a>pas vous-même). Cela peut parfois produire des effets négatifs (par exemple, si vous mettez un style sur chacun des hyperliens pour faire apparaître 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, puis ne le liez pas https://gmail.com/. Certains clients signalent le message comme spam ou indésirable.

• Enregistrez vos images dans le moins de couleurs possible pour économiser sur la taille.

• Si possible, intégrez vos images dans votre e-mail. L'e-mail n'aura pas besoin d'atteindre un serveur Web externe pour les télécharger et ils n'apparaîtront pas comme pièces jointes à l'e-mail.

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

Le chimpanzé du courrier a un très bon article sur ce qu'il ne faut pas faire. (Je sais que ça sonne à l'envers pour 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 Web semblent être la seule option pour les e-mails 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é que je recommanderais cela!)
• Utilisez des styles en ligne (et le CSS old school aussi, tout au plus 2.1, box-shadow ne fonctionnera pas par exemple;))

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

ÉDITER :

Le chimpanzé du courrier a fait un excellent travail en mettant cet outil à la disposition de la communauté.

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

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

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

La ressource à laquelle je reviens toujours à propos des e-mails HTML est le guide CSS de CampaignMonitor .

Comme leur entreprise est axée uniquement sur la livraison d'e-mails, ils connaissent leur métier ainsi que tout le monde va

«Fraide donc. Je créerais une page HTML avec une feuille de style, puis j'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 l'e-mail.

Je trouve que le mappage d'image fonctionne plutôt bien. Si vous avez des en-têtes ou des pieds de page qui sont des images, assurez-vous que vous appliquez un bgcolor = "remplir le blanc" car Outlook dans la plupart des cas ne chargera pas l'image et vous vous retrouverez avec un en-tête transparent. Si vous désignez au moins une couleur qui fonctionne avec la sensation globale de l'e-mail, ce sera moins un choc pour l'utilisateur. N'essayez jamais d'utiliser des feuilles de style. Ou CSS du tout! Évitez-le.

Selon que vous copiez du contenu à partir d'un mot ou d'un document Google partagé, assurez-vous de (commande + F) trouver 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 tout simplement pas bon.

ALT est votre meilleur ami. utilisez la balise ALT pour ajouter du texte à toutes vos images. Parce qu'il y a de fortes chances qu'ils ne se chargent pas correctement. Et ce texte ALT est ce qui pousse les gens à cliquer sur le bouton (voir les images). Définissez également la largeur et la hauteur de vos images et définissez le boarder à 0 afin de ne pas obtenir de lignes étranges autour de votre image.

Envisagez de modifier toutes les images dans Photoshop avec un cadre 15px de chaque côté (rendre l'arrière-plan transparent et enregistrer au format PNG 24) de l'image. Parfois, les clients de messagerie ne lisent pas les styles de remplissage que vous appliquez aux images, ce qui évite tout formatage étrange!

De plus, j'ai trouvé la ligne sous les liens particulièrement ennuyeuse, donc si vous appliquez <style = "text-decoration: none; color: #Whatever you want here!" > il supprimera la ligne et vous donnera le look souhaité.

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