Home > Developer > Web Develop
Nanyi
Date: June 16, 2013
Today, I want to write a "low-tech" question.
I've subscribed to a lot of news mails (Newsletter), such as JavaScript Weekly. Get an email every week to see what's happening this week.
One day, I was thinking, is it possible for me to make such an email?
Then, it's not so easy to find out. Aside from backstage and editorial work, designing an email template alone requires a lot of thought.
Because this kind of formatted mail, is actually a webpage, official name is called HTML Email. Whether it displays properly depends entirely on the mail client. Most mail clients, such as Outlook and Gmail, filter HTML settings to make the message unrecognizable.
I found that the trick to writing HTML email was to use the Web authoring method 15 years ago. Here is the compilation guide I've compiled.
1. Doctype
At present, the best compatibility doctype is XHTML 1.0 Strict, in fact, Gmail and Hotmail will delete your doctype, put on this doctype.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>html Email Authoring Guide </title>
<meta name= "viewport" content= "width=device-width, initial-scale=1.0"/>
Using this DOCTYPE also means that you cannot use the HTML5 syntax.
2. Layout
A table (table) must be used for layout of the Web page. First, place a large, outermost table to set the background.
<body style= "margin:0; padding:0; " >
<table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" >
<tr>
<td> hello! </td>
</tr></table>
</body>
The border property of the table is equal to 1 and is intended for easy development. When you are officially released, set this property to 0.
In the inner layer, place a second table. Used to display content. The width of the second table is set to 600 pixels, preventing the client from exceeding the display width.
<table align= "Center" border= "1" cellpadding= "0" cellspacing= "0" width= "" style= "Border-collapse:collapse" >
<tr>
<td> Row 1 </td>
</tr><tr>
<td> Row 2 </td>
</tr><tr>
<td> Row 3 </td>
</tr></table>
There are several parts to the message content, and a few lines (row) are set.
3. Picture
A picture is the only external resource that can be referenced. Other external resources, such as style sheet files, font files, video files, etc., cannot be referenced.
Some clients will add a border to the picture link, to remove the border.
img {outline:none; text-decoration:none;-ms-interpolation-mode:bicubic;}
a img {border:none;}
It is important to note that many clients do not display images by default (such as Gmail), so make sure that even if there are no pictures, the main content can be read.
4. Inline style
For all CSS rules, it is best to use inline styles. Because the style placed in the head of the Web page is likely to be deleted by the client. Client support for CSS rules, see here.
In addition, do not use the shorthand form of CSS, some clients do not support. For example, do not write the following:
Style= "font:8px/14px Arial, Sans-serif;"
If you want to express
<p style= "Margin:1em 0;" >
It should be written as follows:
<p style= "MARGIN-TOP:1EM; Margin-bottom:1em; margin-left:0; margin-right:0; " >
5. Verification and testing tools
To ensure that the final code can be verified by the net, because some clients will be the unqualified attribute stripping. Also use the test tool (1, 2, 3) to see the results displayed on different clients.
When sending an HTML email, don't forget that MIME type cannot be used
Content-type:text/plain;
and to use
content-type:multipart/alternative;
The Send tool can consider using MailChimp and Campaign Monitor.
6. Templates
Using templates that others have already done is a good choice (here and here), and you can search for more online.
If you develop your own, you can refer to HTML Email boilerplate and emailology.
7. Reference Links
For further research, please refer to the following article.
-Sean Powell,say Hello to the HTML Email boilerplate
-Nicole Merlin,build an HTML e-mail Template from Scratch
-Nicole Merlin, what are should Know about HTML Email
HTML Email Authoring Guide (GO)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
