What is an HTML mail template?

Email template is an email editing method that uses front-end technology to generate desired email pages by writing HTML files when email systems such as Outlook support HTML parsing format.

In simple terms, write email like you write a web page. At present, we have received the periodical subscription pushed by Zhihu and other websites, the process notification of jingdong and other shopping websites, the job push of 51JOB and other recruitment websites, and the network expansion of LinkedIn and other social networking websites in 163 and other mailboxes, all of which are achieved through email templates.

Of course, the use of email templates can be divided into manual rewriting (suitable for mass mailing of fixed content) and automatic editing and distribution of background system (suitable for feedback, content changes with different users) and other ways.

What are the advantages of HTML mail templates?

1, typesetting complexity: using the advantages of front-end rendering processing complex pages, compared with writing a Word document using front-end technology to write complex typesetting pages, can achieve a lot of rich results;

2, reusable: because the front-end HTML file is a structured document, the resulting page is generated by parsing the document. Modifying a structured document allows you to focus more on content and less on style than modifying visual documents like Word. Because the style is in our structure, simply changing or adding or removing code blocks according to the topology can be presented according to the style rules we have written. Word had to tweak the style after it was written, which took a lot of effort. With the front-end engineer implementing multiple sets of common templates, users can easily assemble content and templates on demand, and a rich email is born.

3. Compatibility: Use Office to edit documents, often appear in office2010 written documents, in 2007 or 2003 when opened (high version edit, low version view) format mismatch incompatible phenomenon, ordinary mail in the simple text format is better, but more complex document problems will be more obvious, We don’t have the energy to remember which formats are compatible and which aren’t. But editing with HTML skips the issue of the Office version, because the international HTML standard does not belong to Office, and parsing of HTML should follow the W3C standard regardless of office version.

4, style and content separation: front-end development is responsible for template style and HTML structure definition, once defined, users to a large extent do not need to deal with style, fill in the content can be written. By delegating some of the work to the front end engineers, the efficiency of writing emails can be improved to some extent.

HTML mail template development encountered a pit

html:

1,! Doctype declaration: For forward compatibility and to avoid some browser quirks, use HTML5! Doctype declaration in the following format:

2. There is no need to consider DOM node simplification and structure optimization. Finish the design style as the top priority. Don’t skimp on table nesting when necessary, and don’t skimp on empty table elements to occupy space.

3. Use

layout as far as possible for the main page, including details.

4. It is not allowed to define CSS styles on elements. Try to define styles on < TD > elements. (Mail clients like Gmail filter properties on )

5. Do not use

6. Do not use to load external CSS

You can use

8, pay attention to the definition of image replacement text (Alt), and the color of the replacement text.

CSS:

1. Take advantage of the table’s private properties for layout. Width, height, BGcolor, background, align, valign etc

2. When writing HTML, think about whether the main content of your page is still accessible to users when all images are blocked. Be sure to define the background color on all elements where you want to set the background image.

3. Word processing. Font * CSS attributes do not allow abbreviations. Please define font size, font weight, line-height, and font family separately.

4. Note that tables do not inherit external attributes such as font; be sure to define font attributes and colors on each < TD > element.

5. Style = “background:url(http://http://… “, use < TD > attribute background= “http://… . (Since A CSS background image is a definition that affects page rendering speed, most Web mail systems filter it.) For the background color, also use the bgColor attribute of the table. In practice, the background image should not appear as much as possible, with the text processing structure above. It is recommended that you compose the text onto the image and then load it onto the < IMG > tag.

6. Avoid trying to align two table-cell elements if one element is defined with a specific width (width= “100”) and the other element is positioned with a percentage (width= “50%”).

7. Avoid using list-style for list styles, use the “•” character instead.

8. Disallow position, background, and float styles

9. Margin: Be very careful with margin. Don’t use margin as an important layout basis, don’t use negative margin, and avoid non-zero and non-auto margin attributes.

10. < p style= “width:apx; Margin: auto “.

    < span style =” box-sizing: border-box; (You can take advantage of this feature to define styles like background colors, among other things.) Don’t try adding a

    element with margin: Auto on the outermost layer of your mail template yourself. < b > using < center >

11. To use the full six full hexadecimal codes, if three abbreviated characters are used, it is not always valid

Email template security label

• <table>, <td>, <tr>
• <div>, <span>, <a>, <img>

The content that can be added to the message header

<style type="text/css">
      * {
        text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }

      html {
        height: 100%;
        width: 100%;
      }

      body {
        height: 100% ! important;
        margin: 0 ! important;
        padding: 0 ! important;
        width: 100% ! important;
        mso-line-height-rule: exactly;
      }

      div[style*="margin: 16px 0"] {
        margin: 0 ! important;
      }

      table.td {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }

      img {
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }

      .ReadMsgBody..ExternalClass {
        width: 100%;
      }

      .ExternalClass..ExternalClass p..ExternalClass span..ExternalClass td..ExternalClass div {
        line-height: 100%;
      }
    </style>
    
    
    <style>
      _media screen and (max-width:620px) {
        #outer_container {
          border-radius: 0 ! important;
          margin-top: 0 ! important;
          padding: 0 32px ! important;
        }
      }

      _media screen and (max-width:420px) {
        .column.table__key .text,
        .column.table__val .text {
          font-size: 12px;
        }
        .table__key..table__val {
          font-size: 12px;
        }
      }

      _media screen and (max-width:450px) {
        .icon-box {
          display: none;
        }
        .icon-box--in-small {
          display: block;
        }
      }

      _media screen and (min-width:451px) {
        .icon-box {
          display: block;
        }
        .icon-box--in-small {
          display: none;
        }
      }
    </style>
    <style>
      .a {
        outline: 0;
        font-size: 16px;
        border: 0;
        color: #139AF9;
        text-decoration: none;
      }

      .a .a__text {
        color: #139AF9;
        text-decoration: none;
      }

      .a:hover {
        color: #0D6CAE;
        text-decoration: underline;
      }

      .a:hover .a__text {
        color: #0D6CAE;
        text-decoration: underline;
      }

      .a:visited {
        color: #470DAE;
      }

      .a:visited .a__text {
        color: #470DAE;
      }
    </style>
Copy the code

tips

• Netease mailbox and other switch source code function can be tested under the source code function oh, more real than open in the browser

• Open the mail sent to us by others to view the source code, can be used to see, copy ~

Must open article: css-tricks.com/using-css-i…

link

• Email Template — Popular Science (Front end — Guo Rui)www.cnblogs.com/webARM/p/52…
• Mail Templates — Basics (Front end — Guo Rui)www.cnblogs.com/webARM/p/52…
• Mail Template — Development (Front end — Guo Rui)www.cnblogs.com/webARM/p/53…