Quelles sont les lignes direcsortingces pour la conception de courrier électronique HTML?

Quelles directives pouvez-vous donner pour un formatage HTML enrichi dans les e-mails tout en conservant une bonne stabilité visuelle sur de nombreux clients et interfaces de messagerie Web?

Une réponse non liée à une question sur le dépassement de stack a suggéré:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Qui contient les directives suivantes:

  1. Placez la feuille de style dans au lieu de
    Certains clients de messagerie suppriment le CSS, mais le conservent si le bloc de style est (de manière invalide) dans le corps.
  2. Utilisez des styles en ligne là où c’est possible
    Gmail supprime toute feuille de style, que ce soit dans ou dans , mais respecte les styles en ligne atsortingbués à l’aide de l’atsortingbut style=""
  3. Retour aux tableaux
    Les standards de messagerie ont fait un grand pas en arrière ces dernières années grâce à Outlook 2007 utilisant le moteur de rendu Microsoft Word. Désactiver la plupart de ce que vous avez appris sur le positionnement sans feuilles de style.
  4. Ne comptez pas sur les 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 les demande spécifiquement.

J’ai aussi quelques vérités “non confirmées” dont je ne me souviens plus où je les lis.

  1. N’utilisez pas plus de deux niveaux d’imbrication dans les tables
    Est-ce vrai. Que peut-il arriver si je le fais? Y a-t-il des clients / clients particuliers qui s’étouffent?
  2. Attention à imbriquer des images d’arrière-plan dans des cellules / tables
    Si je comprends bien, vous pouvez rencontrer des situations dans lesquelles l’image d’arrière-plan est appliquée complètement dans la table / cellule décroissante, et pas simplement “traversant”. Encore une fois, vrai ou pas? Quels clients?

Je voudrais étoffer cette liste avec plus de lignes direcsortingces et d’expériences des tranchées.

Pouvez-vous proposer 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 directives générales à suivre pour éviter les filtres anti-spam et la courtoisie habituelle figurent déjà dans SO.

En fait, il est très difficile de créer un e-mail HTML correct, si vous l’approchez dans une perspective «HTML et CSS moderne».

Pour de meilleurs résultats, imaginez que c’est en 1999.

  • Retourner aux tableaux pour la mise en page (ou de préférence – ne pas essayer une mise en page complexe)
  • Avoir peur des images de fond (elles se brisent dans Outlook 2007 et Gmail).
  • Le style-tag-dans-le-corps est parce que Hotmail l’acceptait de cette façon – je suis à peu près sûr qu’ils vont le supprimer maintenant. Utilisez des styles en ligne avec l’atsortingbut style si vous devez utiliser CSS.
  • Oubliez complètement le float
  • Rappelez-vous que vos images seront probablement bloquées – utilisez les couleurs d’arrière-plan et de texte à votre avantage – assurez-vous qu’il existe un texte lisible avec des images désactivées
  • Soyez très prudent avec les liens, soyez particulièrement prudent avec tout ce qui ressemble à une URL dans le texte du lien – vous allez mettre en colère les filtres de “phishing” (par exemple, www.someotherdomain.tld est mauvais )
  • Rappelez-vous que le “pli” sur les clients de messagerie Web a tendance à être extrêmement haut de la page (sur un écran 1024×768, la plupart des interfaces ne montrent pas plus de cent pixels) – sait qui vous êtes.
  • La version récente de Outlook a un volet de prévisualisation “portrait” qui est nettement plus étroit que ce à quoi vous vous attendez – méfiez-vous des mises en page à largeur fixe, si vous devez les utiliser, réduisez-les au maximum.
  • Ne pensez même pas à Flash, à Javascript, à SVG, à canvas, ou à quelque chose comme ça.
  • Test, 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 il est paralysé: prise en charge de Word 2007 HTML / CSS ). Gmail est très difficile aussi. Étonnamment, le webmail de Yahoo est extrêmement bien, avec un bon support CSS.

Bonne chance 😉

Mise à jour pour répondre à d’autres questions:

N’utilisez pas plus de deux niveaux d’imbrication dans les tables

Je crois que c’est une directive plus ancienne concernant Lotus Notes. Les tables nestedes devraient être correctes, mais vraiment, 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 .

Attention à imbriquer des images d’arrière-plan dans des cellules / tables

Cela peut être lié à ce qui précède, et il en va de même, si vous êtes 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.

Toujours utiliser le mime en plusieurs parties et fournir une alternative en texte brut.

Les responsables de Campaign Monitor ont également lancé un site Web Email Standards Project contenant de nombreuses informations utiles.

Je pense que c’est moins que la question que vous posez, mais si vous voulez vraiment qu’un message HTML soit correctement vu par le plus de clients possible, assurez-vous qu’il utilise un MIME valide. En particulier, pour qu’un email 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 ssortingcts afficheront votre HTML en tant que texte brut si l’un ou l’autre de ceux-ci est manquant. Vous seriez surpris de voir combien de grands fournisseurs en ligne qui devraient savoir mieux ont tout foutu en l’air (notamment, j’ai reçu des emails HTML avec une version MIME manquante: des en-têtes d’Amazon et de l’ACM dans le passé)

Jetez un oeil à ce passe-partout, il est comme html5boilerplate, mais pour les emails: http://htmlemailboilerplate.com/

  • 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 en tant qu’e-mail ou, à tout le moins, de trouver un programme vous permettant d’envoyer le contenu d’un fichier en tant que courrier électronique HTML. Ne testez pas vos e-mails en copiant le code HTML et en le collant dans Outlook (ou tout autre programme de messagerie).

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.

(Lotus Notes avant 8.0 vraiment, pue vraiment pour le courrier HTML, soit dit en passant)

En outre, au-delà des styles CSS intégrés, je vous recommande de passer aux balises dans la mesure du possible.

Intégrez vos images, ne les liez pas.

C’est mauvais :

 Lolkat 

C’est bon :

  

Oui, ça a l’air bizarre, mais consultez ce guide concernant l’intégration d’images dans des emails .

Si vous incluez un bloc de style, ne commencez aucune nouvelle ligne avec “.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 emails à 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 empêcher que le contenu d’un message ne soit reconnu comme un nouveau message. La façon dont cela est géré tend à briser tout style en commençant par une nouvelle ligne avec un point.