Summary of principles for writing HTML pages for emails

First, let's take a look at how the mailbox displays HTML emails. I have never worked on an email system, and the filtering algorithms behind the major email systems are not so easy for outsiders to know. Therefore, we can only infer which writing methods are accepted by the mailbox and which ones will be filtered out through the front-end display. Through the analysis of gmail, hotmail, 163, sohu, sina, I divide the mailboxes into two categories:

The first category includes gmail, hotmail, and sohu. For this type of mailbox, the email content is laid out in a div in the entire mailbox page. As shown in the figure:

The second category includes 163 and sina. In this type of mailbox, the email content is laid out in an independent iframe. As shown in the figure:

Friends who are familiar with HTML know that the iframe content is an independent document, which is unrelated to the elements and CSS of the parent page and can be treated almost as an independent page. If the email content is in a div, then the email content is an integral part of the entire mailbox page. Obviously, emails that use iframe as a display method will be much more tolerant of email content because it gives you a sufficiently independent display space. The div is not so polite. Imagine if you wrote this CSS in your email, would the font size on the entire email page become 20px and become a mess:
<style type="text/css">
body {font-size:20px}
</style>
If we need to write a unified email template that is compatible with all mailboxes, we must avoid the above external CSS writing method. In addition, styles such as float and position that form abnormal content flows will also be filtered. If you write them, it is likely to affect the performance of external mailboxes.

Here are some writing principles:
1. One of the global rules is, do not write <style> tags, do not write classes, all CSS use style attributes, and use style to write inline CSS for elements that require certain styles.

2. The second global rule is to use fewer pictures. The mailbox will not filter your img tags, but the system will often default to not loading pictures from unfamiliar emails. If an email uses a lot of pictures, it will be ugly and even the content cannot be seen clearly if the pictures are not loaded. Impatient users will delete it directly. Always add alt to images.

3. Do not write float, position and other styles in the style, because they will be filtered. So how to achieve left-right layout or more complex layout? Use table.

4. The background color can be set in the style content, but the img will be filtered, which means that the background image cannot be set through CSS. But there is a very interesting element attribute, also called background, which can define an image path. This is a good alternative. Although the function is limited, for example, the background image cannot be positioned, it is better than nothing. For example, to add a background to a cell, you must write:
<td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>

5. The div mode mailbox does not support flash, and the iframe mode mailbox needs to be verified.

Finally, I would like to mention that Sohu's email is very strange. It will add a space after each text paragraph, causing the normal layout to not fit on one line and to wrap, thus making some layouts messed up. Therefore, if you want to be compatible with Sohu Mail, you must be extra careful when encountering some compact layouts, try to reduce the number of text segments and leave enough width.