Quelles sont les règles de conception des e-mails HTML? [fermé]

101

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.

html email

— kaa
source

Voici une grande liste de ressources sur une question très similaire .

— John

63

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.

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).
Le truc de style-tag-in-the-body est que Hotmail l'acceptait de cette façon - je suis à peu près sûr qu'ils le suppriment maintenant. Utilisez des styles en ligne avec l' styleattribut si vous devez utiliser CSS.
Oubliez complètement 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 d'hameçonnage (par exemple, <a href="http://domain.tld">www.someotherdomain.tld</a>c'est mauvais )
Rappelez-vous que le «pli» sur les clients de messagerie Web a tendance à être extrêmement haut sur la page (sur un écran de 1 024 x 768, la plupart des interfaces n'afficheront pas plus d'une centaine de pixels environ) - placez vos informations d'identité en haut pour que le destinataire sait qui vous êtes.
Les versions récentes d'Outlook ont 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, rendez-les aussi étroites que possible.
Ne pensez même pas au flash, au Javascript, au SVG, au canevas 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 il est paralysé: support HTML / CSS de Word 2007 ). Gmail est également assez capricieux. Étonnamment, le webmail de Yahoo est extrêmement bon, avec un bon support 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 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 .

Faites attention à l'imbrication des images d'arrière-plan dans les cellules / tableaux

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.

— Dan
source

3

Pourquoi le support des e-mails HTML n'a pas beaucoup évolué? Pourquoi devrions-nous continuer à mettre en œuvre toutes ces mauvaises pratiques, comme si nous étions de retour en 1999?

— smonff

Il existe une solution de contournement pour la prise en charge de bgimages stackoverflow.com/a/17358553/413032 . Alterner un html ms-word. @ Smonff Je suis entièrement d'accord avec vous. ........ Pourquoi un HTML rendu par MS-Word!

— Davut Gürbüz

1

check Email Coding 101 de tournesol, l'espoir aide.

— shaijut

13

Utilisez toujours le mime en plusieurs parties et fournissez une alternative en texte brut.

— JeeBee
source

9

Les gens derrière Campaign Monitor ont également lancé un site Web de projet de normes de messagerie avec beaucoup de bonnes informations.

— John Sheehan
source

3

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

— welldan97
source

Oups, c'est parti maintenant.

— Sean McMillan

2

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:

MIME-Version:
Content-Type:

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é)

— jj33
source

1

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 de courrier électronique ou, à tout le moins, de trouver un programme qui vous permettrait d'envoyer le contenu d'un fichier sous forme de courrier électronique HTML. ne testez pas vos e-mails en copiant le code HTML et en le collant dans Outlook (ou dans tout autre programme de messagerie d'ailleurs).

— Jonathan Arkell
source

1

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.

— Eli
source

1

Incorporez vos images, ne créez pas de lien vers elles.

C'est mauvais :

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

C'est bon :

<img src=cid:myImage/>

Oui, cela a l'air bizarre, mais consultez ce guide concernant l'incorporation d'images dans les e-mails .

— Andrei Rînea
source

0

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.

— Einstein
source