100 votes

kaa avatar

Quelles sont les directives en matière de conception d'e-mails en HTML ?

Demandé el 24 de Septembre, 2008
Quand la question a-t-elle été
12849 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Ouvert
Situation réelle de la question

Quelles directives pouvez-vous donner pour un formatage HTML riche dans les courriels tout en maintenant une bonne stabilité visuelle sur de nombreux clients et interfaces de courriel basés sur le Web ?

Une réponse sans rapport avec une question posée sur Stack Overflow le suggère :

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 <body> au lieu de <head>
    Certains clients de messagerie supprimeront le CSS de l'en-tête, mais le laisseront si le bloc de style se trouve (de manière non valide) dans le corps.
  2. Utilisez des styles en ligne dans la mesure du possible
    Gmail supprimera toute feuille de style, qu'elle se trouve dans le fichier <head> ou dans le <body> mais honore les styles en ligne attribués à l'aide de l'option style="" attribut
  3. 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 qui utilise le moteur de rendu de Microsoft Word. Désapprenez la plupart de ce que vous avez appris sur le positionnement sans feuilles de style.
  4. Ne vous fiez pas aux images
    La plupart des clients et la plupart des clients de messagerie basés sur le Web n'affichent pas les images, à moins que l'utilisateur ne demande expressément leur affichage.

J'ai aussi quelques vérités "non confirmées" dont je ne me souviens pas où je les ai lues.

  1. N'utilisez pas plus de deux niveaux d'imbrication dans les tableaux.
    Est-ce vrai ? Que risque-t-il de se passer si je le fais ? Y a-t-il un ou plusieurs clients en particulier qui s'y opposent ?
  2. Attention à l'imbrication des images d'arrière-plan dans les cellules/tables
    Si j'ai bien compris, vous pouvez rencontrer des situations où l'image d'arrière-plan est appliquée dans la table/cellule descendante de manière complètement nouvelle, et non pas simplement "transparente". Encore une fois, est-ce vrai ou non ? Quels clients ?

J'aimerais étoffer cette liste en y ajoutant d'autres directives et expériences tirées des tranchées.

Avez-vous d'autres suggestions ?

Mise à jour : Je demande plus particulièrement des directives pour le partie conception en HTML et leur cohérence. Questions sur les directives générales pour éviter les filtres anti-spam et simple courtoisie sont déjà sur SO.

Demandé el 24 de Septembre, 2008 par kaa

Réponses

Trop de publicités?

62voto

Dan avatar
Dan Points 20968

En fait, c'est vraiment Il est difficile de créer un courriel HTML décent, si l'on adopte une approche "HTML et CSS modernes".

Pour de meilleurs résultats, imaginez que nous sommes en 1999.

  • Revenir aux tableaux pour la mise en page (ou de préférence - ne pas tenter une mise en page complexe)
  • Ayez peur des images d'arrière-plan (elles ne fonctionnent pas dans Outlook 2007 et Gmail).
  • Le truc du style-tag dans le corps est dû au fait que Hotmail l'acceptait de cette façon - je suis presque sûr qu'ils l'enlèvent maintenant. Utilisez les styles en ligne avec la balise style si vous devez utiliser les CSS.
  • Oubliez complètement float
  • N'oubliez pas que vos images seront probablement bloquées - utilisez la couleur du fond et du texte à votre avantage - assurez-vous qu'il y ait du texte lisible lorsque les images sont désactivées.
  • Soyez très prudent avec les liens, et surtout méfiez-vous de tout ce qui ressemble à une URL dans le texte du lien - vous allez vous mettre en colère contre les filtres anti-hameçonnage (par ex. <a href="http://domain.tld">www.someotherdomain.tld</a> est mauvais )
  • N'oubliez pas que le "pli" des clients de messagerie Web a tendance à se situer très haut dans la page (sur un écran de 1024x768, la plupart des interfaces n'affichent pas plus d'une centaine de pixels) - faites figurer votre identité en haut de la page pour que le destinataire sache qui vous êtes.
  • Les versions récentes d'Outlook ont un volet de prévisualisation "portrait" qui est beaucoup plus étroit que ce à quoi vous vous attendez - méfiez-vous des mises en page à largeur fixe, si vous devez les utiliser, faites-les aussi étroites que possible.
  • N'essayez même pas pensez à à propos de Flash, Javascript, SVG, canvas, ou quoi que ce soit d'autre.
  • 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 handicapé : Support HTML/CSS de Word 2007 ). Gmail est également assez délicat. Étonnamment, le webmail de Yahoo est extrêmement bon, 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 tableaux.

Je crois qu'il s'agit d'une ancienne directive relative à Lotus Notes. Tables imbriquées devrait mais, en réalité, si votre mise en page est suffisamment compliquée pour en avoir besoin, vous aurez probablement des problèmes de toute façon. Conservez votre mise en page simple .

Attention à l'imbrication des images d'arrière-plan dans les cellules/tables

Cela peut être lié à ce qui précède, et la même chose s'applique, si vous devenez aussi compliqué, alors vous sera ont 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.

Répondu el 24 de Septembre, 2008 par Dan (20968 Points )

13voto

JeeBee avatar
JeeBee Points 11882

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

Répondu el 24 de Septembre, 2008 par JeeBee (11882 Points )

9voto

Runscope API Tools avatar
Runscope API Tools Points 43859

Les gens derrière Campaign Monitor ont également lancé un Projet de normes pour le courrier électronique site web avec beaucoup de bonnes informations.

Répondu el 24 de Septembre, 2008 par Runscope API Tools (43859 Points )

7voto

scunliffe avatar
scunliffe Points 30964

Le site que vous avez mentionné possède l'une des meilleures listes...

http://www.campaignmonitor.com/css/

Il s'agit de savoir ce qui est pris en charge (du point de vue du style) et où.

Répondu el 24 de Septembre, 2008 par scunliffe (30964 Points )

2voto

jj33 avatar
jj33 Points 3858

Je pense que ceci est d'un niveau inférieur à la question que vous posez, mais si vous voulez vraiment qu'un email html soit correctement vu par autant de clients que possible, assurez-vous qu'il utilise un MIME valide. En particulier, pour qu'un courriel soit considéré comme un MIME valide, les en-têtes DOIVENT (au sens RFC du terme) contenir ces deux en-têtes :

MIME-Version:
Content-Type:

Des clients très stricts afficheront votre HTML comme du texte brut si l'un ou l'autre de ces éléments est manquant. Vous seriez surpris de savoir combien de grands vendeurs en ligne, qui devraient être plus avisés, se sont plantés sur ce point (notamment, j'ai reçu des e-mails HTML avec des en-têtes MIME-Version : manquants de la part d'Amazon et de l'ACM dans le passé).

Répondu el 24 de Septembre, 2008 par jj33 (3858 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X