Comment coder les newsletters par e-mail HTML et les modèles de messagerie

Cet article a été publié pour la première fois en 2006, puis mis à jour en 2015.

Les newsletters par e-mail HTML ont parcouru un long chemin depuis la publication de cet article en 2006. Le courrier électronique HTML est toujours un support de communication très réussi pour les éditeurs et les lecteurs. Les éditeurs peuvent suivre les tarifs pour l'ouverture des e-mails, les avantages et les clics et mesurer l'intérêt des lecteurs pour les produits et les sujets; Les lecteurs reçoivent des informations disposées comme une page Web, d'une manière plus attrayante visuellement, et beaucoup plus facile à numériser et à naviguer, que des e-mails en texte brut.

Le codage d'un e-mail HTML est un problème amusant et pratique pour les programmeurs. Contrairement au codage d'une page Web, les e-mails HTML doivent bien s'afficher sur les anciens logiciels de messagerie - Think Outlook ou Mac Mail, ainsi que pour s'adapter aux écrans téléphoniques et tablettes. Je vais vous montrer comment créer des e-mails HTML qui s'affichent bien sur n'importe quel appareil, ainsi que des idées pour adapter votre code e-mail HTML actuel à afficher sur les téléphones et les tablettes.

Les plats clés

• Utilisez des tables HTML pour la conception de la mise en page dans les newsletters par e-mail pour assurer la compatibilité entre différents clients de messagerie, car les tables sont plus cohérentes que CSS pour le positionnement et la structuration du contenu.
• Appliquer en ligne CSS directement dans votre HTML pour des éléments de style comme les polices et les couleurs, car de nombreux clients de messagerie ne prennent pas en charge les feuilles de style CSS externes ou intégrées.
• Concevoir des newsletters par e-mail avec une approche mobile axée sur le mobile, en utilisant des techniques réactives comme les requêtes multimédias pour s'adapter à la visualisation sur les téléphones et les tablettes, malgré différents niveaux de soutien entre les clients de messagerie.
• Tester les e-mails HTML largement sur plusieurs clients et appareils de messagerie pour assurer une apparence et des fonctionnalités cohérentes, en utilisant des outils tels que Campaign Monitor et MailChimp pour les tests.
• Évitez d'utiliser JavaScript et des CS complexes tels que le flotteur et la position, car ceux-ci sont souvent supprimés ou non pris en charge par des clients de messagerie communs, conduisant à des problèmes de mise en page potentiels.
• Incluez les replies pour les images et les polices pour améliorer la compatibilité et garantir que la newsletter est accessible même lorsque certains éléments ne peuvent pas être rendus par le client de messagerie.
• Gardez la conception simple et le contenu clair pour éviter de résoudre les problèmes et améliorer la lisibilité et l'efficacité de vos newsletters par e-mail.

HTML Email Fundamentals

La plus grande douleur lors du codage des e-mails HTML est que de nombreux outils logiciels différents sont disponibles pour lire les e-mails, des logiciels de bureau tels que Eudora, Outlook, AOL, Thunderbird et Lotus Notes, aux services de messagerie Web tels que Yahoo! , Hotmail et Google Mail, pour envoyer des applications par e-mail sur les téléphones et les tablettes. Le logiciel utilisé pour rendre HTML pour chaque outil de logiciel de messagerie détermine ce que le code HTML et CSS fonctionne et ne fonctionne pas.

Si vous pensiez qu'il était difficile de garantir la compatibilité de vos sites Web, sachez qu'il s'agit d'un tout nouveau jeu - chacun de ces outils logiciels de messagerie peut afficher le même e-mail de manière très différente. Et même lorsque ces outils affichent correctement un e-mail HTML, en tenant compte des écarts dans, par exemple, les largeurs auxquelles les lecteurs dimensionnent leurs fenêtres lorsque la lecture des e-mails rend les choses encore plus difficiles.

Que vous choisissiez de coder votre e-mail HTML à la main (ma préférence personnelle) ou pour utiliser un modèle existant, il existe deux concepts fondamentaux à garder à l'esprit lors de la création de courriels HTML:

1. Utilisez des tables HTML pour contrôler la disposition de conception et une présentation. Vous pouvez être habitué à utiliser des dispositions CSS pures pour vos pages Web, mais cette approche ne tiendra tout simplement pas dans un environnement de messagerie.
2. Utilisez en ligne CSS pour contrôler d'autres éléments de présentation dans votre e-mail, tels que les couleurs d'arrière-plan et les polices.

Le moyen le plus rapide et le plus simple de voir comment les tables HTML et le CSS en ligne interagissent dans un e-mail HTML consiste à télécharger certains modèles de Campaign Monitor et MailChimp. Lorsque vous ouvrez l'un de ces modèles, vous remarquerez quelques choses dont nous discuterons plus en détail plus tard:

• Les déclarations de style CSS apparaissent sous la balise corporelle, pas entre les tags de tête.
• Aucun raccourci CSS n'est utilisé: Au lieu d'utiliser la police de la règle de style abrégé: 12px / 16px arial, helvetica, vous devriez plutôt décomposer ce raccourci en ses propriétés individuelles: la famille, la taille de la police et la hauteur de ligne.
• Les étendues et les divs sont utilisés avec parcimonie pour obtenir des effets spécifiques, tandis que les tables HTML font la majeure partie du travail de mise en page.
• Les déclarations de style CSS sont très basiques et n'utilisent aucun fichier CSS.

Mon site HTML Code HTML a également des e-mails HTML réels que j'ai téléchargés et formatés afin que vous puissiez étudier pour voir comment les autres ont créé des e-mails.

Étape 1: Utilisez des tables HTML pour la mise en page

C'est vrai: les tables sont de retour, beaucoup de temps! Les normes Web sont peut-être devenues la norme pour le codage des pages pour l'affichage dans les navigateurs Web, mais ce n'est pas le Web, bébé. Quelques clients de logiciels de messagerie ont des années-lumière derrière les huit balles en termes de support CSS, ce qui signifie que nous devons recourir à l'utilisation de tables pour la mise en page si nous voulons vraiment que nos newsletters s'affichent de manière cohérente pour chaque lecteur (voir la liste de lecture à la fin de Cet article pour d'excellentes ressources sur le support CSS dans les clients du courrier).

Alors, mettez de côté vos meilleures pratiques conformes aux normes et de balisage maigre: nous sommes sur le point de nous salir les mains!

La première étape de la création d'un e-mail HTML consiste à décider du type de mise en page que vous souhaitez utiliser. Pour les newsletters, les dispositions à colonne unique et à deux colonnes fonctionnent mieux, car elles contrôlent le chaos naturel qui se traduit lorsqu'une grande quantité de contenu est poussée dans un si petit espace qu'un e-mail. Les conceptions d'e-mails à colonne unique facilitent également l'affichage des téléphones et des tablettes.

Une disposition d'une seule colonne se compose généralement de:

1. un en-tête, contenant un logo et certains (ou tous) des liens de navigation du site Web parent pour renforcer la marque et fournir la familiarité aux visiteurs du site
2. Liens intra-étendus vers des histoires qui apparaissent plus loin dans l'e-mail suivi par les histoires et le contenu
3. un pied de page au bas de l'e-mail, qui contient souvent des liens identiques à la navigation supérieure, ainsi que des instructions de désabonnement

Les e-mails à deux colonnes utilisent également un en-tête et un pied de page. Comme une page Web à deux colonnes, ils utilisent généralement une colonne latérale étroite pour abriter des fonctionnalités et des liens vers plus d'informations, tandis que la colonne plus large contient le contenu corporel de l'e-mail. Pour obtenir une disposition de messagerie à deux colonnes pour bien s'afficher sur un téléphone ou une tablette, il faut du code-FU, comme vous le verrez plus loin dans cet article.

Les e-mails promotionnels suivent des règles similaires mais contiennent beaucoup moins dans la manière du contenu et des liens. Ils comprennent souvent un ou deux messages et utilisent parfois une grande image avec un petit texte explicatif et quelques liens sous l'image.

Toutes ces possibilités de disposition des e-mails peuvent être créées facilement, en utilisant des tables HTML pour diviser l'espace en lignes et colonnes. En fait, l'utilisation de tables HTML est le seul moyen d'obtenir une disposition qui rendra régulièrement entre différents clients du courrier.

Peu importe la façon dont votre e-mail est conçu, il est important de se rappeler que le contenu le plus important devrait apparaître en haut ou près de l'e-mail, il est donc visible immédiatement lorsqu'un lecteur ouvre votre e-mail. Le haut à gauche d'un e-mail est souvent le premier endroit que les gens regardent lorsqu'ils ouvrent un e-mail.

C'est l'approche que j'utilise pour créer des e-mails HTML:

• Pour une disposition à deux colonnes, créez une table chacune pour l'en-tête, les deux colonnes de contenu central et le pied de page - c'est-à-dire trois tables en tout. Enveloppez ces tables dans une autre table de conteneurs. Utilisez la même approche pour les dispositions à colonne unique, mais donnez à la colonne du tableau de contenu une colonne. Cette approche convient particulièrement si la conception de votre e-mail contient des images qui sont brisées sur plusieurs cellules de table. Sinon, une seule table avec des lignes TD pour son en-tête (avec ColSpan = "2" si la conception utilise deux colonnes), le contenu et le pied de page doivent afficher bien dans tous les logiciels de messagerie Lotus Notes.
• Utilisez les attributs dans les balises Table et TD pour contrôler l'écran de la table. Par exemple, en réglant Border = "0", valign = "top", align = "Left" (ou centre, si cela convient à la conception), cellPadding = "0", cellSpacing = "0", etc. Cela aide principalement les clients des e-mails plus anciens à afficher l'e-mail de manière (à peine) acceptable.
• Même si la conception de votre e-mail n'inclut pas de bordure autour de votre table, vous pouvez le trouver utile pendant le développement pour définir Border = "1" pour aider à déboguer les problèmes qui se posent avec l'alignement interne de TR et les balises TD. Remplacez-le en bordure = "0" pour les tests et la production.

Bien que cette approche puisse offenser les puristes qui préfèrent coder en utilisant les dernières normes, c'est la seule approche viable à ce stade. Mais le fait que nous utilisons des tables pour la mise en page ne signifie pas que nous devons entièrement recourir à des méthodes à l'ancienne. Par exemple, peu importe à quel point les notes de lotus affichent un e-mail HTML, vous ne devriez jamais avoir à recourir à l'utilisation de la balise de police. Et bien que le moteur de rendu HTML d'Outlook 2007 soit loin d'être parfait, il affiche très bien les tables HTML de base.

Il y a cependant quelques mises en garde; Jetons un coup d'œil à Styling Our Text ensuite.

Étape 2: Ajouter des styles CSS

Ai-je dit que le support CSS était pauvre dans les clients du courrier? Eh bien, c'est. Mais vous pouvez (et devriez) utiliser toujours CSS pour les styles de votre e-mail une fois votre disposition de table imbriquée en place. Il y a juste quelques choses à surveiller. Voici les étapes que j'utilise.

Tout d'abord, utilisez des styles en ligne pour stocker toutes vos informations de style, comme indiqué ici:

<span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>

Cela comprend la table, le TD, P, A, etc.

N'utilisez pas la déclaration de style CSS dans la balise HTML Head, comme vous le pouvez lors de la création de pages Web. Au lieu de cela, placez votre déclaration de style juste en dessous de l'étiquette corporelle - Google Mail, cependant, recherche toute déclaration de style dans l'e-mail et la supprime (utile). De plus, ne vous embêtez pas à utiliser l'élément de lien pour référencer une feuille de style externe: Google Mail, Hotmail et d'autres logiciels de messagerie ignorera, modifieront ou supprimeront ces références externes à une feuille de style.

Pour votre table de conteneurs - celle qui abrite l'en-tête, le contenu et les tables de pied de page - réglez la largeur du tableau à 98%. Il s'avère que Yahoo! Le courrier a besoin de ce coussin à 1% de chaque côté afin d'afficher correctement l'e-mail. Si les gouttières latérales sont essentielles à la conception de votre e-mail, définissez la largeur à 95% ou même 90% pour éviter les problèmes potentiels. Bien sûr, les tables à l'intérieur de la table de conteneurs doivent être réglées à 100%.

Mettez les informations de style de police générales dans le tableau TD le plus proche du contenu. Oui, cela peut entraîner des déclarations de style répétitif dans plusieurs cellules TD. Mettez les définitions de style de police dans le cap (par exemple H1, H2), P ou une étiquette uniquement si nécessaire.

Utilisez des divs avec parcimonie pour flotter de petites boîtes de contenu et des liens vers la cellule TD d'une table. Google Mail, pour sa part, semble ignorer la Déclaration du flotteur CSS (pourtant Yahoo! et Hotmail y parcourez très bien). Parfois, il est préférable de coder une disposition de table plus complexe que de compter sur la déclaration de flotteur. Ou, comme il est trop facile d'encombrer un e-mail, demandez à votre concepteur de mettre le contenu flottant dans la colonne latérale étroite à la place. La prise en charge feuilletée des flotteurs est un problème qui peut entraîner la retravaille d'une conception par e-mail.

Alors que les divs semblent à peine utiles, les portées semblent fonctionner presque à chaque fois, car ce sont des éléments en ligne. Dans certains cas, des portées peuvent être utilisées pour plus que du texte de coloration ou de dimensionnement: ils peuvent être utilisés pour positionner le texte au-dessus ou en dessous du contenu.

Notez que certains services de livraison par e-mail déballeront les définitions de style pour les rendre plus explicites et, par conséquent, plus lisibles par tous les logiciels de messagerie. Par exemple, le raccourci CSS style = "marge: 10px 5px 10px 0;" peut être étendu à la déclaration de style long indiqué précédemment. Testez chaque e-mail et cherchez à voir ce qui arrive au code e-mail. Commencez par le raccourci CSS car, dans le pire des cas, cela semble bien fonctionner avec tous les logiciels de messagerie.

Si vous avez téléchargé et étudié les modèles de messagerie à partir de Campaign Monitor et MailChimp, vous verrez qu'ils traitent la table de conteneurs comme s'il s'agissait de la balise corporelle HTML. L'équipe Campaign Monitor qualifie ce tableau de «BodyImposter», ce qui est un excellent moyen de penser à la table du cadre ou de l'emballage. Du point de vue du CSS, la table de conteneurs fait ce que l'élément corporel HTML ferait si des services comme Google Mail ne désactivaient pas ou n'ignaient pas la balise corporelle.

Étape 3: adopter les meilleures pratiques

Savoir que vous avez créé un e-mail HTML valide en utilisant les directives que j'ai suggérées n'est qu'une partie de la solution - il existe plusieurs meilleures pratiques que vous devez suivre pour vous assurer que votre e-mail est bien reçu.

La prochaine étape consiste à tester votre e-mail HTML dans une variété de clients de messagerie. Souvent, cela identifie les problèmes qui nécessitent des solutions de contournement.

Les premiers outils de test à utiliser sont les navigateurs Web Firefox et Internet Explorer. Si l'e-mail s'affiche bien ou parfaitement dans les deux navigateurs, il y a de fortes chances de tester l'e-mail dans Outlook, Yahoo!, Google Mail et d'autres services ne révèlent que des problèmes mineurs. Si possible, je recommanderais également de tester votre e-mail dans Internet Explorer 6 - cela devrait vous donner une bonne indication de la façon dont votre e-mail sera rendu dans Outlook 2003 (reportez-vous à la liste des ressources à la fin de cet article pour exécuter Internet Explorateur 6). Enfin, pour tester à quoi ressemblera les e-mails sur un iPhone ou un iPad, consultez votre e-mail HTML dans un navigateur Web Safari.

Une fois que l'e-mail apparaît bien dans ces deux navigateurs Web, utilisez un service de livraison par e-mail pour envoyer l'e-mail à une gamme de comptes de messagerie de test. Idéalement, cela devrait inclure des comptes avec le Yahoo!, Hotmail et Google Mail Services. Les comptes de test que vous utilisez devraient, bien sûr, être déterminés par les noms de domaine dans la liste de diffusion des personnes qui recevront l'e-mail. Par exemple, s'il n'y a pas d'abonnés AOL sur cette liste, c'est probablement une perte de temps et d'argent à configurer et à tester avec un compte de messagerie AOL.

Voici les ajustements de code les plus courants que j'ai trouvés nécessaires pendant cette phase de test:

• Parfois, un passage des largeurs de pourcentage aux largeurs fixes est nécessaire. Bien que cela ne soit pas idéal - parce que les lecteurs peuvent et redimensionnent leurs fenêtres par e-mail pendant la lecture - parfois, l'utilisation d'une largeur fixe est le seul moyen d'avoir un affichage de mise en page correctement dans plusieurs clients de messagerie.
• S'il y a un problème d'espacement avec les colonnes dans la conception des e-mails, ajustez d'abord les attributs de pading et de cellules de cellules des tables HTML. Si cela ne fonctionne pas, appliquez les attributs de marge CSS et de rembourrage. L'espacement HTML fonctionne mieux avec les anciens logiciels de messagerie.
• Le déplacement d'image peut se produire lorsqu'une cellule TD est fermée juste en dessous d'une balise IMG. Il s'agit d'un ancien problème HTML. Mettre la balise juste après (sur la même ligne que) la balise IMG élimine l'écart de 1 pixel ennuyeux et mystifiant.

De plus, les meilleures pratiques suivantes sont recommandées:

• Évitez d'utiliser JavaScript. La plupart des logiciels de messagerie le désactiveront de toute façon.
• Si une image est tranchée et répartie sur plusieurs cellules de table HTML, testez l'e-mail à l'aide de nombreux comptes de test. Parfois, cela peut avoir fière allure dans Outlook, mais être déplacé par un ou plusieurs pixels de Hotmail et d'autres services. Envisagez également de faire de l'image une image d'arrière-plan sur une nouvelle table HTML qui encadre toutes les lignes et colonnes de table qui afficheraient des parties de votre image d'arrière-plan; Cela réalise souvent le même effet que la tranche d'une image, mais utilise moins de code et peut fournir de meilleurs résultats (voir ci-dessous). Notez que Outlook 2007 n'affiche pas les images d'arrière-plan; Assurez-vous de tester votre code de messagerie avec votre logiciel de messagerie cible.
• Pour les images d'arrière-plan, utilisez l'attribut d'arrière-plan de la table au lieu d'utiliser CSS. Cela fonctionne plus de manière cohérente sur le logiciel de messagerie que d'autres solutions potentielles.
• stocker les images e-mail sur un serveur Web - de préférence dans un dossier séparé des images de votre site Web (par exemple, dans un dossier appelé / images / e-mail), et ne les supprimez pas. Certaines personnes ouvrent des e-mails des semaines ou des mois plus tard, de la même manière que les gens utilisent des signets pour revenir aux sites Web.
• Assurez-vous que toutes vos images utilisent les attributs ALT, hauteur et largeur. La définition des valeurs de ces attributs améliore les résultats de Google Mail, ainsi que la maintenance de votre disposition lorsqu'un lecteur a ses images désactivées. Notez cependant que Outlook 2007 ne reconnaît pas l'attribut ALT.
• Utilisez l'attribut Target = "_ Blank" pour les balises A, afin que les personnes qui lisent avec les services de la carte Web n'ont pas la page demandée apparaissent dans leur interface webmail.
• Bien qu'une image 1 × 1 pixel puisse être utilisée pour forcer l'espacement pour créer une disposition de messagerie précise, les spammeurs utilisent souvent des images 1 × 1 pixel pour déterminer si leur e-mail a été ouvert. L'utilisation de cette pratique augmentera la probabilité que votre e-mail soit classé comme spam.
• De même, évitez d'utiliser une grande image «au-dessus du pli» dans l'e-mail. Il s'agit d'une autre pratique de spammeur classique et peut entraîner l'interprétation de votre e-mail comme du spam.

Il est important de vous assurer que votre e-mail HTML s'affiche de manière acceptable avec les images désactivées. De nombreuses applications par e-mail définissent l'affichage des images sur «Off» par défaut. Par exemple, si vous utilisez une image d'arrière-plan pour fournir une couleur d'arrière-plan avec une couleur de police blanche dessus, assurez-vous que la couleur d'arrière-plan par défaut pour cette partie de la table HTML est foncée, pas blanche.

Lorsque je teste comment un e-mail s'affiche avec des images, j'utilise généralement mon éditeur de texte pour remplacer l'attribut SRC de chaque image par une combinaison unique de caractères tels que "xsrcx", puis de le réintégrer après le test.

Une fois que l'e-mail HTML a été modifié afin qu'il s'affiche bien dans vos comptes de messagerie de test, l'étape suivante consiste à passer par une liste de contrôle. Par exemple, vérifiez ce qui suit:

• L'adresse de l'adresse s'affiche-t-elle correctement (comme un nom, pas une adresse e-mail nue)?
• La ligne d'objet est-elle correcte?
• Les coordonnées sont-elles correctes et visuellement évidentes?
• Le haut de l'e-mail affiche-t-il le texte: «Vous avez reçu cet e-mail parce que… les instructions de désabonnement sont au bas de cet e-mail.»?
• Votre e-mail contient-il des texte en demandant aux lecteurs d'ajouter votre adresse à leur carnet d'adresses e-mail?
• Le haut de votre e-mail inclut-il un lien vers la version Web du message?

De nombreux services de livraison par e-mail incluent la possibilité de voir comment votre e-mail HTML s'affiche dans un large éventail de logiciels de messagerie. Il vous aide à identifier les ajustements de code nécessaires avant l'envoi.

Étape 4: Code pour Google Mail, Lotus Notes et Outlook 2007

Google Mail, Lotus Notes et Outlook 2007 présentent leurs propres défis de codage uniques. Outlook 2007, croyez-le ou non, a beaucoup moins de support pour CSS que les versions précédentes d'Outlook!

Le manque de support de Google Mail est un peu plus pardonnable - car l'application s'exécute dans un navigateur, il ne peut pas contrôler le contenu des e-mails qu'il affiche. Par conséquent, les ingénieurs de Google ont dû prendre des mesures pour s'assurer que leur application s'affiche correctement, quelle que soit la qualité du HTML ou du CSS dans lequel les e-mails sont écrits.

En conséquence, Google Mail agit comme un artefact du début des années 1990, lorsque les normes Web étaient primitives. Il faut du travail, mais il est possible d'ouvrir une page de messagerie Google et de voir à quel point leur approche pour rendre réellement le courrier électronique HTML est compliquée.

D'une part, Google Mail supprime les styles CSS contenus entre les balises de style, peu importe où ils apparaissent dans l'e-mail. Et les polices affichées dans les tables HTML - la seule alternative à l'utilisation de styles - ont l'habitude étrange d'apparaître plus grand que prévu, peu importe comment l'e-mail HTML est structuré.

La bonne nouvelle, cependant, est que si vous codez pour tenir compte des bizarreries de ces trois applications de messagerie, votre code de messagerie HTML est susceptible de s'afficher bien dans la plupart, sinon tous, les clients de messagerie. Voici quelques techniques qui semblent bien fonctionner dans Google Mail et d'autres logiciels de messagerie plus anciens:

• Définissez la couleur d'arrière-plan dans une cellule TD avec l'attribut BGColor, pas le style CSS.
• Comme indiqué ci-dessus, utilisez l'attribut d'arrière-plan dans la cellule TD pour les images d'arrière-plan au lieu d'utiliser CSS. Un effet secondaire de cette approche est que l'image d'arrière-plan peut être rendue aussi grande que nécessaire - si le contenu utilisé dans votre modèle de messagerie est susceptible de varier en taille, l'utilisation d'une image d'arrière-plan supplémentaire permet de cette manière permet la hauteur du Email rétrécir ou se détendre, selon la hauteur de la copie, d'un e-mail à l'autre. N'oubliez pas, cependant, que Outlook 2007 ignore complètement les images d'arrière-plan.
• Si cela fonctionne mieux, utilisez la déclaration de rembourrage pour contrôler les marges dans une cellule TD. Le style de marge ne fonctionne pas dans ces cellules, mais le rembourrage le fait.
• Si vous avez besoin d'une bordure autour d'une cellule TD, gardez à l'esprit que Google Mail affiche une bordure autour d'une cellule TD lorsqu'elle est définie dans une div, mais pas lorsqu'elle est définie comme un style de bordure dans une balise TD.
• Si vous avez besoin d'un lien de couleur claire contre une couleur d'arrière-plan sombre, mettez la définition de la police dans la cellule TD (donc elle s'applique à P et à des balises également), ajoutez une couleur: style à la balise A.
• Si le P et les polices semblent être des tailles différentes, enveloppez la balise A dans une balise P.
• Google Mail utilise agressivement la colonne de droite de l'interface utilisateur Google Mail, qui serre l'e-mail HTML dans le panneau central. Assurez-vous que le style de rembourrage dans le contenu TDS est défini sur 10 pixels tout le monde, afin que le texte ne frappe pas contre les bords gauche et droit.
• Lors du test d'un e-mail HTML avec un compte Google Mail, il est probable que vous constaterez qu'un ou plusieurs styles de police sont manquants dans les balises TD, H1, H2, P, A et autres. Inspectez soigneusement chaque police pour vous assurer que Google Mail affiche correctement les polices.

En plus de Google Mail, il y a un autre risque moins évident auquel un programmeur fait face lors de la création d'e-mails HTML: Lotus Notes. De nombreuses grandes entreprises continuent de prendre en charge et de mettre à niveau leurs installations de notes.

Malheureusement, il est impossible de dire quelles entreprises utilisent des notes. La meilleure approche consiste à suivre les directives décrites dans cet article - plus le code est primitif, plus il fonctionnera bien, sinon parfaitement, avec des notes.

Cela dit, il est tout à fait possible que les notes Lotus introduiront vos bizarreries HTML qui sont presque au-delà de la croyance. Par exemple, les versions plus anciennes des notes peuvent convertir des images en leurs formats propriétaires, ou simplement ignorer le HTML de base sans faille dans un e-mail, mais afficher un autre HTML bien dans un autre e-mail.

Voici quelques conseils qui vous aideront à convaincre les notes d'afficher correctement votre e-mail HTML:

• Comme nous l'avons discuté précédemment, utilisez une table de conteneurs qui contient toutes les tables de mise en page internes (par exemple, pour l'en-tête, le contenu et le pied de page). Cela maintient l'e-mail ensemble en un morceau de HTML, donc les morceaux de la disposition sont moins susceptibles de se promener lorsqu'ils sont affichés dans des notes.
• Créez une gouttière autour de la table de conteneurs en définissant la largeur sur un pourcentage et / ou en utilisant un cadrol d'au moins 5.
• Comme je l'ai mentionné plus tôt, évitez d'utiliser une déclaration de style dans la balise de tête de votre e-mail. C'est peut-être l'approche qui adhère aux normes Web, mais les notes (comme Google Mail) peuvent supprimer vos styles. Comptez, plutôt, sur les styles en ligne dans le tableau, TD, H1, H2, P, A et autres tags.
• Utilisez des URL absolues sur les images stockées sur un serveur Web. Vous ne pouvez pas faire grand-chose à propos des notes de conversion d'images, mais l'utilisation d'images distantes pourrait aider.
• Liens intra-à l'imail, en utilisant des ancres nommées, fonctionnent rarement (voire jamais) dans des notes. Il est tout simplement préférable d'éviter les liens qui sautent l'e-mail vers un contenu spécifique.
• Évitez les ColSpans dans vos tables HTML. Les notes - en particulier ses versions antérieures - ne peuvent traiter que des dispositions de table de base.
• Assurez-vous que vos largeurs de cellules TD sont exactes. Contrairement aux navigateurs Web, qui définissent automatiquement toutes les cellules sur la largeur la plus définie, note la taille de chaque cellule TD en fonction de sa largeur définie.
• centrer une disposition par e-mail ne fonctionnera généralement pas dans des notes. Les dispositions par e-mail doivent généralement être alignées à gauche.

L'utilisation de ces techniques pour réaliser un rendu réussi dans Google Mail et Lotus Notes garantira que vos e-mails s'affichent également bien dans Outlook 2007, qui utilise un ancien moteur de rendu HTML. Microsoft a publié des détails sur ce que leur logiciel de messagerie sera et ne s'affichera pas correctement; Plus de détails peuvent être trouvés dans la section Ressources à la fin de cet article).

Campaign Monitor, un service de livraison par e-mail, dispose d'une liste complète de la prise en charge des éléments CSS pour chaque client de messagerie mobile, Web et de bureau populaire.

Étape 5: codage pour les téléphones et tablettes

Un nombre incroyable de personnes lisent un e-mail HTML sur leurs téléphones et tablettes intelligents, ainsi que leur logiciel de messagerie de bureau. L'adaptation de vos tables HTML pour bien afficher sur ces appareils se révèle être quelque peu facile. Il aide le support CSS est très bon pour les moteurs de rendu HTML utilisés sur de nouveaux téléphones et tablettes.

La solution consiste à utiliser la définition CSS @Media pour cibler les cellules TD de la table HTML et augmenter les tailles de police nécessaires pour bien afficher. Par exemple, les polices sur un iPhone doivent être 13 pixels pour être lisibles. La meilleure partie? Le logiciel de messagerie webmail et de bureau se déploiera ou ignorera vos définitions @media tandis que votre téléphone et votre tablette liront le code et affichent tout parfaitement.

Voici un échantillon de définitions @Media pour afficher une table HTML de mise en page à une colonne pour les téléphones et les tablettes:

<span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>

Placez ce code @Media directement en dessous de votre balise corporelle à la définition de votre table et à vos cellules TD. Lorsque votre e-mail HTML est affiché avec un appareil (ou un navigateur Web redimensionné horizontalement) moins de 480 pixels, ces définitions s'activeront.

Le secret pour coder un e-mail HTML à deux colonnes pour s'adapter aux petits écrans de téléphone et de tablette? Mettez chaque colonne dans sa propre table. Ensuite, pour chaque table HTML, utilisez CSS en ligne pour flotter: gauche et html align = "gauche" pour flotter et aligner chaque table de colonne de contenu à gauche. Puis ajoutez à la définition de votre table et à vos cellules TD.

Avec le code @Media ci-dessus, pour les écrans de moins de 480 pixels de large, cela définira les tables de colonne, vos colonnes gauche et droite, la même largeur que la colonne de contenu de gauche et glisse sous la colonne principale.

Cette approche peut être utilisée pour cibler toutes les modifications de conception de disposition pour travailler avec les téléphones et / ou les tablettes.

Cette solution provient d'un excellent guide de Campaign Monitor, conception de messagerie réactive, qui a encore plus de détails et d'idées sur la façon de rendre le courrier électronique HTML réactif aux différentes tailles d'écran.

Résumé

De nombreuses personnes qui reçoivent un e-mail préfèrent le HTML à un texte pour un certain nombre de raisons. Pour les programmeurs, cependant, la tâche de créer un e-mail HTML qui s'affichera toujours à la fois simple et horriblement complexe. Cet article a décrit bon nombre des problèmes et stratégies de création de balisage qui fonctionneront sur les logiciels de messagerie.

Quelle est la meilleure idée à retirer de cet article? S'il y a un choix à faire entre une simple conception de messagerie et une solution plus complexe, la simplicité est toujours le pari le plus sûr.

lecture plus approfondie

Ces ressources offrent des informations précieuses qui vous aideront si vous souhaitez en savoir plus sur le codage des e-mails HTML.

• Moniteur de campagne: Guide de la prise en charge du CSS dans Email
• Moniteur de campagne: conception de messagerie réactive
• MailChimp: e-mail sur les appareils mobiles
• MailChimp: Email Blueprints
• MailChimp: Email Marketing Field Guide

Et voici quelques autres…

Projet de normes par e-mail
Le projet de normes par e-mail est probablement le meilleur point de départ pour comprendre exactement à quel degré HTML et CSS sont pris en charge par différents clients de messagerie. Le site maintient également un test acide qui peut être utilisé pour comparer la conformité entre les logiciels de messagerie, et il existe plusieurs façons de participer pour améliorer la prise en charge des e-mails des normes Web.

Moniteur de campagne gratuit et modèles de messagerie HTML MailChimp
Ces deux services de livraison par e-mail testent activement leurs modèles au fil du temps avec différents clients de messagerie. Cependant, il existe des différences subtiles dans l'approche que chacune adopte - Campaign Monitor place une déclaration de style dans l'étiquette de tête, contrairement à MailChimp. Assurez-vous de tester votre code HTML final avec tous les e-mails que les clients sont utilisés par les destinataires de votre liste de diffusion.

directives de conception par e-mail de texte brut
Cet article répertorie un certain nombre de techniques simples pour rendre les e-mails texte plus faciles à analyser.

Tester Courriel HTML
Cet article explore les procédures de test sur plusieurs clients de messagerie.  D'autres articles connexes incluent la création de dispositions par e-mail HTML et la compréhension des tests multivariés.

Articles sur les images e-mail bloquées par

"> Clickz et Campaign Monitor
À partir de 2004, l'article Clickz montre comment le logiciel de messagerie principal se compare lorsque les images sont bloquées ou lorsque le contenu est visualisé dans un volet d'aperçu. L'article du moniteur de campagne va plus en détail, répertoriant des exemples et des idées réels sur la façon de lutter contre le rendu d'image par défaut de vos e-mails, ainsi que la conception de votre e-mail pour paraître correctement dans les volets d'aperçu.

Word 2007 HTML et CSS Rendre des capacités dans Outlook 2007
La description officielle de Microsoft de ce que Outlook 2007 sera et ne rendra pas pour HTML et CSS. Comprend un lien vers un validateur qui fonctionne dans Dreamweaver, ainsi que des outils d'édition Microsoft.

MailChimp: Modèles HTML Guide de démarrage de la mise en place
Beaucoup de bonnes informations sur tous les aspects de l'e-mail HTML, y compris le fonctionnement des filtres de spam. Une bonne sélection d'outils est incluse pour faciliter le processus.

La série «Secrets of HTML Email»
Certaines de ces informations sont anciennes, mais un bon article sur Lotus Notes est proposé.

CSS et e-mail, s'embrassant dans un arbre
Cette excellente approche CSS uniquement du courriel HTML a été publiée par une liste à part. Remarque: L'auteur a rédigé une mise à jour de cet article, publié sur le blog du moniteur de campagne, Optimiser la présentation CSS dans les e-mails HTML.

comment le code HTML affecte la délivrabilité des e-mails
Un aperçu décent qui décrit comment différents services de messagerie vers le HTML que vous incluez dans un e-mail HTML. Vous ne pouvez pas résoudre tous les problèmes directement (par exemple, la création d'une frontière claire entre le HTML et les versions texte de votre e-mail est un problème pour votre fournisseur de services de messagerie, si vous en utilisez un), mais il est utile de savoir ce qui se passe.

Le guide de marketing par e-mail à 6 étapes du débutant du succès
Voici un guide du marketing par e-mail qui couvre le sujet plus complètement que le titre accessible ne le suggère, et il comprend une section de bonnes informations sur l'obtention des meilleurs résultats de votre lecteur hors des décisions de conception que vous prendrez lors de la création de modèles de messagerie. C'est à la fin de 2020, il fournit donc une perspective solide sur l'espace de marketing par e-mail tel qu'il est aujourd'hui.

Comment démarrer un blog en 2020 (et gagner de l'argent): Guide facile pour commencer à bloguer aujourd'hui
L'une des meilleures façons de développer votre liste de diffusion consiste à exécuter un blog cohérent. Ce guide est une découverte rare - il vous montre comment obtenir un blog efficace en cours d'exécution et en produisant des résultats rapidement et coupe beaucoup de bruit dans le monde des conseils de blogging. Il couvre également l'utilisation de votre newsletter par e-mail pour développer le public de votre blog, créant un cycle vertueux pour toute votre opération.

Questions fréquemment posées (FAQ) sur les newsletters par e-mail HTML

Quelles sont les meilleures pratiques pour coder les newsletters par e-mail HTML?

Le codage des newsletters par e-mail HTML peut être un peu délicat, mais suivre les meilleures pratiques peut rendre le processus plus lisse. Tout d'abord, utilisez toujours des tables pour la mise en page. Contrairement à la conception Web moderne, la conception des e-mails repose toujours fortement sur les tables. Deuxièmement, CSS en ligne est la voie à suivre. En effet, tous les clients de messagerie ne prennent pas en charge CSS intégrés ou liés. Troisièmement, utilisez des attributs HTML pour la largeur, la hauteur et plus encore. Cela garantit que votre e-mail s'affiche correctement entre différents clients de messagerie. Enfin, testez toujours votre e-mail avant de l'envoyer. Il existe différents outils disponibles en ligne qui vous permettent de tester à quoi ressemblera votre e-mail dans différents clients de messagerie.

Comment puis-je rendre ma newsletter par e-mail HTML REAVERSE?

Faire de votre newsletter par e-mail HTML Réactif moyen S'assurer que cela semble bon sur tous les appareils, des ordinateurs de bureau aux téléphones mobiles. Pour y parvenir, vous pouvez utiliser des requêtes multimédias dans votre CSS. Les requêtes multimédias vous permettent d'appliquer différents styles en fonction de la taille de l'écran de l'appareil. Cependant, tous les clients de messagerie ne prennent pas en charge les requêtes multimédias, il est donc important de concevoir votre e-mail avec une approche de mobile. Cela signifie d'abord concevoir pour le plus petit écran, puis ajouter des requêtes multimédias pour s'adapter à des écrans plus grands.

Puis-je utiliser des polices Web dans ma newsletter par e-mail HTML?

Oui, vous pouvez utiliser des polices Web dans Votre newsletter par e-mail HTML. Cependant, gardez à l'esprit que tous les clients de messagerie ne prennent pas en charge les polices Web. Pour ceux qui ne le font pas, vous devriez toujours fournir une police de secours. Il s'agit généralement d'une police standard qui est largement prise en charge, comme Arial ou Times New Roman. Pour utiliser une police Web, vous incluriez les fichiers de police de votre CSS à l'aide de la règle de Font-Face.

Comment puis-je ajouter des images à ma newsletter par e-mail HTML?

Ajout d'images à votre La newsletter par e-mail HTML peut être effectuée en utilisant la balise . Cependant, il y a quelques choses à garder à l'esprit. Tout d'abord, incluez toujours les attributs de largeur et de hauteur dans votre balise . Cela garantit que l'image s'affiche correctement. Deuxièmement, utilisez des URL absolues pour vos images. Cela signifie que la source d'image doit être une URL complète, pas un chemin relatif. Enfin, incluez toujours du texte alt pour vos images. Ceci est une description de l'image qui s'affiche si l'image ne peut pas être chargée.

Comment puis-je m'assurer que ma newsletter par e-mail HTML semble bien dans tous les clients de messagerie?

S'assurer que votre newsletter par e-mail HTML semble bien dans tous les clients de messagerie peut être un défi, car différents clients prennent en charge différentes fonctionnalités HTML et CSS. Cependant, vous pouvez utiliser quelques stratégies. Tout d'abord, utilisez toujours des tables pour la mise en page et le CSS en ligne. Ceux-ci sont largement pris en charge entre les clients de messagerie. Deuxièmement, testez votre e-mail dans divers clients de messagerie avant de l'envoyer. Il existe des outils en ligne disponibles qui vous permettent de le faire. Enfin, gardez votre conception simple. Plus votre conception est complexe, plus il est susceptible de rompre dans certains clients de messagerie.

Puis-je utiliser JavaScript dans ma newsletter par e-mail HTML?

Bien que techniquement possible, il n'est généralement pas recommandé d'utiliser JavaScript dans votre newsletter par e-mail HTML. En effet, de nombreux clients de messagerie ne prennent pas en charge JavaScript ou l'ont désactivé par défaut pour des raisons de sécurité. Au lieu de cela, respectez HTML et CSS pour la conception de votre e-mail.

Comment puis-je ajouter un bouton d'appel à l'action dans ma newsletter par e-mail HTML?

Ajout d'un bouton d'appel à l'action dans Votre newsletter par e-mail HTML peut être effectuée en utilisant HTML et CSS. Le moyen le plus simple consiste à utiliser une balise avec CSS pour le coiffer comme un bouton. Cependant, pour une meilleure compatibilité entre les clients des e-mails, vous pouvez utiliser une table avec une seule cellule et un style qui ressemble à un bouton.

Comment puis-je ajouter une couleur d'arrière-plan à ma newsletter par e-mail HTML?

L'ajout d'une couleur d'arrière-plan à votre newsletter par e-mail HTML peut être effectué à l'aide de CSS. Vous pouvez utiliser la propriété de couleur arrière pour définir une couleur d'arrière-plan pour l'ensemble de votre e-mail, ou pour des éléments spécifiques comme les tables ou les cellules de table. Cependant, gardez à l'esprit que tous les clients de messagerie ne prennent pas en charge les couleurs d'arrière-plan. Pour ceux qui ne le font pas, vous devriez fournir une couleur de secours en utilisant l'attribut BGColor dans votre HTML.

Comment puis-je ajouter des liens vers mon newsletter par e-mail HTML?

Ajout de liens vers votre e-mail HTML? La newsletter peut être effectuée en utilisant la balise. Vous pouvez créer un lien vers des sites Web, des adresses e-mail ou des numéros de téléphone. Pour créer un lien vers un site Web, utilisez l'attribut HREF avec l'URL complète du site Web. Pour créer un lien vers une adresse e-mail, utilisez le protocole MailTo: dans l'attribut HREF. Pour créer un lien vers un numéro de téléphone, utilisez le protocole Tél: dans l'attribut HREF.

Comment puis-je ajouter des icônes de médias sociaux à ma newsletter HTML? La newsletter peut être effectuée à l'aide d'images et de liens. Vous utiliseriez une balise

pour l'image icône et enveloppez-le dans une balise pour créer un lien vers votre profil de médias sociaux. Incluez toujours le texte alt pour vos images et utilisez des URL absolues pour la source d'image et le lien href.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!