1. What is an html email template?

Email template is an email editing method that uses front-end technology to generate the desired email page through writing under the condition that email systems such as Outlook support the HTML parsing format HTML文件, thereby assisting in writing emails.

simply put,

Just write an email just like you would write a web page. Currently we receive it in mailboxes such as 163

Subscription journals pushed by Zhihu and other websites
Process notifications from shopping websites such as JD.com
Job promotions from recruitment websites such as 51JOB
Network development on social networking sites such as LinkedIn

These are all implemented through email templates.

Of course, the use of email templates is divided into

Manual rewriting (applicable to fixed content mass distribution)
The background system automatically edits and distributes (applicable to feedback and content that changes with different users)
...

and many other ways.

2. What are the advantages of html email templates?

2.1 Complicated typesetting:

Using the advantages of front-end rendering to process complex pages, compared to writing a word document and using front-end technology to write complex page layouts, the effects that can be achieved are much richer;

2.2 Reusable:

Because the front-end HTML file is a structured document, the generated page is generated by parsing the document.

Compared with modifying a visual document like Word, modifying a structured document allows you to focus more on the content without having to pay too much attention to the style. Because the style is in our structure, as long as we modify or add or delete code blocks according to the topology, it can be displayed according to the style rules we have written.

After writing the content in Word, we still have to adjust the style, which consumes a lot of energy on our part.

Front-end engineers have implemented multiple sets of common templates, and users can simply assemble content and templates as needed, and a content-rich email is born.

2.3 Compatibility:

When using office to edit documents, documents written in office 2010 often appear to be incompatible formats when opened in 2007 or 2003 (higher version for editing, lower version for viewing). Usually, simple text formats in ordinary emails are better, but more complicated. The documentation problem will be more obvious.

How can we have the energy to remember which formats are compatible and which are incompatible?

However, using HTML editing will skip the issue of office version, because the international standard of HTML does not belong to office. No matter which office version, the parsing of HTML should follow the W3Cstandards.

2.4 Separation of style and content:

Front-end development is responsible for defining the style and HTML structure of the template. Once defined, users do not need to deal with the style to a large extent, and can write by filling in the content.

Since part of the work is handed over to front-end engineers, the efficiency of writing emails will be improved to a certain extent.

3. Pitfalls encountered in HTML email template development

3.1 HTML considerations　

1. !Doctype declaration: In order to be forward compatible and avoid some browser quirks, use html5's !doctype declaration, the format is as follows:

2. There is no need to consider the simplification of DOM nodes and the optimization of structure. The highest priority is to complete the design style. When necessary, don't be stingy with table nesting, and don't be stingy with using empty table elements to take up space.

3. For the main page, including detail processing, try to use <table>layout.

4. It is not allowed <tr>to define CSS styles on elements, please try to define styles on <td>elements. (Mail clients such as Gmail will filter <tr>the above attributes)

5. It is forbidden to use it <style type=”text/css”>to process the main style. All web mail systems will filter this tag. Therefore, pseudo classes, pseudo elements, and advanced selectors cannot be used in email templates.

6. It is forbidden to use <link>to load external CSS

7. <div>Layout styles with typical block-level elements (blocks) can be used to implement details. And try to avoid using it <p>, because it is not easy for us to clear <p>the default style in different browsers

8. Pay attention to define the replacement text ( alt) of the picture and the color of the replacement text.

3.2 CSS considerations　

Make full use of the private properties of the table for layout. width, height, bgcolor, background, align, valignwait
When writing HTML, please think about whether users can still understand the main content of the page when all the images on your page are blocked. Be sure to define a background color on all elements where you want to set a background image.
Word processing. font-*Abbreviations are not allowed for family CSS properties, please define them separately font-size, font-weight, line-height, font-family( font-familythey may be filtered)
Note that the table does not inherit external fontattributes, be sure to <td>define font attributes and colors on each element.
Background processing is not allowed style=”background:url(http://…)”, please use <td>the attribute background=“http://…”. (Since a CSS background image is a definition that affects page rendering speed, most webmail systems filter it.) For background color, also use the table's bgcolor property. In actual use, try to avoid background images with text processing structures on them. It is recommended to combine the text into the image and then load it into <img>the label.
Avoid trying to table-cellalign two elements if, one element is defined with a specific width ( width=”100″) and the other is positioned with a percentage ( width=”50%”)
Avoid using this list-styleto handle list styles, use the " •" character instead.
positionUse of , background, floatstyle is prohibited
margin: marginshould be used with great caution. It is not allowed to be used marginas an important layout basis. Negative values are not allowed margin. Avoid using non-zero and non autoattributes margin.
<a>bodyDefined above style=”width:apx; margin:auto”. Note that in Webmail, an <div style=”width:apx; margin:auto”>element is automatically generated for you on the outermost layer. (You can take advantage of this feature to define styles such as background colors, and other possibilities.) Instead of trying to add an element with on the outermost layer of the email template margin:autoyourself <div>. <b>use<center>
To use the full 6 full hex encoding, it doesn't always work if you use three abbreviation characters

3.3 Email template security label

<table>、<td>、<tr>
<div>、<span>、<a>、<img>

3.4 Contents that can be added to the email 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>

4. Tips

NetEase mailboxes, etc. have the function of switching source code. You can test and verify under the source code function.

More realistic than opening it in a browser!!!

Open the emails sent to us by others to view the source code, which can be used for reference and copying~

How to write HTML email template on the front end