HTML Email Boilerplate

发布于 大漠

本文由大漠根据的《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设置了一些默认设置,避免一些格式问题。单元格的bordercellpaddingcellspacing设置为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'