Quelles sont les directives pour la conception d'e-mails HTML?
Quelles directives pouvez-vous donner pour un formatage HTML riche dans les e-mails tout en conservant une bonne stabilité visuelle sur de nombreux clients et interfaces de messagerie Web?
Une réponse sans rapport avec 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 dans
<body>au lieu de<head>
Certains clients de messagerie suppriment le CSS de la tête, mais le laissent si le bloc de style est (invalide) dans le corps. - Utilisez des styles en ligne dans la mesure du possible
Gmail supprimera toute feuille de style, que ce soit dans le<head>ou dans le<body>, mais respectez les styles en ligne attribués à l'aide destyle=""attribut - Retour aux tableaux
Les normes de messagerie électronique ont en fait fait un énorme pas en arrière ces dernières années grâce à Outlook 2007 utilisant le moteur de rendu Microsoft Word. Apprenez 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 d'images à moins que l'utilisateur ne leur demande spécifiquement de les afficher.
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 tableaux
Est-ce vrai. Que se passera-t-il si je le fais? Y a-t-il des clients particuliers qui s'étouffent là-dessus? - Attention à l'imbrication des images d'arrière-plan dans les cellules/tableaux
Si je comprends bien, vous pouvez rencontrer des situations dans lesquelles l'image d'arrière-plan est complètement appliquée à nouveau dans le tableau/la cellule descendante, et pas seulement "à travers". Encore une fois, vrai ou non? Quels clients?
Je voudrais étoffer cette liste avec plus de directives et d'expériences des tranchées.
Pouvez-vous faire d'autres suggestions?
Mise à jour: Je demande spécifiquement des directives pour la partie de conception dans HTML et cohérence. Les questions sur les directives générales pour éviter les filtres anti-spam et courtoisie courante sont déjà sur SO.
Il est en fait vraiment difficile de créer un email HTML décent, si vous l'abordez dans une perspective 'HTML et CSS moderne'.
Pour de meilleurs résultats, imaginez que c'est 1999.
- Revenez aux tableaux pour la mise en page (ou de préférence - n'essayez pas de mise en page complexe)
- Ayez peur des images d'arrière-plan (elles se cassent dans Outlook 2007 et Gmail).
- La chose style-tag-in-the-body est parce que Hotmail l'acceptait de cette façon - je suis presque sûr qu'ils l'enlèvent maintenant. Utilisez des styles en ligne avec l'attribut
stylesi vous devez utiliser CSS. - Oubliez entièrement
float - N'oubliez pas que vos images seront probablement bloquées - utilisez la couleur d'arrière-plan et du texte à votre avantage - assurez-vous qu'il y a du texte lisible avec des images désactivées
- Soyez très prudent avec les liens, méfiez-vous particulièrement de tout ce qui ressemble à une URL dans le texte du lien - vous fâcherez les filtres de "phishing" (par exemple
<a href="http://domain.tld">www.someotherdomain.tld</a>est mauvais ) - N'oubliez pas que le "pli" sur les clients de messagerie Web a tendance à être extrêmement haut sur la page (sur un écran 1024x768, la plupart des interfaces n'afficheront pas plus d'une centaine de pixels environ) - obtenez vos informations d'identité en haut pour que le destinataire sait qui tu es.
- La version récente d'Outlook a un volet d'aperçu "portrait" qui est beaucoup plus étroit que ce à quoi vous vous attendez - méfiez-vous des dispositions à largeur fixe, si vous devez les utiliser, rendez-les aussi étroites que possible.
- Ne faites même pas pensez à propos de Flash, Javascript, SVG, canvas, ou quelque chose comme ça.
- Testez beaucoup. Assurez-vous de tester dans un Outlook récent (les choses ont beaucoup changé! Il utilise maintenant Word comme moteur de rendu HTML et est paralysé: prise en charge de Word 2007 HTML/CSS ). Gmail est également très capricieux. Étonnamment, le webmail de Yahoo est extrêmement bon, avec le support Nice CSS.
Bonne chance ;)
Mettre à jour pour répondre à d'autres questions:
N'utilisez pas plus de deux niveaux d'imbrication dans les tables
Je pense que c'est une ancienne directive concernant Lotus Notes. Les tables imbriquées devraient ça va, mais vraiment, si vous avez une mise en page suffisamment compliquée pour en avoir besoin, vous aurez probablement des problèmes de toute façon. Gardez votre mise en page simple .
Faites attention à l'imbrication des images d'arrière-plan dans les cellules/tableaux
Cela peut être lié à ce qui précède, et la même chose s'applique, si vous devenez aussi compliqué, alors vous allez avoir 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.
Utilisez toujours un mime en plusieurs parties et fournissez une alternative en texte brut.
Les gens derrière Campaign Monitor ont également commencé un site Web Email Standards Project avec beaucoup de bonnes informations.
Jetez un oeil à ce passe-partout, c'est comme html5boilerplate, mais pour les e-mails: http://htmlemailboilerplate.com/
Je pense que c'est un niveau inférieur à la question que vous posez, mais si vous voulez vraiment qu'un email html soit correctement visualisé 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 un MIME valide, les en-têtes DOIVENT (au sens RFC du mot) contenir ces deux en-têtes:
MIME-Version:
Content-Type:
Les clients très stricts afficheront votre HTML sous forme de texte brut si l'un ou l'autre d'entre eux est manquant. Vous seriez surpris du nombre de grands fournisseurs en ligne qui devraient en savoir plus ont foiré 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é)
- Les images d'arrière-plan ne sont pas fiables.
- Pratiquement une évidence, mais pas de javascript.
- Utilisez un éditeur qui vous permet d'envoyer le fichier/tampon actuel sous forme d'e-mail ou, à tout le moins, trouvez un programme qui vous permettrait d'envoyer le contenu d'un fichier sous forme d'e-mail HTML. ne testez pas vos e-mails en copiant le code HTML et en le collant dans Outlook (ou tout autre programme de messagerie d'ailleurs).
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 tas 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 pour le courrier HTML)
De plus, au-delà des styles CSS en ligne, je recommande de passer aux balises dans la mesure du possible.
Intégrez vos images, ne les liez pas.
C'est mauvais :
<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>
C'est bon :
<img src=cid:myImage/>
Oui, ça a l'air bizarre, mais regardez ça guide concernant l'intégration d'images dans les e-mails .
Si vous incluez un bloc de style, ne commencez pas de nouvelle ligne par ".classname" ou "." n'importe quoi. Mettez une accolade ou quelque chose avant la période. 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 reconnu à tort comme un nouveau message. La façon dont cela est géré a tendance à casser tout style commençant sur une nouvelle ligne avec un point.