Use CSS techniques in e-mail page EDM page design

Article Introduction: when we are doing the Mail page, all hope that the user opened the mailbox to see us sent to each other is a complete page page, but the mailbox of HTML page rendering and rendering in the browser is different, rendering ability of a lot of small, in the browser, the effect of the normal display in the mail will be wrong, or can not render.

e-Mail page (EDM) is a Web page that can be sent to each other by email. Compared to ordinary mail, web mail is more eye-catching, well-designed web mail, in a very short time to convey your message to the recipient.

When we are doing the Mail page, all hope that the user opened the mailbox to see us sent to each other is a complete page page, but the mailbox of HTML page rendering and rendering in the browser is different, rendering ability of a lot of small, in the browser, the effect of the normal display in the mail will be wrong, or can not render.

First we look at the current mail client support for HTML and CSS (figure):

Because the mailbox client system to the CSS support is different, so in order to minimize the message page in the client error, we should pay attention to the following points:

1, file content coding if UTF-8;

2, does not contain pictures or flash pages should be controlled within 10k, including the size of the picture should be controlled within 30k-120k;

3, the width of the message page is generally maintained between 600px to 800px, the recommended width of 650px or 600px, the message is not specific to the height of the message, should be the number of mail content, the recommendation is not more than 1200px, that is, 2.5 screen, or must be modified;

4, layout to use the table layout, do not use the Div,css style to write the style inside the HTML tag, do not introduce external style files, also do not write in style, table if there is margin:0 auto; this style is not used, the proposal is written as a specific number such as margin:0px 15px when the content of the message is centered, set the align= "center" in the table, and the font and size are best defined in the TD in each table;

5. Do not insert any JavaScript, flash and some special tags (such as: marquee) in the mail the vast majority of mail clients will block Flash and JavaScript, as well as some special tags and attributes; The best control is within 3;

6, do not use the background image Background-image properties, in most online mail clients will be blocked, as far as possible to use a solid color background;

7, to each picture are specified width and height and the Alt attribute value, and the SRC attribute of the picture must be absolute address, wrapped in the picture of the TD should also be raised wide limit to avoid some of the client's pictures show abnormal, important content information do not use pictures, considering the picture may not show, Important content can choose text display;

8, the Mail page all clicks should use pops up the new window finally is the Mail page the test relative trouble some, more tests several times, you understand.