创建坚如磐石的HTML邮件

标签： 网页重构 | 发表时间：2013-02-18 15:31 | 作者：Alon Guo
出处：http://ued.sina.com.cn

这是一篇来自于 Campaign Monitor 如何制作HTML邮件系列文章中的一篇，里面针对的邮件客户端主要是对英语用户的，虽然和国内的市场情况有很大的差异，但是他们的思路我们可以参考，如果需要全部的内容，大家可以访问他们的站点：http://www.campaignmonitor.com/resources/will-it-work/

在你的职业生涯的某个阶段，你的客户可能会提出让你设计HTML邮件的需求。在你着急给客户解释所使用的炫酷的社会化媒体前，请记住，如果操作得当，邮件依然是提升你和客户的在线营销方式。一项最近的调查显示，你每在邮件营销上花费1美元，你将会产生40美元以上的回报。这远远高于其它的市场渠道，包括一些听着很酷的方式。

一个好的邮件营销策略的成功取决于很多因素。许可、相关性、持续性和引人入胜的内容都非常重要。即使上面的因素都考虑到了，对于设计师来说最大的挑战是如何让邮件在广大受欢迎的客户端上完美的渲染。

幸福的家庭都是相似的,不幸的家庭各有各的不幸.

在我们进入细节之前，这里有些我们在设计HTML邮件必须意识到的因素。制作一封邮件和制作web页面还是有很大不同的。当不同的浏览器都在不断向标准靠近的同时，大多数邮件客户端却止步不前，甚至有一些是在退步的。在2007年，Microsoft 将 Outlook 的渲染引擎从 IE 转换成 Word的渲染方式。确实是这样的，看上去像一个文字处理器。而一些基于web的邮件客户端，像Gmail和Hotmail，则增加了一些怪异的模式，还有Lotus Notes的一些技巧，现在你能意识到在不同的客户端有其自己的“潜规则”。

虽然这些不是挑战，我们会一一搞定他们。根据我的经验来看，我们解决这些问题的关键是要关注下面三件事情。首先，保持简单，你的邮件设计的越复杂，你的邮件在某个受欢迎的、不支持标准的客户端上“抽风”的可能性就越大。其次，你需要将你的编码技巧退步十年，这通常意味着我们使用嵌套的表格，将CSS写成内联的形式，还有一些编码规范我将在下面为大家一一呈现。最后你需要对你的设计进行规律性的测试，也许一个模板在Hotmail在今天考到的是好，一周之后就面目全非了。

设置你的最小公分母

保持理智，当我们制作一封HTML邮件时确认支持哪些客户端是一个很好的决策。下面通用的调查是很有帮助的，你的电子邮件客户端的不同之处可以很方便的分辨出来。如果你有足够的时间，这里有些工具可以让你知道你的邮件订阅者使用的是哪些邮件客户端。相信我，如果你的测试结果显示基本上没有人使用Lotus Notes,这样你就可以忽视那些挫折和迷惑了。

弄清楚了你所针对的邮件客户端，不仅可以是邮件制作的流程变得简单，同时也能大大节省你的测试周期。我写这篇文章的目的，就是想和大家分享针对这些流行的客户端作出最优的结果，包括声名狼藉的Gmail,Lotus Notes 6 和 Outlook 2007.请记住，在不同邮件客户达到像素级的完美无异于痴人说梦。

让我们走起。

使用表格布局

因为诸如Gmail和Outlook 2007 无法支持浮动(float)、外边距(margin)、内填充（padding）,你需要使用表格来作为你的邮件的框架。虽然表格嵌套的方法被广泛支持，但是在对单元格的宽度、外边距和内填充的处理方法并不一致。为了达到最优的效果，当制作表格结构时，请记住下面的技巧。

为每个单元格设置宽度，而不是表格

当你把表格宽度、td 宽度、td的填充和CSS的填充写到一封邮件时，你看到的结果可能是每个邮件客户端它们看上去都不一样。最可靠的方法是我们将为表格的每个单元格(th,td)设置宽度，而不是表格(table)本身。

<table cellspacing="0" cellpadding="10" border="0">
	<tr>
		<td width="80"></td>
		<td width="280"></td>
	</tr>
</table>

永远别指望邮件客户端能够计算出你没有指定宽度的单元格的宽度。它绝对不会。同时也要避免使用基于百分比的宽度，像 Outlook 2007 这样的客户端从来不考虑这种宽度方式，特别是这些嵌套的表格。像素级视觉，如果你想对每个单元格做填充，可以使用表单的单元格填属性或者用CSS的内填充，但是不要这两种一起使用。

嵌套迷思

表格的嵌套相对于设置左右浮动和外边距(margin)或者表单单元格填充的方法更加稳固。如果你能使用这种表格嵌套的方法达到相同的效果，这将会给你在那些蹩脚的（buggier）邮件终端上面获得最好的结果。

使用一个容器表单来设置 body 背景色彩

很多邮件客户端会忽略掉在CSS中或者<body>标签中设置的背景色。针对这种情况，将你的整封邮件用一个宽度为100%的表单包起来，并且为其设置背景色。

<table cellspacing="0" cellpadding="0" border="0" width="100%">
	<tr>
		<td bgcolor=”#000000”>
			Your email code goes here.
		</td>
	</tr>
</table>

你可以使用同样的方案在背景图片的设置上，需要记住的是某些邮件客户端是不支持背景图片的，这样你就需要设置一个背景颜色作为备份方案。

在单元格中避免使用多余的空格（whitespace）

尽最大可能，避免<td>标签中出现空格。某些邮件客户端（Yahoo!或者Hotmail）可能会在某些场景下，对单元格的上面或者下面增加额外的填充，把你的设计破坏掉。

CSS 和基本的文字格式

当某些邮件设计师尽他们最大的努力去避免使用CSS时，他们又会去依赖梦魇般的<font>标签，但实际情况是很多的CSS属性是被大部分邮件客户端支持的。请查看下面的跨邮件终端的综合CSS支持列表 list of CSS support，从中你也能发现一些安全的属性和一些应该被避免使用的属性。

将css写成内联(inline)的样式

Gmail就是这方面的罪魁祸首。CSS被从<head>和<body>中剥离，我们别无选择的会将样式写成内联的形式。一个好消息是你可以完全自动化的完成转化。像 Premailer提供意见点击的方式完成这一过程。我强烈建议你将此步骤作为你构建活动的最后一步，你就能感受到这个CSS的所有益处。

避免使用字体的简写和十六进制计数法

一部分邮箱客户端会放弃对简写的css字体属性的解析。比如，绝对不要将你的字体样式设置成下面的样子。

p { font:bold 1em/1.2em georgia,times,serif; }

相反，我们应该写成下面的形式：

p {
	font-weight: bold;
	font-size: 1em;
	line-height: 1.2em;
	font-family: georgia,times,serif;
}

谈到字体这个话题，我最近也在不同的邮件客户端测试引用字体（@font-face）。结果是凄凉的，这些浏览器安全的字体在邮件中使用还是遥遥无期。

当我们用CSS来声明颜色属性时，有些邮件客户端并不支持简写的16进制的颜色值，比如 color:#f60; 我们需要将其补充完整 color:#ff6600;。为了达到最优的效果，我们需要使用常规写法。

段落

像前面提到的单元格的间距，段落的间距也无法做到所有客户端的一致。我看到过设计师使用两个<br>或者用DIV写上内联(inline)的外边距(margin)样式弥补这个短板，但是我最近的测试显示大多数情况下对段落的支持都还是比充足的（有一段时间 Yahoo! 根本不支持段落标签）。

最好的实践方法是对每个段落通过内联(inline)的方法设置外边距(margin)，像下面这样：

p { margin: 0 0 1.6em 0; }

再次提示，在你构建邮件的时候通过在head标签中增加样式，然后通过 Premailer将他们转化成每个段落的内联样式。

如果你的设计对高度是很敏感的或者需要像素级别的完美，我强烈建议你不要将所有的段落写到一起，而是将文本的格式化工作放到表单的单元格中来做。你可能会需要使用到表单的嵌套或者单元格填充(cellpadding)/CSS 来达到期望的样子。下面就是一个例子：

<td width="200" style="font-weight:bold; font-size:1em;
line-height:1.2em; font-family:georgia,'times',serif;">
	your height sensitive text
</td>

链接

某些邮件客户端将会用他们的默认样式覆盖你的链接色，你可以通过两部来防止其发生。第一，针对每一个链接设置一个内联的（inline）的颜色：

<a href="http://somesite.com/" style="color:#ff00ff">this is a link</a>

接下来，增加一个冗余的 span 标签在 a 标签中。

<a href="http://somesite.com/" style="color:#ff00ff">
	<span style="color:#ff00ff">this is a link</span>
</a>

也许这些方案看上去比较过激，如果这个颜色对你的设计很重要，这个多余的 span 标签是你达到一致表现的最好解决方案。

HTML邮件中的图片

很重要的一件需要牢记在心中的关于图片的事情是你的订阅者可能看不到你的图片。如果你有这方面的准备，你就会保持你的内容简单，并且重要的内容不通过图片的形式来展示。

在这个思想的指导下，在使用HTML邮件的过程中，下面有一些基本的要领需要牢记：

避免占位图片

虽然使用占位图片和嵌套表格的方式在10年前很流行，许多邮件客户端已经将其排除作为一种可靠的技术。很多客户端会使用一个相同尺寸的空占位来替换图片，另外一些会将所有的图片移除。大多数邮件客户端会给图片赋予默认的图片区块，这将导致订阅者的第一感觉很差。坚持将单元格赋予固定的宽度，让其在没有图片的时候版式不会乱掉。

将图片定义尺寸

如果你没有给每个图片设置尺寸，当图片没有被下载时，有些客户端会自己发明一个他们自己的尺寸，你的版式就乱掉了。同时，确保你的所有图片在被用到邮件中前，都被赋予了正确的尺寸。某些客户端会忽略你代码中设置的尺寸，而去使用真实的图片尺寸。

避免使用 PNG 图片

Lotus Notes 6 和 7 并不支持 8位（8-bit）和24位（24-bit）的 PNG 图片，所以需要使用GIF或者JPG格式的图片，即使这会增加而外的图片大小。

为背景图片提供备份的颜色

Outlook 2007 不支持背景图片(aside from this hack to get full page background images working)。如果你想在你的设计中使用背景图像，提供一个背景色作为备份支持方案。这样就能同时解决图片被屏蔽和Outlook 2007的问题。

不要忘记标注替代文本（alt text）

缺少标准的支持意味着邮件客户端对语义化和访问性良好的HTML邮件的破坏性是很大的。即使这样，从图片可能被屏蔽角度看，提供替代文本也是很重要的。这样即使图片在默认状态下被限制，大多数邮件客户端也能显示提供的文本来替代。另外还需要技术的是某些客户端，比如 Outlook 2007, Hotmail 和 Apple Mail 在图片被屏蔽的时候，并不提供替代文本（alt text）.

针对 Hotmail 使用显示hack

令人费解的是，Windows Live Hotmail 对每个图片增加了几个像素的填充。一个变通的方案就是使用下面的显示属性来解决这个问题。

img {display:block;}

这样就能移除掉Hotmail的填充值，但是你也可能会给其它客户端埋下隐患。

避免使用浮动属性（float）

Outlook 2007 和早期版本的 Notes 并不支持浮动属性（float）。在邮件中我们可以使用对齐属性在针对图像标签做到浮动图片的目的。 

<img src="image.jpg" align="right">

如果你在 Yahoo！的邮件中发现图片的怪异表现，增加 align="top" 可能能够解决你遇到的问题。

关于图片的更多的细节信息， 你可以阅读这篇文章

视频邮件

由于缺少 Javascript 或者其他对象标签（object tag）的支持，视频邮件最大的程度就是gif动画（如果你认为那是视频的话）。尽管如此，我最近做的一些关于用html5 videio 标签的测试结果，还是让人感觉不错。

HTML 5的标签目前在一部分邮件终端是无法运行的，包括 Apple Mail,Entourage 2008, MobileMe 和 iPhone.作为如果视频不被支持的补救方法，你可以提供稳定的备选内容，比如gif 动画或者一个可以点击到浏览器播放视频的图片。

当然，你是否需要将视频添加到你的邮件里面，那就是另外一个议题了，如果你的答案是肯定的，你可以使用这些 代码案例。

获得更多的视频邮件信息，可以阅读 这篇文章

关于移动端邮件的那些事

移动端有机胺的情况近期显得比较杂乱了，随着iPhone,Android的发明和Palm和RIM的改进，认为移动端电子邮件终端不重要的年代一去不复返了。

为了给移动端订阅用户良好的体现，我们在编码的过程中也有几个关键点需要牢记心中。

保持宽度小于600像素

受限于邮件客户端的视窗，这条规则来移动视窗到来之前的年代就很重要。事实上，iphone 的视窗是320像素，Droid是480像素，Blackberry大概360像素。坚持最大600像素宽的设计，能够让你的邮件缩小到上面提到的设备上面依然可读。这个尺寸在桌面端和web端的预览效果也很好。

注意文本尺寸的自动调整

作为一个好的特性，基于webkit邮件客户端(比如 iPhone, Pre 和 Android) 能够自动调整文本的大小来提高阅读性。如果你的测试结果表明这项特点给你带来的好处是破外了你的设计，你可以通过下面的属性禁用：

-webkit-text-size-adjust: none;

不要忘记去测试

虽然近几年邮件客户端对标准的支持并没有取得长足的进步，但是某些邮件客户端的改变却从未停止（有好有坏），基于 web 的客户端，如 Yahoo!、hotmail 和 Gmail 在这方面乏善可陈。我看到过无数次可行的设计方案被停止支持，没有任何解释。

基于这个原因，你也要对你的邮件设计保持规律的测试。我发现每个月进行一些快速的测试的小技巧，特别基于web的客户端。好的消息是经过几次设计和测试，你将会从这些杂乱无章中找到规律。一些潜在的陷阱将变的可以预计，一个对邮箱友好的设计模型也会在你心中成型。

展望未来

对邮件设计新手和标准主义者来说，HTML邮件设计都是难以下咽的黄莲，有其是面对今天变化无常的客户端，随着HTML5变得指日可待，不确定的因素越来越多。邮件客户端的开发工程师会把握这次机会改正过去的错误并将其适应现在的情况吗？为了达到这个目的，一些团体-比如邮件标准项目（Email Standards Project）-提出了类似上面的建议，如忘记<blink>和<marquee>,即使这样，事情的成败与否也需要时间来验证。

虽然是很受争议（或者时尚）的媒介，电子邮件本身已经验证，它将继续成为最成功、最有针对性的推广渠道。作为HTML邮件设计师，这些设计技巧就是你的武器，你不仅可以拓展你的服务，也能获得一种独特的欣赏标准。

原文地址：http://www.campaignmonitor.com/resources/will-it-work/guidelines/

相关 [html 邮件] 推荐：

创建坚如磐石的HTML邮件

- - 收集分享互联网资源!
在你的职业生涯的某个阶段，你的客户可能会提出让你设计HTML邮件的需求. 在你着急给客户解释所使用的炫酷的社会化媒体前，请记住，如果操作得当，邮件依然是提升你和客户的在线营销方式. 一项最近的调查显示，你每在邮件营销上花费1美元，你将会产生40美元以上的回报. 这远远高于其它的市场渠道，包括一些听着很酷的方式.

EDM邮件中的html/css兼容性问题

- - ria之家--RIA三部曲：jquery、ext、flex
最近需要配合用研同学做个问卷调查的邮件模板，表现形式不是纯文本，需要有美观的布局和多彩的内容，也就是说邮件里面需要用html/css来表现内容. 这种应用已经非常普遍了，如今邮箱里面充斥着各种facebook动态、团购网站推荐、支付宝提醒等等的富文本邮件，这就是EDM（Email Direct Marketing ）电子邮件营销，那如何利用html/css/js更好地在邮件客户端（web邮箱就不讨论了）中表现富文本内容呢.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了，几乎所有的关于HTML 5 在各种主流浏览器上的安全问题，这些安全问题很有可能将会是黑客攻击你的网上的敲门砖，他们几乎都和Javascript都有关系，你就要好好注意了. IE6，7，8，9，和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中，可以让用户进行XSS（跨站脚本）攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言（ 英文：HyperText Markup Language，HTML）是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全，超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素（inline）. 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：. 一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：.

Html 转换成PDF

- - 编程语言 - ITeye博客
最近在搞一个关于html转换为pdf的需求，网上找了很多，但是如果批量处理就会出现问题，最后找到了PD4ML，解决了我的问题. String urlstring = "file:///D:/债权转让及受让协议--魏然2014-08-16.html";. 需要在src目录下创建fonts文件夹，并且在文件夹中建立pd4fonts.properties ，配置文件中的内容如下.

HTML+CSS小结 - jessies

- - 博客园_首页
   结构   HTML        .    样式   CSS      .    行为   JavaScript(交互行为).    .    网页标题.    标题.

HTML head 头标签

- - IT技术博客大学习
HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性. 移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要. 了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的.

动态绑定HTML

- - 破狼 Blog
在Web前端开发中，我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示，特别是在内容管理系统（CMS：是Content Management System的缩写），这样的需求，更是遍地皆是. 对于对angular的读者肯定首先会想到ngBindHtml，对,angular为我们提供了这个指令来动态绑定HTML，它会将计算出来的表达式结果用innerHTML绑定到DOM.