e-mail Templates--Development articles

In fact, there are many articles on the e-mail template development in fact, but are for developers, for non-technical colleagues have a certain threshold, so I will mail template series divided into three parts, so that friends can find their needs faster. The first two articles, "Popular Science", "Basic article" for product design colleagues and 0 of the basic use of mail template colleagues, the following "development" is mainly for the front-end development of mail template colleagues. "Development article" reference a lot of online articles, combined with some of the pits I encountered in the development, do some summary:

Html:

1,! DOCTYPE statement: In order to forward compatibility and avoid the quirks of certain browsers, use HTML5 's!doctype declaration, in the following format: <! DOCTYPE html>

2. There is no need to consider the simplification of DOM nodes and optimization of structure. To complete the design style is the highest priority. If necessary, you don't have to skimp on using table nesting, and you don't have to skimp on empty table elements to occupy space.

3, the main page, including the details of processing, as far as possible to use <table> layout.

4. Do not allow CSS styles to be defined on the <tr> element, please define the style as much as possible on the <td> element. (Gmail and other mail clients will filter the properties on <tr>)

5, prohibit the use of <style type= "Text/css" > to deal with the main style, all the Web mail system will filter the label. Therefore, you cannot use pseudo-classes (pseudo class) and pseudo-elements (pseudo elements) in the mail template, as well as advanced selectors.

6, prohibit the use of <link> to load the external CSS

7, can use <div> to achieve the details of the typical block-level elements (blocks) layout style. And try to avoid using <p> Because we are not easy to clear <p> default styles in different browsers

8. Note the replacement text (ALT) of the definition picture, and the color of the replacement text.

Css:

1. Make full use of the private properties of the table to layout. width, height, bgcolor, background, align, valign, etc.

2, when writing HTML, please consider when all the pictures on your page are blocked, whether users can also understand the main content of the page. Be sure to define the background color on all elements where you want to set the background picture.

3, the text processing. font-* Family CSS Properties do not allow abbreviations, please define font-size, Font-weight, Line-height, font-family (font-family may be filtered)

4. Note that tables do not inherit attributes such as external fonts, so be sure to define font properties and colors on each <td> element.

5, the processing of the background is not allowed to use style= "Background:url (http:/...)", please use the properties of <td> (attribute) background= "http://...". (because a CSS background picture is a definition that affects page rendering speed, most web mail systems filter it.) ) Background color, also use the BgColor property of the table. In the actual use, as far as possible do not appear background map, above the text processing structure. It is recommended that the text be composited onto the image and then loaded onto the tab.

6. Avoid trying to align the elements of two Table-cell, if an element is defined with a specific width (width= "100″), and the other element is positioned as a percentage (width=" 50% ")

7. Avoid using List-style to handle list styles, use the "•" characters instead.

8. Prohibit the use of position, background, float

9, the use of margin:margin to be very cautious, do not allow the use of margin as an important layout basis, do not allow the use of negative margin, avoid the use of non-zero and non-auto margin properties.

10, <a> on the body definition style= "WIDTH:APX; Margin:auto ".  Note that in web Mail, a <div style= "WIDTH:APX is automatically generated for you; Margin:auto "> elements at the outermost layer.  (You can use this feature effectively, define styles like background color, and implement other possible things) instead of trying to add an <div> element with Margin:auto to the outermost layer of the message template. <b> Use <center>

11. To use the full 6 full hexadecimal encoding, if three characters are used, not always valid

　　

e-mail Templates--Development articles