在电子邮件设计中使用片段的终极指南
已发表: 2015-11-20在数十个电子邮件客户端、看似无数的渲染怪癖以及对 HTML 和 CSS 不断变化的支持之间，编码电子邮件活动是复杂的。 不幸的是，对于电子邮件设计师来说，这种复杂性意味着电子邮件设计变得越来越耗时，因此我们创建了在电子邮件设计中使用片段的终极指南。
在电子邮件设计大会上，Code School 的 Dan Denney 完美地描述了这个问题：
创建电子邮件的最大挑战不是 Gmail……是时候了。
在电子邮件设计方面，时间至关重要，将开发工作流程落实到位至关重要。 为了跟上电子邮件设计快速变化的需求，使您的工作流程尽可能高效变得越来越重要。
那么，您可以做些什么来优化您的工作流程？ 一个字：片段。
借助片段，您可以比以往更轻松、更快速地创建电子邮件。 花更少的时间来构建和排除电子邮件故障，而将更多时间花在为订阅者创造更好的电子邮件体验上。
什么是片段？
片段是可重用代码的电子邮件模块，您可以在电子邮件模板或更广泛的电子邮件设计系统中使用。 它们非常适合电子邮件设计中常用的元素，例如文档类型、防弹按钮和链接。 每次使用这些元素之一时不必重新编写代码，您可以使用代码片段。 使用代码片段可以自动化您的编码并大大加快开发时间。
如何使用片段
无论您使用哪种电子邮件编辑器来构建电子邮件，都可以使用片段来优化您的工作流程。 下面我们来看看如何在最常见的编辑器中使用它们。
织梦者
在 Dreamweaver 中，您可以通过访问：Windows → Snippets → New/Edit 添加或编辑片段。 您甚至可以将片段保存在组中（即与表格相关的片段、与图像相关的片段等），以便于搜索。
在编写电子邮件时，通过双击片段标题、单击插入或使用键盘快捷键来使用片段。
石蕊建造者
在 Builder 项目中，单击编辑器右上角的 Snippets 图标。
您可以在该界面中创建和编辑新代码段，并通过键盘快捷键触发代码中的代码段。 您还可以使用{braces}在代码段内添加编辑点。 触发片段后，您可以自动跳转到片段中的预定义编辑点，以便快速轻松地进行自定义。
崇高的文字
要在 Sublime Text 中查看现有片段或添加新片段，请访问：工具 → 片段/新片段。 每个片段都保存在自己的 .sublime-snippet 文件中。
通过键盘快捷键触发器将代码段添加到您的代码中。 例如，在下面的代码中，当在代码中键入“hello”时会触发该代码段。 您还可以使用美元符号按顺序（ $1 、 $2等）在代码段内添加编辑点。
<snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 
原子
通过访问：Atom → 打开您的代码段，在 Atom 中查看、编辑或添加代码段。 每个片段都保存为自己的snippets.cson 文件。
与 Sublime Text 类似，Atom 中的片段通过键盘快捷键触发器工作。 您还可以使用美元符号按顺序（ $1 、 $2等）在代码段内添加编辑点。
'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """ 
结尾
Coda 中的片段被称为“剪辑”。 要添加或编辑剪辑，请访问：侧边栏 → 剪辑。 剪辑可以成组保存，它们在键盘快捷键触发器上工作。 您还可以通过在 UI 中定义自定义占位符点来在代码段内添加编辑点。
片段库
在每个编辑器中，您可以创建一个片段库。 库中的所有内容都应该是最新的并经过预先测试。 随着电子邮件的世界不断变化，请务必经常测试您的片段并在必要时添加新片段。
虽然还有更多，但我们已经汇总了一些我们最喜欢的开箱即用片段的完整列表，用于电子邮件开发。 随意将它们添加到您的代码片段库中！
文档类型
文档类型告诉电子邮件客户端以标准或怪癖模式呈现电子邮件。 有两种推荐的文档类型形式可用于电子邮件。 第一个是 HTML5 文档类型：
HTML5
<!doctype html>XHTML
第二个是 XHTML 文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Campaign Monitor 分解了哪些 HTML 文档类型适合使用，并且在 Litmus 社区上也有很多关于它的讨论。 如果您没有为电子邮件指定文档类型，电子邮件客户端将以“怪癖模式”呈现电子邮件，这可能会导致呈现问题。
元标签
如果您将电子邮件编码为响应式，则应该包含几个关键的元标记。
UTF-8
第一个推荐的元标记将字符编码设置为 utf-8，这是电子邮件的典型编码。 如有必要，可以更改此设置。
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />视口
第二个推荐的元标记设置电子邮件的响应能力。
<meta name="viewport" content="width=device-width, initial-scale=1" />视窗电话
第三个推荐的元标记专门用于使电子邮件在 Windows Phone 上具有响应性。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />表
HTML 电子邮件使用表格来构建内容。 手工编写表格可能非常乏味，因此我们开发了用于简单表格布局的基本片段。
表1×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>表2×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>表 3×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>表2×2
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>表2×3
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>表 3×2
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>表 3×3
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>防弹按钮
由于 Outlook 呈现怪癖，在电子邮件中创建按钮非常麻烦。 有四种推荐类型的防弹按钮，无论是否有图像都会显示。
VML 按钮
第一个防弹按钮方法是由 Campaign Monitor 的 Stig Morten Myre 开发的，是一种基于 VML 的按钮方法：
<div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>Campaign Monitor 还创建了buttons.cm，这是一个生成上述VML 按钮代码的简单工具。
基于填充的按钮
第二种方法是使用基于填充的按钮的实时文本方法：
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>此按钮的主要缺点是它不是 100% 可点击的。
基于边框的按钮
第三种防弹按钮方法涉及在链接周围创建边框以形成大的可点击区域：
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>这种方法的主要缺点是 Outlook 2007-2013 不考虑链接标签的边框宽度，因此它确实会减少按钮的人工填充。
填充+基于边框的按钮
最后一种方法涉及填充和边框按钮的组合：
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>此 hack 用于避免 Outlook 中的填充呈现问题。
图片
在电子邮件中使用图像时需要考虑许多关键因素。 例如，您必须在 HTML 属性中定义高度和宽度，以便在 Outlook 中正确呈现图像。 而且，使用 ALT 文本不仅对于可访问性目的非常重要，而且因为 43% 的用户查看电子邮件时关闭了图像。 最后，为了防止图像周围出现额外的填充和间隙，您应该将它们设置为 display:block;。
<img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>链接
基本链接
在电子邮件中使用链接时，您需要在其上设置内联样式，例如字体大小、字体系列和文本装饰。 这是一个简单的片段，其中已经有了这些内联样式：
<a href="#">{style}</a>删除 iOS 上的蓝色链接
在 iOS 上有多种删除蓝色链接的策略，但这里有一个简单的片段，它使用单个 CSS 声明来执行此操作：
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }隐藏的预标题/预览文本
Preheader 或预览文本是从电子邮件正文中提取的副本，通常显示在订阅者收件箱中的发件人姓名和主题行下方。 使用隐藏的预标题文本是一种定义所用副本的方法，并防止它影响电子邮件的实际设计。
这是片段：
<div> {preheader text} </div>媒体查询
媒体查询是级联样式表 (CSS) 的一个组成部分，CSS 是用于设计网站和电子邮件活动的语言。 借助媒体查询，您可以微调电子邮件设计，使其更适用于移动设备、桌面设备和网络邮件收件箱。
以下是您在设计电子邮件时需要的所有重要媒体查询的列表：
基础媒体查询
@media screen and ({declaration}) { {content} }最大宽度媒体查询
@media screen and (max-width: {width}) { {content} }最小宽度媒体查询
@media screen and (min-width: {width}) { {content} }iPad 1 & 2 + iPad 迷你媒体查询
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }iPad 3 & 4 媒体查询
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }iPhone 2G/3G/3GS 媒体查询
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }iPhone 4/4S/5/iPhone 6（缩放视图）媒体查询
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }HTC ONE + SAMSUNG GALAXY S4/S5 媒体查询
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }iPhone 6（标准视图）+ iPhone 6 Plus（缩放视图）媒体查询
@media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }iPhone 6 Plus（标准视图）媒体查询
@media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }展望有条件的评论
由于必须支持 Outlook 会带来大量呈现问题，因此有时将 Outlook 定位为具有特定样式的对象会很有用。 可以针对 HTML 或 CSS 内容使用条件 mso 注释来定位 Outlook。
微软 Word 渲染
<!--[if mso]> {content} <![endif]-->展望 2000-2013
<!--[if (gte mso 9)|(IE)]> {content} <![endif]-->更多 Outlook 条件注释：
- 展望 2000
- 2000-2002年展望
- 展望 2000-2003
- 展望 2000-2007
- 展望 2000-2010
- 展望 2002
- 展望 2002-2013
- 展望 2003
- 展望 2003-2013
- 展望 2007-2013
- 展望 2010
- 2010-2013 年展望
- 展望 2013
网页套件
逐步增强电子邮件的最佳方法之一是针对 WebKit 渲染引擎。 大约 47% 的电子邮件打开发生在由 WebKit 提供支持的收件箱中。
@media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }Gmail
Gmail 不支持电子邮件的 <head> 中的类或 ID，这就是 CSS 必须内联在电子邮件中的原因。 然而，FreshInbox 的 Justin Khoo 发现了一种新的技巧，Gmail 可以在其中读取电子邮件中的 CSS。
如果您使用 lang 或 title 属性作为属性选择器，其值位于以空格分隔的值列表中，其中一个是完全匹配的，Gmail 将读取该 CSS。 这是一口，所以这里有一个片段来帮助你：
* [lang~="{name}"] { {style} }雅虎
雅虎邮件最近推出了自己独特的媒体查询，使我们能够轻松地针对网络邮件的某些样式进行定位。
@media yahoo { {style} }安卓
James White 最近在 Litmus 社区上发布了一个在 Android 4.4 上集中电子邮件的技巧。
body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }社区中的片段
想要更多片段吗？ 你有一些最喜欢的东西想要分享吗？ 在各地电子邮件极客的帮助下，我们已经在 Litmus 社区中提供了数十个有用的片段，例如在 iOS 设备上删除蓝色链接的代码。
按创建片段的电子邮件客户端或片段类型（即黑客、图像、链接等）对现有片段进行排序。 您可以添加自己的，并创建您最喜欢的片段库。 而且，您可以通过将 Community 中的片段直接导入 Builder 来节省更多时间。 结合 Builder 的即时预览，使用片段编码可能是制作精彩电子邮件活动的最快方式。
查看社区中的片段 →