前端开发者学堂 - fedev.cn

HTML Email Boilerplate

#译文#EDM
发布于 大漠

本文由大漠根据的《Say Hello to the HTML Email Boilerplate》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/say-hello-to-the-html-email-boilerplate/，以及作者相关信息

——作者：

——译者：大漠

处理HTML电子邮件将是考验人的耐心。看似小格式问题无法避免地出现，你认为自己：“我是一个优秀的Web开发人员，我甚至擅长HTML5/CSS3，我可以很好的解决这些问题”。

几杯咖啡时间之后，你开始发狂，你在开始考虑给大家做什么，提供一个{这里填写空白的电子邮件客户端}。HTML Email Boilerplate可以做出很好的说明。

HTML Email Boilerplate

HTML Email Boilerplate是一个没有设计或布局的各种各样的模板，这可以帮助您在最常见的电子邮件客户端(Gmail，Outlook，Yahoo等)避免一些主要的渲染问题。——HTML Email Boilerplate。

Boilerplate为您提供一些例子和有用的技巧，保证您的电子邮件设计尽可能的在电子邮件客户端正常渲染。您可以使用Boilerplate做为您创建电子邮件的起点。或者，如果你是高级用户，你可以选择里面你需要的片段做为您需要的。

在本文中，我们将分解Boilerplate中的一些关键方面并讨论如何实现它。

但是在我们开始之前，让我们先回顾一些基本的HTML电子邮件客户端：

  • 你唯一可以引用外部的是图像。没有外部样式表、字体、视频(html5开始改变这些)等等
  • 电子邮件客户端(Outlook,Gmail,Hotmail,Yahoo等等)有限的元素支持CSS。你可以看看电子邮件客户端支持什么功能，如列示所示。
  • 表格是一个HTML电子邮件最常用的布局
  • 你需要在电子邮件客户端，浏览器和操作系统上测试电子邮件，这几乎是一个恶梦。

设置DOCTYPE

虽然许多电子邮件客户端会删除DOCTYPE或者不允许有DOCTYPE,这并不意味着我们不能自己给电子邮件设置一个。在这种情况下，使用XHTML 1.0 Strict文档类型主要是因为有两种流行的电子邮件客户端(Gmail和Hotmail)会删除自己定义的DOCTYPE,而是使用XHTML 1.0 Strict作为默认的文档声明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

图像处理

在HTML电子邮件处理图像时有一些问题需要注意：

  • 图片链接到另一个页面可能会非常棘手。不同的电子邮件客户端会给链接的图片添加不必要的边框。
  • 电子邮件客户端会给图像底部添加空白的空间。
  • 默认情况下，很多电子邮件客户端在显示邮件的时候会关闭图像。

应对这些问题，Boilerplate在默认的文档头部设置了一些样式。它重置了链接图片周围的边框为0。它设置了一个类名(image_fix)，帮助你清理图片底部下的空白间距。Boilerplate也给你一个例子，设置宽度、高度、alt和title,帮助你保持完整和一致的格式。

/* 一些合理的图像默认样式，绑定在行内样式中 */
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}

Boilerplate可以帮助你在HTML电子邮件中使用图像可能碰到的一些问题。把这些声明添加到内联中，以确保您的电子邮件呈现你需要的效果。

表格，表格和更多的表格

假设你以前使用过表格，这可能是安全的。我的意思是，自从有了互联网的时候表格就已经存在了。这虽然不是最新或最酷的方法，但表格是HTML电子邮件中是常见的一个构建工具，我也是久经考验的有效方法。实现单独的内容或复杂的设计，添加和嵌套表格是一种伟大的方式。

Boilerplate给您提供了几种处理表格的初始化设置。第一个是一个外层表格(#backgroundTable)充当一个容器——让表格宽度拉伸到电子邮件客户端的可视区域。这是必须的设置，因为有些客户端可以在任何区域呈现——这可能导致奇怪的内容在电子邮件客户端保持一致。

#backgroundTable {
    margin:0; 
    padding:0; 
    width:100% !important; 
    line-height: 100% !important;
}


<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
    <tr>
        <td valign="top">
            ...

#backgroundTable帮助电子邮件客户端重置一些特定的格式，为你设置工作的场景。

第二个表格（内部）设置集中和设置一个宽度为600像素，一个好的宽度可以让你的电子邮件在客户端更好的展示。

另外，为了图像，Boilerplate设置了一些默认设置，避免一些格式问题。单元格的border、cellpadding、cellspacing设置为0和单元格内容设置顶部对齐。

注意： 因为支持div的电子邮件客户端有限，表格是你最好的布局标签。

客户端的修复

Boilerplate很多原因或类似它的模板,可以随时阻碍Yahoo、Gmail、Outlook等电子邮件客户端的一些行为。Yahoo邮件中段落的默认margin为0，让你的文本之间没有间距。Gmail无视文档头部样式和图片周围会产生空白间距。Hotmail讨厌文档头部和Outlook一直忽略任何HTML邮件写信人存在。

Boilerplate试图消除这些细微的差别，尽可能缓解邮件客户端的显示效果。

具体地说，Boilerplate在文档头部给Yahoo邮箱设置了段落的margin为1em ，并且将他们指定到行内。

p {margin: 1em 0;}

Yahoo邮件中段落默认效果：

HTML Email Boilerplate

变成

HTML Email Boilerplate

对于Hotmail客户端，Boilerplate覆盖了Hotmail的绿色标题样式，规范了行高，并设置了一个默认的宽度。

.ExternalClass, 
.ExternalClass p, 
.ExternalClass span, 
.ExternalClass font, 
.ExternalClass td, 
.ExternalClass div {
    line-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: black !important;/* 设置你喜欢的颜色 */
}

对于Outlook客户端，Boilerplate给表格设置了border-collapse:collapse，用于清除单元格默认的内距。

技巧：通过在你的文档头部设置#outlook a {padding:0;}，你可以旨制给Outlook提供一个类似于浏览器的渲染。一个有趣的功能，如果其他客户也提供将是非常可怕的。（H/T Fabio Carneiro和MailChimp提供这样的特殊片段）。

移动端

更让你兴奋的是构建一个移动端的HTML电子邮件。在大多数情况下，我们都生活在21世纪，新的智能手机给我们的生活是什么样子。最后，我们有机会玩新的Web技术。我们可以在文档的头部使用媒体查询，实现响应式设计，让不台的平台能展示的更完美。好吧，或许为了让移动端上查看电子邮件要更好看些，我们需要考虑这些新技术。

为了让移动端上更好的显示你的电子邮件，Boilerplate为移动端的电子邮件制作提供了一个很好的起点。它有助于字体调整(或停止)。它还可以帮助你根据设备的视窗宽度为移动端优化你的电子邮件。它还为iPhone、平板电脑、Android手机手机提供对应的媒体查询，而且还给Windows Mobile提供条件样式。

提示：在媒体查询中，你不应该带有任何的内联样式。

使用EBP：何时以及如何绑定内联样式

正如前面所提到的，还有一些电子邮件客户端会剔除你在文档头部嵌入的样式。我们需要另一个步骤将页头的样式潜入到行内。你可以手动做到这一点，你也可以使用电子邮件客户端内置工具(流行的工具有Campaign Monitor和Mailchimp)或使用一个独立的工具，如Premailer。无论哪种方式，可以按照Boilerplate方向找出内联样式。

Tools like Dialect’s Premailer make inlining a breeze. A great tool for any html emailer to have in their chest, belt, or pocket protector.

让你了解我们在谈论什么，看看早提到的Yahoo邮箱解决段落的间距。它必须是内联样式，才能工作。如果不是，你在段落上的margin就会被忽略，段落文本将堆在一起。Boilerplate提供另一个解决模板内距的问题:table td {border-collapse:collapse;}，在Outlook中不需要将这样式绑定到行内。Outlook会尊重你的嵌入的样式（大部分）。

作为一个例子，你会从这个：

p {margin: 1em 0;}
<p>Pellentesque habitant morbi tristique senectus ...</p>

到这个：

p {margin: 1em 0;}
<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">Pellentesque habitant morbi tristique senectus ...</p>

记住，任何样式在媒体查询的里面和后面，但不应该绑定到内联样式中。可以使用删除媒体查询的样式，直到让你的电子邮件满意为止。

几个优点

有几个值得一提的话题，但不没有使用Boilerplate这样或那样的原因。

HTML5视频：虽然很多客户端支持，但Hotmail还存在缺陷。有一些有趣的技巧，可以让一封邮件中展示一个实际的视频或优雅降级到点击一张图片。在Hotmail中会丢掉视频播放控制器，它只能显示视频和允许播放视频，但不能控制视频。读者可以右击视频，设置视频播放——但是这是你想要的效果？

HTML Email Boilerplate

打开Facebook的图标：或许下个版本可用。这在电子邮件中受到影响，特别是电子邮件没有在浏览器版本中使用的时候，应该会在哪里？

HTML Email Boilerplate

电子邮件状态

许多人觉得很悲伤，因为他的代码还停留在1999年的时候。表格布局，而不是div。CSS3?让我先使用CSS2。电子邮件客户端毫无目的的支持标签、声明和整个规范。然而，随着iOS设备的出现和一些使用Webkit渲染引擎的客户端出现，让人觉得轻松点。因为这个和其他的因素，我们看到一些复杂的和美丽的设计。令人非常激动。

这些在移动设备，尤其是iOS设备更为明显。截至今年6月，第二个最受欢迎的电子邮件客户端是一个iOS设备。这意味着我们可以使用大多数支持Webkt浏览器的技术（如，CSS3，HTML5等）创建我们的电子邮件。不要太激动了，你还必须考虑到使用CSS3和HTML5在许多桌面/Web邮件客户端还有一定的局限性。

按照这种说法，提高这种效果，无疑使本已复杂的事情变得更复杂。而正基于Web标准的电子邮件客户端，例如Mac上的Outlook现在也使用如Apple Mail的Webkit内核，大多数桌面电子邮件和基于Web的客户端正在高速支持HTML/CSS标准。移动端的到来，同时也增加了我们的测试。

就像我前面提到的，这是一件令人激动的事情。有这么多有实力的公司和个人在向前推动这件事情。问题是不可避免的，方向是正确的，将会更接近HTML/CSS标准，让我们减少头痛的事情。

结论

Boilerplate在这里展示和提出了电子邮件和电子邮件客户端的一些陷阱。虽然不是即插即用，有点费力。但他提供一些有用的例子和代码片段，可以帮你设计和开发的电子邮件尽可能的趋于标准。至少，它会为您节省一些搜索的时间，更重要的是不会在让您头痛。

我很乐意能听到您的反馈。如果你对Boilerplate有任何想法或意见可以在下面的评论中给我们留言。

非常感谢

总得来说，HTML Email Boilerplate只是一个编译的技巧，代码片段和最佳实践。如果遇到我，我会放弃，更不用说深入的研究和开放的Ros Hodgekiss。Brian的概念和Campaign Monitor团队，以及Fabio Carneiro 和Mailchimp都在为此努力工作（让Boilerplate更加强大和有用）。Boilerplate也通过使用Litmus和Email on Acid做过测试，没有他们，这将是一个不可能完成的任务。

资源

我经常使用的一些资源。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载，烦请注明出处：

英文原文：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/say-hello-to-the-html-email-boilerplate/

中文译文：https://www.fedev.cn/css/say-hello-to-the-html-email-boilerplate.html

Nike Kyrie 5 EP 'UFO'