web-dev-qa-db-fra.com

Meilleures pratiques et considérations lors de l'écriture d'e-mails HTML

Je développe des sites Web depuis plus d'une décennie maintenant, mais j'ai rapidement constaté que bon nombre de mes habitudes de développement pour le Web étaient inutiles lors du développement pour les clients de messagerie. Cela m'a causé énormément de frustration, j'ai donc pensé poser une question qui, je l'espère, ferait ressortir les meilleures pratiques et les considérations nécessaires pour d'autres comme moi qui pourraient se retrouver à concevoir pour gmail, Outlook, etc. de temps en temps.

Exemple:<style>...</style> vs CSS en ligne.

En bref: ce qui passe du monde Web au monde de la messagerie électronique et ce qui ne le fait pas.

htmlcsshtml-email
79
Sampson

Cela semble être un excellent endroit pour répertorier certaines ressources pour quiconque essaie d'apprendre le courrier électronique HTML. Il s'agit (probablement) de la liste la plus complète de ressources de messagerie HTML que vous trouverez sur le Web. Bon apprentissage.

Guides de mise en route:

Support CSS et guides généraux:

Vous devez toujours incorporer votre CSS dans html-email. Voici une liste de CSS Inlining Tools

Guides réactifs:

Modèles et cadres:

Exemples alternatifs réactifs:

Le lien réactif Ted Goas ci-dessus a également un excellent exemple fluide.

Dépannage et guides généraux:

Vous devrez utiliser VML pour que les images d'arrière-plan fonctionnent dans Outlook (sauf dans la balise body ). Voici quelques liens VML:

117
John

Je fais cela (à des moments assez) pour mon travail depuis un certain temps maintenant. Il existe de nombreux pièges avec les e-mails HTML. Différents clients de messagerie rendent HTML différemment les uns des autres et rendent IE6 avancé.

Voici un résumé de ce que j'ai appris jusqu'à présent.

  • tiliser le CSS en ligne: Les styles ne sont pas toujours pris en charge.
  • tiliser les dispositions de table: Je sais, mais les dispositions div dépendent du CSS et de nombreux clients de messagerie ne peuvent pas y faire face.
  • N'utilisez pas rowpan: Cela provoque des problèmes d'espacement étranges.
  • N'utilisez pas d'images d'arrière-plan: Leur prise en charge est limitée.
  • Style des balises d'image avec "display: block": Cela corrige des problèmes d'espacement étranges avec hotmail.
  • Si vous utilisez plusieurs tables, imbriquez-les dans une seule table parent: Cela arrête les problèmes d'espacement plus étranges.
  • N'utilisez pas Javascript: Encore une fois pas très bien supporté.
  • Assurez-vous que votre e-mail est lisible sans images: L'utilisateur ne peut pas les charger.
  • Fournissez une version en ligne et un lien vers celle-ci: Cela permet aux utilisateurs de voir le contenu prévu, même si leur client de messagerie est terrible.
  • Test, test, test: Ce n'est pas parce qu'il fonctionne dans un client de messagerie qu'il fonctionne dans d'autres. Outlook 2007 est un grand succès. Il utilise Word pour rendre HTML (soupir).

C'est loin d'être une liste exhaustive, mais cela devrait mettre la plupart des gens sur la bonne voie.

34
Magpie

CSS et tableaux en ligne - pensez au développement Web vers 2000 et tout ira bien. Le moniteur de campagne a une excellente ressource pour ce que les clients de messagerie peuvent traiter. Utilisez également http://www.emailonacid.com/ pour les tests - évite d'avoir à envoyer des charges de tests.

5
matpol

J'ai moi aussi trouvé ce guide très utile: Guide de support CSS dans les clients de messagerie .

3
BalusC

C'est bien aussi, alors voyez quel CSS en ligne est pris en charge dans quel navigateur de messagerie: http://www.campaignmonitor.com/css/

Je recommande également litmusapp (google it!). C'est un bon outil pour vérifier les choses.

0
jos