The cause of the matter is that the operation needs to push various kinds of activity emails to users, so the product assigns the requirements of realizing email templates to me to complete. Therefore, we can fulfill the requirements when there is demand. At first I thought it was really good, not just a static page, just brush it, and then send out various compatibility problems, fortunately, just test the email, otherwise it will explode. Sure enough, things are not as simple as imagined. I found that the preparation of HTML mail template is still a little knowledge in the end of the article with “HTML mail related resources recommended”.

Write the premise

To write an HTML mail template, start with the following prerequisites

  1. “The email content is displayed on third-party platforms“
  2. “Mail parsers are old” These are two premises that we need to be aware of when writing HTML mail. Based on these premises and the summary on the web, I have the following points to note:

1. Use the Table layout mode

According to Prerequisite 2, if you do not know which third-party email platform the email will be displayed on, you can only use the most conservative layout, that is, the table layout. This layout method is the early web page more popular way, the advantage is very obvious, compatibility invincible

2. Pay attention to compatibility and try to have alternatives

Again, prerequisite 2, try to avoid using CSS3 syntax, there is a high possibility of failure, so how to determine compatibility, attached at the end of the article authentication tools. In some cases (and yes, there are many) where you want to go with the current design even though it’s not compatible with the design and product feedback, try to use some alternatives. For example:

/* Background: #00A9BA; /* Background: Linear gradient(90deg, #52D6CE 0%, #00A9BA 100%); /* Background: Linear gradient(90deg, #52D6CE 0%, #00A9BA 100%);Copy the code

4. Inline styles take precedence

The reason why in-line style is preferred is that when third-party email platforms display email content, they may remove the head and style tags of email templates. If the styles are stored in the same style tag, the template will be in disorder. So, when writing mail templates, try to use inline style implementations. If there are special cases where you have to use the style tag to handle the class of a responsive email, then you need to have a backup compatibility solution, such as displaying the style first on the mobile side and displaying the content on the PC side through media query. Of course, it is best to communicate with the designer before designing (fog)

5. Don’t have positioning

A compatibility check shows that the Position property is largely unsupported by mainstream mail clients and is best left out. What is the specific reason we haven’t found? What we can guess here is that if we open position, the content of the email client may be blocked, which is also very embarrassing

6. No JavaScript!

Needless to say, all mail cannot execute Javascript code for security reasons. So if your product requires you to script your email, the best thing to do is to go to your own website and do it accordingly.

7. Place the element in the body

Placing the content and style of the layout inside the body tag prevents third-party clients from deleting the header and leaving only the body tag. One thing to note here is that if there is a special case for the style tag, it is more likely to remain in the body.

End

Save manual preparation is the most reliable and the most troublesome method, depending on the actual situation, the realization of the email also need to communicate with the product and design when necessary, do not let the design unconstrained to do, or the trouble is the front end (pulling skin trouble). The advantage of this type of framework is that you don’t need to write too much, and the disadvantage is that you have to learn an almost new language

  • MJML: mjml.io/
  • emailframe emailframe.work/
  • Foundation for Emails 2: [foundation.zurb.com/e…] (a)
  • Responsive HTML Email template: github.com/leemunroe/r…
  • campaignmonitor：www.campaignmonitor.com/a/

This article is formatted using MDNICE