Summary of examples of making email web pages using HTML+CSS

When we do email marketing, we all hope that when users open the mailbox, they will see a complete web page that we sent to the other party. However, the rendering of HTML pages by mailboxes is different from the rendering in browsers, and the rendering capability is small. Many effects that display normally in the browser will cause errors or fail to render in emails. After countless tests, when designing and producing web emails, Technology Home reminds you to pay attention to the following points:

1. Do not use any form of background image;

2. The style must be Write it into HTML code, similar to style="text-decoration:none; color:#666; font-size:12px;". In addition, the styles in must be placed in the body can work, but some styles will be lost during the forwarding process, so it is not recommended to use

3. Add alt and title

to each picture. 4. Consider the email Width, many users are using laptops, and the resolution of laptops is 1280*708. . . Therefore, in order to have a good user experience at first glance, it must have an appropriate width

5. All pictures must use absolute addresses, otherwise they will not be displayed on the client terminal, but can be displayed in foxmail;

6. For layout, use table instead of div, because even margin:0 auto does not work in the mailbox, and the css properties are not all tested, but they are really limited, so use table;

7. Try to add the width to each block. If you don’t write the width, there will be inexplicable bugs;

8. The display effect is based on the email address. In some cases, the page effect rendered by the browser and the email address The rendering is different;

Risk warning:

When the window is reduced to a certain extent, some pictures will shrink and the page boundaries will be irregular. This is the rendering rule of the mailbox. As of now Design, this bug cannot be avoided, so the width can only be changed smaller (this problem also exists when testing system emails sent by NetEase Mailbox Center).

The above is the detailed content of Summary of examples of making email web pages using HTML+CSS. For more information, please follow other related articles on the PHP Chinese website!