Conseils et astuces essentielles pour coder les e-mails HTML

Défis du codage du courrier HTML: faire face aux caractéristiques et limitations de différents clients du courrier

Le problème le plus difficile avec le codage du courrier HTML est que chaque client de messagerie a ses fonctionnalités et limitations uniques. Ces différences proviennent généralement des fonctionnalités ajoutées par les clients de bonne foi, comme convertir automatiquement les adresses de site Web en texte brut en liens cliquables, mais apportant une complexité au développement des e-mails. De plus, les problèmes de sécurité sont également cruciaux. Le client de messagerie doit s'assurer que le HTML et le CSS de l'e-mail n'interfèrent pas avec le HTML et le CSS de sa propre interface. Les e-mails malveillants peuvent utiliser certains attributs CSS (tels que le positionnement absolu) pour inciter les utilisateurs à cliquer sur des liens cachés. Par conséquent, le client de messagerie doit analyser, filtrer et manipuler les codes de messagerie HTML, mais cela signifie que nous, en tant que développeurs de messagerie, devons en être conscients et rendre notre code aussi amical que possible. Cet article est extrait de "Crafting HTML Email" sur SitePoint Premium, qui résume certains conseils et astuces importants dans le développement de courriels HTML.

Points clés

Différences spécifiques au client:
• Étant donné que chaque client de messagerie a ses fonctionnalités et limitations uniques, le codage du courrier HTML est extrêmement difficile. Ces différences proviennent souvent de fonctionnalités telles que la conversion automatique du texte en liens cliquables, mais compliquant le processus de développement des e-mails.
Le moteur de rendu unique d'Outlook:
• Une partie considérable de la part de marché des e-mails est occupée par Outlook, qui utilise le mot comme moteur de rendu HTML et CSS. Cela nécessite des méthodes d'encodage spécifiques pour garantir que les messages sont affichés correctement dans Outlook, y compris la compréhension des limitations et des caractéristiques du rendu des mots.
Adapter les mesures de sécurité et les restrictions de style:
• Les clients du courrier implémentent diverses mesures de sécurité pour empêcher le HTML et le CSS d'interférer avec leur interface, ce qui peut entraîner la modification ou le filtré de certaines propriétés CSS. Cela nécessite une approche prudente et éclairée du codage et du style HTML Mail pour assurer la compatibilité entre différents clients.

Soutenir Outlook

En janvier 2022, Outlook (versions Windows et MacOS) représentait 4,44% de la part de marché du client de messagerie, selon les données de l'outil d'analyse par e-mail. Cela peut ne pas sembler beaucoup et n'oubliez pas d'être prudent avec les données d'analyse des e-mails, mais il y a de fortes chances que vous rencontrerez des versions Windows d'Outlook pendant le développement des e-mails.

Voici ce que vous devez savoir pour que votre courrier HTML s'exécute de manière transparente dans la version Windows d'Outlook.

Comment le travail de rendu des perspectives fonctionne-t-il

Depuis 2007, les versions Windows d'Outlook ont ​​utilisé Word comme moteur de rendu pour HTML et CSS. Microsoft a expliqué pourquoi Word a été utilisé en 2009:

Nous avons décidé de continuer à utiliser Word pour créer des e-mails parce que nous pensons que c'est la meilleure expérience de création de messagerie, avec une multitude d'outils que les utilisateurs que les utilisateurs apprécient depuis plus de 25 ans.

Le mot n'est pas seulement bon à rendre HTML et CSS, mais a également un manque de documentation extrêmement dans ce domaine. Le seul document officiel existant sur le rendu des mots est un article de blog publié par Microsoft en 2006 qui explique les capacités de rendu de HTML et CSS dans Outlook 2007.

Cela inclut les informations suivantes:

• Core: Couleur, couleur d'arrière-plan, attributs de texte (police, séries de polices, style de police, taille de police, épaisseur de police, modification du texte, alignement du texte, alignement vertical, espacement des lettres, hauteur de ligne, blanc) , Propriétés d'abréviation des frontières (bordure, couleur de bordure, style de bordure, largeur de bordure, effondrement de la bordure) et d'autres propriétés.
• Coreextended: Propriétés d'indentation textuelle et de marge (marge, marge gauche, marge droite, marge supérieure, marge inférieure).
• Plein: Largeur, hauteur, remplissage (ainsi qu'un remplissage gauche, remplissage droit, remplissage supérieur, remplissage inférieur) et les propriétés complètes de la bordure (bordure gauche, couleur de bordure gauche, largeur de bordure gauche, bordure gauche style, etc.).

et chaque catégorie s'applique uniquement à certains éléments HTML:

1. <span></span> et <font></font> ne prennent en charge que les attributs de noyau.
2. <div> et <code> <code><p></p> Prise en charge les propriétés du noyau et de la core-étendue.
3. Tous les autres éléments pris en charge par Outlook (tels que <table>, <code><td>, <code><tr>, <code><th>, <code><tbody>, <code><tfoot>, <code><thead>, , , <p>, etc.) Soutenez les propriétés du noyau, de la core-étendue et complète. <code><table> <code><table> <code><td> Cela signifie que nous devons considérer quel élément utiliser pour appliquer un style spécifique. Donc, si nous devons définir la largeur ou la hauteur de l'élément de conteneur général, nous utiliserons . Si nous devons remplir, nous utilisons également <p> et <strong>. À ce jour, les versions Windows d'Outlook sont toujours la seule raison pour laquelle nous utilisons toujours des formulaires dans les e-mails HTML. Heureusement, il existe des moyens de rendre ces tables visibles uniquement sur Outlook, de les cacher à des clients de courrier plus puissants et de nous permettre d'utiliser un code plus sémantique. </strong> </p> (Le contenu suivant est limité par l'espace, seul un aperçu des points techniques clés sera conservé. Veuillez vous référer au texte d'origine pour le contenu complet) <ul> <li> <strong> Commentaires conditionnels: </strong> Utilisez des commentaires conditionnels pour ajouter du code spécifique à Outlook. </li> <li> <strong> mso-properties: </strong> Utilisez les attributs CSS propriétaires d'Outlook (préfixés avec <code>mso-) pour implémenter des styles spécifiques.
4. VML: Utilisez VML (langage de balisage vectoriel) pour simuler les propriétés qu'Outlook ne prend pas en charge, telles que les images d'arrière-plan.
5. 120DPI Rendu: résout le problème d'affichage causé par la mise à l'échelle DPI de l'Outlook dans certaines configurations Windows.
6. Évitez les liens automatique: Utilisez diverses méthodes pour éviter que le client de messagerie convertit automatiquement les URL, les adresses e-mail, etc. en liens.
7. Utilisez une URL réelle: Évitez d'utiliser du texte non URL dans l'attribut <a></a> de l'élément href.
8. Ajouter un vide : résout le problème de la suppression des éléments sur Yahoo Mail sur Android.
9. Gardez la taille des e-mails en dessous de 102 Ko: Évitez le contenu de l'e-mail tronquant GMail car la taille de l'e-mail dépasse 102 Ko.
10. Supprimer les commentaires CSS: Évitez les problèmes de défaillance du style causés par les clients Yahoo et AOL en raison des commentaires CSS.
11. Utilisez le type de document HTML5: Gérer l'effet du type de document HTML5 sur l'espacement de la ligne des éléments <img alt="Conseils et astuces essentielles pour coder les e-mails HTML" >.

Conclusion

La fonctionnalité du traitement des clients du courrier fait partie du travail des développeurs de courrier. Il est important de suivre la communauté des développeurs de courriels et d'être au courant des dernières mises à jour et pratiques. En rapportant des problèmes que nous avons observés, le client de messagerie peut améliorer et corriger son propre code. Bien qu'il s'agisse d'un processus lent, je pense que HTML Mail se dirige vers un avenir meilleur avec une meilleure interopérabilité et un support standard. Cela ouvrira la porte à des fonctionnalités plus amusantes et passionnantes telles que l'interactivité!

Veuillez noter qu'en raison de la durée du texte d'origine, cette sortie simplifie et résume certains détails techniques. Pour des informations plus détaillées, veuillez vous référer au texte d'origine.