HTML Email Authoring Guide

Source: Internet
Author: User
Tags vcard

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)

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.