search

Home >Web Front-end >HTML Tutorial >Use HTML to write simple email templates_HTML/Xhtml_Web page production

Use HTML to write simple email templates_HTML/Xhtml_Web page production

WBOY
WBOYOriginal
2016-05-16 16:36:252212browse

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

I have subscribed to a lot of newsletters, such as JavaScript Weekly. Get a weekly email with the big stories of the week.
2015712153636746.jpg (349×460)

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

Then, I found that it was not that easy. Putting aside the background and editing work, just designing an Email template requires a lot of thought.
2015712153840405.jpg (550×671)

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

I found that the trick to writing HTML emails is to use the web page creation method from 15 years ago. Below 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.

XML/HTML CodeCopy content to clipboard
  1. > 
  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 Guidetitle>
  11. 　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  13. 　head>
  15. html>

Using this Doctype means that HTML5 syntax cannot be used.

　2. Layout

The layout of the web page 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;">  
  2.   
  3. 　<table border="1" cellpadding="0" cellspacing="0" width="100%">  
  4.   
  5. 　　<tr>  
  6. 　　　<td> Hello! td>  
  7. 　　tr>  
  8.   
  9. 　table>  
  10.   
  11. body>  

　　表格的 border 属性等于1, 是为了方便开发。正式发布的时候，再把这个属性设为0。

　　在内层，放置第二个表格。用来展示内容。第二个table的宽度定为600像素，防止超过客户端的显示宽度。

XML/HTML Code复制内容到剪贴板
  1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">  
  2.   
  3. 　<tr>  
  4. 　　<td> Row 1 td>  
  5. 　tr>  
  6.   
  7. 　<tr>  
  8. 　　<td> Row 2 td>  
  9. 　tr>  
  10.   
  11. 　<tr>  
  12. 　　<td> Row 3 td>  
  13. 　tr>  
  14.   
  15. table>  

　　邮件内容有几个部分，就设置几行（row）。

　　3. 图片

　　图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。

　　有些客户端会给图片链接加上边框，要去除边框。

CSS Code复制内容到剪贴板
  1. 　　img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}   
  2.   
  3. 　　a img {border:none;}   
  4.   
  5. 　　border="0" style="display:block;">  

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 style

It is best to use inline styles for all CSS rules. Because the styles placed in the head of the web page are likely to be deleted by the client. For client support for CSS rules, please see here.

In addition, do not use the abbreviation form of CSS, some clients do not support it. For example, don’t write something like this:

　

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 "margin: 1em 0;"> It should be written as follows:
    2. 　

XML/HTML Code

Copy content to clipboard

<
p
  1. style="margin-top: 1em ; margin-bottom: 1em; margin-left: 0; margin-right: 0;"> 5. W3C checksum testing tool
It is necessary to ensure that the final code can pass W3C verification, because some clients will strip off unqualified attributes. Also use the testing tool (
1

, 2,

3

) to view the display results on different clients. When sending HTML Email, don’t forget that the MIME type cannot be used  

XML/HTML Code

Copy content to clipboard

Content-Type: text/plain;
  1. Instead use
    2. 　

XML/HTML Code

Copy content to clipboard

Content-Type: Multipart/Alternative;
  1. For sending tools, consider using MailChimp
    2. and
Campaign Monitor
.

6. Template Using templates that others have already made is a good choice (here and here), and you can find more online.

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

Emailology

.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to the differences between HTML and XHTML, and HTML4 and HTML5 tags_HTML/Xhtml_Webpage ProductionNext article：Introduction to the differences between HTML and XHTML, and HTML4 and HTML5 tags_HTML/Xhtml_Webpage Production

Related articles

See more