Use HTML to write a simple email template

Today, I want to write about a "low-tech" problem.

By the way, I subscribe to quite a few newsletters, such as JavaScript Weekly. Get a weekly email with the week's big news.

One day, I was thinking, could I also make an email like this?

Then, I realized it wasn’t that easy. Putting aside the backend and editing work, just designing an email template requires a lot of thought.

Because this formatted email is actually a web page, its official name is HTML Email. Whether it can be displayed properly depends entirely on the email client. Most email clients (such as Outlook and Gmail) will filter HTML settings, making emails unrecognizable.

I found that the trick to writing HTML emails is to use the same methods used to create web pages 15 years ago. Here is the writing guide I put together.

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.

Using this Doctype means that HTML5 syntax cannot be used.

2. Layout

The layout of a web page must use a table. First, place a large outer table to set the background.

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

On the inner layer, place the second table. Used to display content. The width of the second table is set to 600 pixels to prevent it from exceeding the client's display width.

Set as many rows as the email content has.

3. Images

Images are the only external resources that may be cited. Other external resources, such as style sheet files, font files, video files, etc., cannot be referenced at all.

Some clients will add borders to image links, so you need to remove them.

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

4. Inline styles

All CSS rules are best used inline. Because the style placed in the header of the web page is likely to be deleted by the client. For client support for CSS rules, please see here.

Also, do not use CSS abbreviations, as some clients do not support them. For example, instead of writing:

If you want to express

To write it like this:

5. W3C Validation and Testing Tools

To ensure that the final code can pass the W3C check, because some clients will strip unqualified attributes. Also use the test tools (1, 2, 3) to see the display results on different clients.

When sending HTML Email, don't forget that the MIME type cannot be used

Instead, use

For sending tools, consider using MailChimp and Campaign Monitor.

6. Templates

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

If you want to develop your own, you can refer to HTML Email Boilerplate and Emailology.