Points to note when making html emails_html/css_WEB-ITnose

Since there was some demand for producing front-end html emails in Python before, I also gained some experience in the process

1. Do not use external css

For css support, please refer to http://www.campaignmonitor.com/css/, which has a statistical list of support in various email systems. Inside we can see

Therefore, set the css style of the page through the html tag attribute or style attribute. And in the development of HTML emails, there is a golden rule:

If an attribute exists in HTML, absolutely use the tag attribute and not the CSS style .

2. Use table layout

Why use the ancient table layout? Because email clients generally adopt a relatively primitive parsing method, we can compare the email client to IE6 in the browser world.

If you use div and then use position or float for layout,

Since the position attribute is not supported in Outlook07/10/13, Yahoo! Mail and Google Gmail,

The float attribute is not supported on both the Outlook client and the web page.

Therefore, the compatibility is not friendly and the page will become ugly in some cases.

Therefore, the old table nested layout has the best stability, and universal centering can be achieved through align="center"

3. All img The tag sets the alt attribute and border=0

The alt attribute is set to prevent the image from being displayed, and at least there is a text description to let the user understand the meaning.

Set border=0. I don’t know why you need to set border=0, but it does allow the image to be displayed in more situations.

Of course, it is still not supported in some cases, such as when the gmail web page is sent to the QQ mailbox web page (the image still cannot be displayed. Check the source code and find that the src and alt attributes of the img tag have been harmonized)

At the same time, display:block can be set for img, which can be used to fix the blank space under some email client images.

In addition, if you must use images, I personally suggest that it is best to upload the images to the server, or use base64 directly for small images.

4. When setting background-color, always remember to use the full 6 full hexadecimal encoding. If you use three abbreviation characters, not always Valid .

Although the background-color attribute is supported by all email systems, remember to use 6 complete hexadecimal encodings when assigning values.

Even if it is black, do not use #000, but #000000

5. Use padding, not margin

The margin attribute is not supported on the web version of Outlook

Padding can support all email systems. At least I have used padding so far and there has been no incompatibility.

But I read on the Internet that padding is no problem with table layout, but if div layout is used, padding will become uncontrollable. I have not tried this yet.

These are some of my experiences in doing html emails before. I will continue to add more when I have other gains in the future.