Meilleures pratiques et considérations pour la rédaction de courriels en HTML

Question

Je développe des sites web depuis plus de dix ans maintenant, mais j'ai rapidement constaté que bon nombre de mes habitudes de développement pour le web sont inutiles lorsque je développe pour des clients de messagerie. Cela m'a causé une énorme frustration, et j'ai donc pensé que je devais poser une question :

Quelles sont les meilleures pratiques et les considérations à prendre en compte pour ceux qui, comme moi, sont amenés à concevoir de temps à autre pour gmail, outlook, etc.

Exemple : <style>...</style> par rapport aux CSS en ligne.

En bref : qu'est-ce qui se transfère du monde du web au monde du courrier électronique, et qu'est-ce qui ne le fait pas ?

Answer 1

C'est l'endroit idéal pour dresser une liste de ressources pour quiconque tente d'apprendre le courrier électronique en HTML. Il s'agit (probablement) de la liste la plus complète de ressources en matière de courriel HTML que vous trouverez sur le Web. Bon apprentissage.

Guides de démarrage :

• Moniteur de campagne
• Mailchimp
• Sitepoint
• Atteindre les clients en ligne
• Tuts+
• Courriel sur l'acide

Support CSS et guides généraux :

• Campaign Monitor | Guide d'assistance CSS
• HTML Email Boilerplate
• Litmus | FAQ sur les clients de messagerie
• Campaign Monitor - Est-ce que ça va marcher ?
• Mailchimp | Guide pratique du marketing par courriel
• Courriel sur Acid | Bases de CSS : Guide du débutant pour styliser le HTML

Vous devez toujours mettre vos CSS en ligne dans les courriers électroniques html. Voici une liste de Outils d'insertion CSS

Guides réactifs :

• Guide d'assistance pour Campaign Monitor | Responsive
• Campagne de style | Guide d'assistance réactive
• Litmus | Infographie sur le mode d'emploi des réacteurs réactifs
• Litmus - Grande liste de ressources sur les systèmes réactifs et mobiles

Modèles et cadres de travail :

• Ted Goas | Cerberus Responsive Email Patterns (en anglais)
• Email on Acid | Template réactif
• Brian Graves | Responsive Email Patterns (en anglais)
• Antwort | Responsive Layouts
• Zurb | Ink Responsive Templates
• Campaign Monitor | Modèles d'e-mails gratuits
• Mailchimp | Email Blueprints

Exemples d'alternatives réactives :

• Tuts+ | Courriel réactif sans requêtes média
• Débordement de pile | Exemple de fluide
• Email sur la mise en page fluide d'Acid | Monster
• Campagne de style - Conception d'e-mails mobiles fluides
• Stack Overflow | Contenu flottant

Le lien Ted Goas Responsive ci-dessus contient également un excellent exemple de fluide.

Dépannage et guides généraux :

• Email on Acid | Contournement du bug de Yahoo Media Query
• Stack Overflow | Colspans et Rowspans dans un email HTML
• CSS conditionnel Mailchimp | Outlook
• Litmus - Interdire les hyperliens bleus
• Stack Overflow | Les polices de caractères dans les e-mails en HTML

Vous devrez utiliser VML pour faire fonctionner les images de fond dans Outlook (sauf dans la balise body ). Voici quelques liens VML :

• Moniteur de campagne | Bulletproof Backgrounds
• Moniteur de campagne | Bulletproof Buttons

Answer 2

Cela fait un certain temps que je fais ce genre de choses (à certains moments) pour mon travail. Il y a beaucoup de pièges avec les emails HTML. Les différents clients de messagerie rendent le HTML différemment les uns des autres et font paraître IE6 avancé.

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

• Utilisez le CSS en ligne : Les styles ne sont pas toujours pris en charge.
• Utiliser des mises en page de tableaux : Je sais, mais les mises en page div sont dépendantes du css et beaucoup de clients de messagerie ne peuvent pas s'en accommoder.
• N'utilisez pas de rowspan : Cela cause des problèmes d'espacement bizarres.
• N'utilisez pas d'images de fond : Le support pour ces derniers est limité.
• Styler les balises d'image avec "display:block : Cela corrige les problèmes d'espacement bizarre avec hotmail.
• Si vous utilisez plusieurs tables, imbriquez-les dans une table parente. : Cela évite les problèmes d'espacement.
• N'utilisez pas Javascript : Là encore, le soutien n'est pas très bon.
• Assurez-vous que votre courriel est lisible et qu'il ne contient pas d'images. : L'utilisateur ne peut pas les charger.
• Fournir une version en ligne et créer un lien vers celle-ci : Cela permet aux utilisateurs de voir le contenu prévu, même si leur client de messagerie est mauvais.
• Test, test, test : Ce n'est pas parce que ça marche dans un client de messagerie que ça marche dans les autres. Outlook 2007 est un bon exemple. Il utilise Word pour rendre le HTML (soupir).

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

Answer 3

Css en ligne et tableaux - pensez au développement web de l'an 2000 et tout ira bien. Campaign Monitor dispose d'une excellente ressource pour savoir ce que les clients de messagerie peuvent traiter. Utilisez également http://www.emailonacid.com/ pour les essais - cela évite de devoir envoyer des tas d'essais.

Answer 4

J'ai moi-même trouvé ce guide très utile : Guide de la prise en charge des CSS dans les clients de messagerie .

Answer 5

Vous trouverez peut-être cet article utile : http://articles.sitepoint.com/article/code-html-email-newsletters#