【邮箱里段落间距怎么调】如何制作完美的HTML邮件

制作邮件和制作网页仍然很不一样。在不同浏览器不断接近标准的同时，大多数邮件客户端却止步不前，甚至有些在倒退。2007年，微软将Outlook的渲染引擎从IE转换为Word，一些基于web的邮件客户端(如Gmail和Hotmail)添加了奇怪的模式和Lotus Notes的一些技术。

根据我的经验，我们解决这些问题的关键是集中在以下三点上。首先，保持简单，邮件设计越复杂，从不受欢迎的不受支持的客户端“提取”邮件的可能性就越大。第二，编码技术要倒退十年。这意味着您必须使用嵌套的表单，并以内嵌格式填写CSS。最后，你要对你的设计进行有规律的测试。

使用表布局

不支持浮动(float)、外部距离(margin)、内部填充(padding)，如Gmail和Outlook 2007，因此必须使用表单作为消息的框架。虽然广泛支持表格嵌套方法，但单元格宽度、外部边距和内部填充的处理方法不一致。为了获得最佳结果，请在创建表结构时记住以下技术：

1、设置每个单元格的宽度，而不是表

将表格宽度、TD宽度、TD填充和CSS填充写入消息可能会使每个邮件客户端看起来不同。最可靠的方法是为表格中的每个单元格(th、td)设置宽度，而不是为表格本身设置宽度。这是：

不要期望邮件客户端能够计算未指定宽度的单元格的宽度。那绝对做不到。此外，客户端(如Outlook 2007)不要使用这种宽度方法，尤其是不考虑嵌套表的基于百分比的宽度。像素级视觉；要填充每个单元格，可以使用表单的单元格填充属性或CSS的内部填充进行填充，但不要同时使用这两者。

2、重叠神话

表的嵌套比设置左右浮动和外部边距(margin)或表单单元格填充的方法更加牢固。如果使用这种表嵌套方法可以达到同样的效果，那么在buggier邮件终端上就能得到最好的结果。

3、使用容器表单设置body背景颜色。

许多邮件客户端忽略在CSS或body标签中设置的背景色。在这种情况下，请将整个邮件包装成100%宽度的表格，并设置背景色。这是：

背景图片设置也可以使用相同的方案。某些邮件客户端不支持背景图片，因此必须将背景颜色设置为备份方案。

4、不要在单元格中使用不必要的空格(whitespace)

请尽可能避免TD标签中的空格。一些邮件客户端(雅虎！或Hotmail)可以在某些场景中的单元上方或下方添加其他填充，从而破坏设计。

CSS和默认文本格式

如果一些邮件设计师竭尽全力避免使用CSS，他们会依赖噩梦般的font标签，但实际上大多数邮件客户端支持的CSS属性很多。查看下面跨邮件终端的全面CSS支持列表List of CSS支持，可以找到一些安全属性和需要避免的属性。

1、将CSS写成内嵌样式

Gmail是这方面的罪魁祸首。CSS从head和body中分离出来，我们将不得不把风格写成内嵌格式。好消息是，可以进行完全自动化的转换。完成此过程，就像Premailer提供意见点击一样。强烈建议您将此步骤作为构建活动的最后一步，您将感受到此CSS的所有好处。

2、避免使用字体缩写和十六进制计算方法

某些邮箱客户端忽略对缩写的CSS字体属性的解析。例如，不要将字体样式设置为：这是：

ndex=3" width="427" height="32"/>

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

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

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

段落

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

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

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

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

链接

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

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

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

HTML邮件中的图片

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

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

1、避免占位图片

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

2、将图片定义尺寸

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

3、避免使用 PNG 图片

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

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

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

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

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

6、针对 Hotmail 使用显示hack

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

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

7、避免使用浮动属性（float）

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

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

视频邮件

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

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

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

关于移动端邮件的那些事

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

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

1、保持宽度小于600像素

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

2、注意文本尺寸的自动调整

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

不要忘记去测试

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

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

本文参考“新浪UED”：创建坚如磐石的HTML邮件