优搜网

HTML邮件(HTML Email)编写指南

HTML邮件(HTML Email)编写指南

由于HTML邮件不是独立的HOST在本站的页面,是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大的不同。因为,各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问,JS代码是被严格过滤掉的,包括所有的事件监听属性,如onclick、onmouseover,这是基于邮件安全性的考虑。不仅如此,CSS代码也会被部分过滤。

有一天,我就在想,是不是我也能做一个这样的邮件?

然后,就发现这事不那么容易。抛开后台和编辑工作,单单是邮件设计,就需要不少心思。

因为这种带格式的邮件,其实就是一张网页,正式名称叫做HTML Email。它能否正常显示,完全取决于邮件客户端。大多数的邮件客户端(比如Outlook和Gmail),会过滤HTML设置,让邮件面目全非。

我发现,编写HTML Email的窍门,就是使用15年前的网页制作方法。下面就是我整理的编写指南。

1. Doctype

目前,兼容性最好的Doctype是XHTML 1.0 Strict,事实上Gmail和Hotmail会删掉你的Doctype,换上这个Doctype。

  1. <html xmlns=”http://www.w3.org/1999/xhtml”>
  2.  <head>
  3.   <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
  4.   <title
  5. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  6. <title>HTML邮件(HTML Email)编写指南</title>
  7.   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
  8.  </head>
  9. </html>

使用这个Doctype,也就意味着,不能使用HTML5的语法。

2. 布局

网页的布局(layout)必须使用表格(table)。首先,放置一个最外层的大表格,用来设置背景。

  1. <body style=”margin: 0; padding: 0;”>
  2.  <table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
  3.   <tr>
  4.    <td> Hello! </td>
  5.   </tr>
  6.  </table>
  7. </body>

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

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

  1. <table align=”center” border=”1″ cellpadding=”0″ cellspacing=”0″ width=”600″ style=”border-collapse: collapse;”>
  2.  <tr>
  3.   <td> Row 1 </td>
  4.  </tr>
  5.  <tr>
  6.   <td> Row 2 </td>
  7.  </tr>
  8.  <tr>
  9.   <td> Row 3 </td>
  10.  </tr>
  11. </table>

邮件内容有几个部分,就设置几行(row)。

3. 图片

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

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

  1.   img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
  2.   a img {border:none;}
  3.   <img border=”0″ style=”display:block;”>

需要注意的是,不少客户端默认不显示图片(比如Gmail),所以要确保即使没有图片,主要内容也能被阅读。

4. 行内样式

所有的CSS规则,最好都采用行内样式。因为放置在网页头部的样式,很可能会被客户端删除。客户端对CSS规则的支持情况,请看这里

另外,不要采用CSS的简写形式,有些客户端不支持。比如,不要写成下面这样:

  1.   style=”font: 8px/14px Arial, sans-serif;”

如果想表达

  1.   <p style=”margin: 1em 0;”>

要写成下面这样:

  1.   <p style=”margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;”>

5. W3C校验和测试工具

要保证最终的代码,能够通过W3C的校验,因为某些客户端会把不合格属性剥离。还要使用测试工具(123),查看在不同客户端的显示结果。

发送HTML Email的时候,不要忘记MIME类型不能使用

  1.   Content-Type: text/plain;

而要使用

  1.   Content-Type: Multipart/Alternative;

发送工具可以考虑使用 MailChimp 和 Campaign Monitor 。

6. 模板

使用别人已经做好的模板,是一个不错的选择(这里这里),网上还可以搜到更多

自己开发的话,可以参考HTML Email BoilerplateEmailology

7. 参考链接

进一步研究,请参考下面的文章。

- Sean Powell,Say Hello to the HTML Email Boilerplate
- Nicole Merlin,Build an HTML Email Template From Scratch
- Nicole Merlin, What You Should Know About HTML Email

下面列出一些编写HTML邮件原则:

1、全局规则之一,不要写<style>标签、不要写class,所有CSS都用style属性,什么元素需要什么样式就用style写内联的CSS。

2、全局规则之二,少用图片,邮箱不会过滤你的img标签,但是系统往往会默认不载入陌生来信的图片,如果用了很多图片的邮件,在片没有载入的情况下,丑陋无比甚至看不清内容,没耐心的用户直接就删除了。图片上务必加上alt。

3、不要在style里面写float、position这些style,因为会被过滤。那么如何实现左右布局或者更复杂的布局呢?用table。

4、style内容里面background可以设置color,但是img会被过滤,就是说不能通过CSS来设置背景图片了。但是有一个很有意思的元素属性,也叫background,里面可以定义一个图片路径,这是个不错的替代方案,虽然这样功能有限,比如无法定位背景图片了,有总比没有好。例如要给 一个单元格加一个背景,必须这样写:
<td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>

5、div模式的邮箱不支持flash,iframe模式的有待验证。

最后提一句,sohu的邮箱很怪异,会在每个文本段后面加一个空格,导致原本正常的排版一行放不下而换行,从而使某些布局错乱。所以,如果你要兼容sohu邮箱的话,遇到一些紧凑的布局就要格外小心了,尽量减少文本段的数量,留足宽度。


优搜网-网站优化,从SEO到互联网营销,提供最优的网站优化解决方案
优搜网,从SEO到互联网营销,为您提供最优的网站优化解决方案。提供网站优化,百度优化,关键词排名,百度推广,服务器租用托管及高权重(pr)域名转让业务。
关于uiseo.cn

本文分类: SEO技术

发布时间: 2014年04月28日 21:30

本文链接: http://www.uiseo.cn/html-email

继续查看有关:/ / / / 的文章

若无特别注明,文章皆为优搜网原创,转载请注明出处


文章评论
共收到 2 条评论
广告招租