Write a simple mail template using HTML


Today, I want to write a “low-tech” question.

So I subscribed to a lot of newsletters, like JavaScript Weekly. Receive an email every week to learn about this week’s events.
2015712153636746.jpg (349×460)

One day, I was thinking, can I also do such an email?

Then, I found it was not so easy. Despite the background and editorial work, it takes a lot of thought to design an email template.
2015712153840405.jpg (550×671)

Because this formatted email is actually a web page, officially called HTML Email. Whether it can be displayed properly depends entirely on the mail client. Most mail clients (such as Outlook and Gmail) filter HTML settings to make the message completely different.

I have found that the trick to writing HTML Email is to use the method of making web pages 15 years ago. Here is my compilation guide.

  1. Doctype

Currently, the most compatible Doctype is XHTML 1.0 Strict. In fact, Gmail and Hotmail will delete your Doctype and replace it with this Doctype.

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  3. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  5.  <head>  
  7.   <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />  
  9.   <title>HTML Email Writing Guide</title>  
  11.   <meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>  
  13.  </head>  
  15. </html>  

Using this Doctype means that HTML5 grammar cannot be used.

2. layout

Page layout must use tables. First, place a large outermost table to set the background.

XML/HTML CodeCopy content to clipboard
  1. <body style=“margin: 0; padding: 0;”>  
  3.  <table border=“1” cellpadding=“0” cellspacing=“0” width=“100%”>  
  5.   <tr>  
  6.    <td> Hello! </td>  
  7.   </tr>  
  9.  </table>  
  11. </body>  

The border attribute of the table is equal to 1, which is for the convenience of development. When officially released, set this property to 0.

Inside, place the second table. Used to display content. The width of the second table is set at 600 pixels to prevent it from exceeding the display width of the client.

XML/HTML CodeCopy content to clipboard
  1. <table align=“center” border=“1” cellpadding=“0” cellspacing=“0” width=“600” style=“border-collapse: collapse;”>  
  3.  <tr>  
  4.   <td> Row 1 </td>  
  5.  </tr>  
  7.  <tr>  
  8.   <td> Row 2 </td>  
  9.  </tr>  
  11.  <tr>  
  12.   <td> Row 3 </td>  
  13.  </tr>  
  15. </table>  

There are several parts of the mail content, just set up a few rows.

3. pictures

Pictures are the only external resources that can be referenced. Other external resources, such as stylesheet files, font files, video files, etc., cannot be referenced.

Some clients add borders to picture links to remove borders.

CSS CodeCopy content to clipboard
  1.   img {outline:nonetext-decoration:none; -ms-interpolation-mode: bicubic;}   
  3.   a img {border:none;}   
  5.   <img border=“0” style=“display:block;”>  

It should be noted that many clients do not display pictures by default (such as Gmail), so make sure that even without pictures, the main content can be read.

 4. In-line Style

All CSS rules, it is best to use in-line style. Because of the style placed in the head of the page, it is likely to be deleted by the client. Client support for CSS rules, see here.

In addition, do not use the abbreviated form of CSS, some clients do not support it. For example, don’t write as follows:


XML/HTML CodeCopy content to clipboard
  1. style=“font: 8px/14px Arial, sans-serif;”  

If you want to express


XML/HTML CodeCopy content to clipboard
  1.  <p style=“margin: 1em 0;”>  

Write as follows:


XML/HTML CodeCopy content to clipboard
  1. <p style=“margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;”>  

5. W3C Verification and Testing Tools

To ensure that the final code can pass the W3C verification, because some clients will strip the substandard attributes. Test tools (1, 2, 3) are also used to view the display results on different clients.

When sending HTML Email, don’t forget that MIME types are not available


XML/HTML CodeCopy content to clipboard
  1.  Content-Type: text/plain;  

And to use


XML/HTML CodeCopy content to clipboard
  1. Content-Type: Multipart/Alternative;  

Sending tools can consider using MailChimp and Capaign Monitor.

6. template

It’s a good choice (here and here) to use the templates that others have already made, and you can find more online.

If you develop it yourself, you can refer to HTML Email Boilerplate and Emailology.