Home > Developer > Web Develop
Original address
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. DoctypeAt 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. LayoutA 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. PictureA 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 styleFor 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:
5. Verification and testing tools<p style= "MARGIN-TOP:1EM; Margin-bottom:1em; margin-left:0; margin-right:0; " >
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. TemplatesUsing 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 LinksFor 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
Finish
Reproduced HTML Email Authoring Guide
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
