Suggestions pour envoyer des e-mails HTML: Utilisez le style pour écrire en ligne CSS; utiliser moins d'images; Utilisez la table pour implémenter des dispositions gauche et droite ou des dispositions plus complexes; Utilisez des éléments d'arrière-plan pour définir des images d'arrière-plan, etc.
Presque chaque site Web basé sur les membres doit envoyer des e-mails dans le contexte pour communiquer avec les membres, tels que la confirmation d'inscription, la promotion marketing. Ces lettres envoyées par le site aux membres sont souvent incapables de répondre aux exigences d'interface et d'interaction, nous devons donc envoyer des pages HTML. Étant donné que le courrier électronique HTML n'est pas un hôte indépendant sur ce site Web, il dépend des autres. L'écriture HTML Mail est donc très différente de l'écriture de pages HTML. Parce que toutes les boîtes aux lettres traditionnelles pour les internautes filtrent plus ou moins le courrier HTML qu'ils reçoivent en arrière-plan. Il ne fait aucun doute que le code JS est strictement filtré, y compris tous les attributs d'écoute d'événements, tels que OnClick et OnMouseover, qui sont basés sur des considérations de sécurité par e-mail. Non seulement cela, le code CSS sera également partiellement filtré. Ce que je veux parler, c'est de savoir comment rédiger des e-mails HTML qui ne sont pas filtrés par des boîtes aux lettres traditionnelles majeures et peuvent s'afficher normalement.
Suggestions pour envoyer des e-mails HTML: Utilisez le style pour écrire en ligne CSS; utiliser moins d'images; Utilisez la table pour implémenter des dispositions gauche et droite ou des dispositions plus complexes; Utilisez des éléments d'arrière-plan pour définir des images d'arrière-plan, etc.
Tout d'abord, examinons comment l'e-mail affiche le courrier électronique HTML. Je n'ai jamais créé de système de messagerie, et les algorithmes de filtrage dans le backend des principales adresses e-mail ne sont pas si faciles à connaître pour les étrangers. Par conséquent, nous ne pouvons que spéculer via l'affichage frontal pour déduire quelles méthodes d'écriture sont acceptées par l'e-mail et qui seront filtrées. Grâce à l'analyse de Gmail, Hotmail, 163, Sohu et Sina, j'ai divisé l'adresse e-mail en deux catégories:
La première catégorie comprend Gmail, Hotmail et SoHU. Le contenu de l'e-mail est organisé dans une div sur toute la page de boîte aux lettres.
La deuxième catégorie, dont 163 et SINA, est utilisée pour organiser le contenu de l'e-mail dans un iframe indépendant.
Les amis qui connaissent HTML savent que le contenu IFRAME est un document indépendant et n'est pas pertinent pour les éléments et les CS de la page parent et peut être traité presque comme une page indépendante. Et si le contenu de l'e-mail est dans un div, le contenu de l'e-mail fait partie intégrante de la page e-mail entière. De toute évidence, l'utilisation d'Iframe comme méthode de présentation de l'e-mail sera beaucoup plus tolérante au contenu des e-mails, car il vous donne un espace suffisamment indépendant pour la présentation. Et la div n'est pas si polie. Imaginez, si vous écrivez ce CSS dans votre e-mail, la police de toute la boîte aux lettres sera-t-elle 20px et qu'elle deviendra désordonnée:
<style type = text / css>
corps {taille de police: 20px}
</ style>
<style type = text / css>
corps {taille de police: 20px}
</ style>
Nous devons rédiger un modèle de messagerie unifié compatible avec chaque adresse e-mail, nous devons donc éviter la méthode de rédaction CSS externe ci-dessus. De plus, des styles similaires au flotteur, à la position, etc. qui ont des flux de contenu anormaux seront également filtrés. Si vous écrivez, cela peut affecter les performances des adresses e-mail externes.
Ci-dessous, je liste quelques principes d'écriture:
1. L'une des règles globales: n'écrivez pas de balises ou de classe. Tout CSS utilise l'attribut de style. Utilisez le style pour écrire CSS en ligne pour tout élément qui a besoin de tout style.
2. Règle globale 2: Utilisez moins d'images. L'adresse e-mail ne filtrera pas vos balises IMG. Cependant, le système ne charge souvent pas les images d'étrangers par défaut. Si vous utilisez beaucoup de messages mail avec des images, si le film n'est pas chargé, il sera extrêmement laid et même incapable de voir le contenu clairement. L'utilisateur impatient le supprimera directement. ALT doit être ajouté à l'image.
3. N'écrivez pas les styles de flotteur et de position avec style, car ils seront filtrés. Alors, comment réaliser la disposition gauche et droite ou plus complexe? Utilisez la table.
4. L'arrière-plan peut être défini dans le contenu de style, mais IMG sera filtré, ce qui signifie que l'image d'arrière-plan ne peut pas être définie via CSS. Mais il y a un attribut d'élément très intéressant, également appelé arrière-plan, qui peut définir un chemin d'image. C'est une bonne alternative. Bien que cette fonction soit limitée, par exemple incapable de localiser des images d'arrière-plan, il est préférable d'en avoir un que non. Par exemple, pour ajouter un fond à une cellule, vous devez l'écrire comme ceci:
<td background = http: //image1.koubei.com/images/common/logo_koubei.gif> </td>
<td background = http: //image1.koubei.com/images/common/logo_koubei.gif> </td>
5. L'adresse e-mail en mode div ne prend pas en charge le flash et le mode iframe doit être vérifié.
Enfin, je voudrais mentionner que l'adresse e-mail de Sohu est très bizarre. Il ajoutera un espace après chaque segment de texte, ce qui entraînera une disposition normale d'origine et la rupture de ligne, ce qui entraînera la confusion de certaines dispositions. Par conséquent, si vous souhaitez être compatible avec les boîtes aux lettres SOHU, vous devez être très prudent lorsque vous rencontrez des dispositions compactes, minimisez le nombre de segments de texte et laissez suffisamment de largeur.