Post: koubei network UED team» how to write HTML emails compatible with mainstream mailboxes

April 28

How to compile HTML emails compatible with mainstream mailboxes

Published by rice

Almost every membership website needs to send emails to communicate with its members through the background, such as registration confirmation marketing and promotion emails sent to members by the website, the plain text format cannot meet the interface and interaction requirements. At this time, we need to send HTML pages because HTML emails are not independent hosts on the pages of this site, because HTML emails are written by the sender, it is very different from HTML pages, mainstream mailboxes for Internet users are more or less used to filter HTML emails they receive in the background. No doubt, JSCodeIt is strictly filtered out, including all event listening attributes, such as onclickonmouseover, which is based on the security of mail, CSS code will also be partially filtered. What I want to talk about is how to write HTML emails that are not filtered by major mailboxes and can be normally displayed.

First, let's take a look at how the mailbox shows HTML mails. I have not done any email system, and the background filtering of various mailboxesAlgorithmIt is not so easy for outsiders to know. Therefore, we can only use the front-end display to speculate what is accepted by the mailbox, which of the following are filtered out? By analyzing several gmailhotmail163sohusina mailboxes, there are two types of mailboxes:
The first type includes gmailhotmailsohu. For this type of mailbox, the Mail content is placed in a div of the entire mailbox page.

The second category, including 163 sina. emails of this type are arranged in an independent IFRAME.

Anyone familiar with HTML knows that IFRAME content is an independent document, which is irrelevant to the elements and CSS of the parent page, it can almost be treated as an independent page. If the content of the email is in the DIV, the content of the email is obviously an integral part of the entire mailbox page, IFRAME is used as the display mode for the mailbox, and it will be much more tolerant to the Mail content, because it gives you an independent presentation space, and DIV is not so polite. Imagine, if you write such a CSS statement in your email, is it true that the font on the entire mailbox display page is 20 PX, and thus it is messy:
<Style type = text/CSS>
Body {font-size: 20px}
</Style>
We need to write a unified email template compatible with all mailboxes, so we must avoid the above external CSS writing method. In addition, Styles similar to floatposition and other non-normal content streams will also be filtered, if you write it, it may affect the performance of the external mailbox.

Below I will list some writing principles:
1. Do not write <style> labels, do not write class, all CSS uses style attributes, and use style to write inline CSS for any element.
2. The second global rule is to use fewer images. The mailbox will not filter your IMG tags, but the system will usually not load images from unfamiliar emails by default. If you use emails with many images, when a piece is not loaded, the content is ugly or even invisible. If you are impatient, you must add ALT to the image.
3. Do not write floatposition styles in the style, because they will be filtered. How can we achieve left and right layout or more complex layout? Use table
In the 4style content, background can be set to color, but IMG will be filtered. That is to say, the background image cannot be set through CSS, but there is an interesting element attribute, also called background, you can define an image path in it. This is a good alternative. Although such functions are limited, for example, you cannot locate the background image, it is always better. For example, you need to add a background to a cell, it must be written as follows:
<TD background = http://image1.koubei.com/images/common/logo_koubei.gif> </TD>
The 5div mode mailbox does not support flash, and the IFRAME mode needs to be verified.

In the last sentence, Sohu's mailbox is weird. A space will be added to the end of each text segment, leading to a line break that won't fit in the original normal layout, so that some la s are out of order. If you want to be compatible with Sohu mailboxes, you need to be very careful when encountering some compact la S. Minimize the number of text segments and keep the width to the full.