Quelles directives pouvez-vous donner pour un formatage HTML riche dans les e-mails tout en maintenant une bonne stabilité visuelle sur de nombreux clients et interfaces de messagerie Web?
Une réponse sans rapport à une question sur Stack Overflow a suggéré:
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html
Qui contient les directives suivantes:
- Placer la feuille de style à la
<body>place de<head>
Certains clients de messagerie suppriment le CSS de la tête, mais le laissent si le bloc de style est (incorrectement) dans le corps. - Utilisez les styles en ligne lorsque cela est possible
Gmail supprimera toutes les feuilles de style, que ce soit dans le<head>ou dans le<body>, mais respectera les styles en ligne attribués à l'aide de l'style=""attribut - Retour aux tableaux Les
normes de messagerie ont en fait fait un pas de géant en arrière ces dernières années grâce à Outlook 2007 utilisant le moteur de rendu Microsoft Word. Découvrez la plupart de ce que vous avez appris sur le positionnement sans feuilles de style. - Ne vous fiez pas aux images
La plupart des clients et la plupart des clients de messagerie basés sur le Web n'afficheront pas les images à moins que l'utilisateur ne les demande spécifiquement.
J'ai aussi quelques vérités «non confirmées» dont je ne me souviens pas où je les ai lues.
- N'utilisez pas plus de deux niveaux d'imbrication dans les tables.
Est-ce vrai? Que se passera-t-il si je le fais? Y a-t-il des clients particuliers qui s'étouffent avec cela? - Attention à ne pas imbriquer les images d'arrière-plan dans les cellules / tableaux.
Comme je le comprends, vous pouvez rencontrer des situations où l'image d'arrière-plan est appliquée à nouveau complètement dans le tableau / cellule descendant, et pas seulement «brille». Encore une fois, vrai ou pas? Quels clients?
Je voudrais étoffer cette liste avec plus de directives et d'expériences des tranchées.
Pouvez-vous offrir d'autres suggestions?
Mise à jour: Je demande spécifiquement des directives pour la partie conception en HTML et la cohérence de celle-ci. Des questions sur les consignes générales pour éviter les filtres anti-spam et la courtoisie commune sont déjà sur SO.
Réponses:
Il est en fait très difficile de créer un e-mail HTML décent, si vous l'abordez d'un point de vue «HTML et CSS modernes».
Pour de meilleurs résultats, imaginez que nous sommes en 1999.
styleattribut si vous devez utiliser CSS.float<a href="http://domain.tld">www.someotherdomain.tld</a>c'est mauvais )Bonne chance ;)
Mettre à jour pour répondre à d'autres questions:
Je pense que c'est une directive plus ancienne concernant Lotus Notes. Les tableaux imbriqués devraient convenir, mais en réalité, si vous avez une mise en page suffisamment compliquée pour en avoir besoin, vous allez probablement avoir des problèmes de toute façon. Gardez votre mise en page simple .
Cela peut être lié à ce qui précède, et il en va de même, si vous devenez si compliqué, vous aurez des problèmes. Les versions récentes d'Outlook ne prennent pas du tout en charge les images d'arrière-plan, il est donc préférable de les oublier complètement.
la source
Utilisez toujours le mime en plusieurs parties et fournissez une alternative en texte brut.
la source
Les gens derrière Campaign Monitor ont également lancé un site Web de projet de normes de messagerie avec beaucoup de bonnes informations.
la source
Jetez un œil à ce passe-partout, c'est comme html5boilerplate, mais pour les emails: http://htmlemailboilerplate.com/
la source
Je pense que c'est un niveau inférieur à la question que vous posez, mais si vous voulez vraiment qu'un e-mail html soit correctement vu par autant de clients que possible, assurez-vous qu'il utilise un MIME valide. En particulier, pour qu'un e-mail soit considéré comme MIME valide, les en-têtes DOIVENT (au sens RFC du mot) contenir ces deux en-têtes:
Les clients très stricts afficheront votre HTML sous forme de texte brut si l'un ou l'autre de ces éléments est manquant. Vous seriez surpris de voir combien de grands fournisseurs en ligne qui devraient savoir mieux ont gâché cela (notamment, j'ai reçu des e-mails HTML avec la version MIME manquante: en-têtes d'Amazon et de l'ACM dans le passé)
la source
la source
Trois conseils: test, test, test.
Consultez le service de test de messagerie de LitmusApp.com. Vous leur envoyez un message et ils le rendent dans un groupe de clients et vous montrent des captures d'écran des résultats. Ce n'est pas parfait, mais c'est plutôt bien.
(Au fait, Lotus Notes avant la version 8.0 pue vraiment, vraiment pour le courrier HTML)
De plus, au-delà des styles CSS en ligne, je recommande de passer aux balises dans la mesure du possible.
la source
Incorporez vos images, ne créez pas de lien vers elles.
C'est mauvais :
C'est bon :
Oui, cela a l'air bizarre, mais consultez ce guide concernant l'incorporation d'images dans les e-mails .
la source
Si vous incluez un bloc de style, ne commencez aucune nouvelle ligne par ".classname" ou "." n'importe quoi. Mettez une attelle ou quelque chose avant les règles. Si vous ne le faites pas, certains systèmes de messagerie Web n'afficheront pas correctement vos feuilles de style.
Beaucoup de gens ont supposé à tort qu'ils ne pouvaient pas utiliser les blocs CSS dans les e-mails à cause de ce comportement ... IIRC "." est le délimiteur de corps pour SMTP. Les systèmes auront tendance à s'échapper dans leurs magasins de messagerie pour éviter que le contenu d'un message ne soit mal reconnu comme un nouveau message. La façon dont cela est géré a tendance à casser n'importe quel style à partir d'une nouvelle ligne avec un point.
la source