HTML电子邮件应该知道的一些事

本文由大漠根据Nicole Merlin的《What You Should Know About HTML Email》系列所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908，以及作者相关信息
——作者：Nicole Merlin
——译者：大漠

电子邮件是一个非常不错的媒体。它可以直接进入收件箱和ROI广泛的报到可达到4000%。它也是永远被误解和经常做得不好。最近智能手机的爆增，我们更常使用iPhone和Galaxy阅读我们的电子邮件，但不幸的是很多电子邮件营销却不能跟上。我认为这是一个大好机会，因为一个好的电子邮件可以轻松打开和取得巨大成功。

HTML电子邮件编码可能是一个挑战

如果你已经尝试过手工设计和开发HTML电子邮件，你可能感觉到他是非常困难的。让你没有想到的是它非常难搞。原因如下：

电子邮件的标签是不存在的

我们将继续使用Word创建电子邮件信息，因为我们认为它是制作电子邮件最好的。——Outlook团队

当你在编写Web页面，你至少可以依赖于所有主要的浏览器(Chrome、Firefox、IE、Safari和Opera)正在试图遵循网络标准渲染HTML和CSS的这个事实。

当涉及到电子邮件客户端，你在很多新的和旧的客户端上测试。它们的范围包括Android和iOS手机，IBM的Lotus Notes或微软的Office 2007(导致您的HTML以Word HTML引擎渲染，变得臭名昭著。以前的Outlook都是使用浏览引擎渲染你的HTML——实际上这是合乎逻辑的。为什么切换到Word处理器渲染你的HTML，他会问你“安全原因”)。没有任何标准可让这些程序遵守。他们基本上都只是做一些弥补。你可以看一些最流行的电子邮件客户端在标准的电子邮件项目中支持的一些标准。

如果这不算糟糕，那接下来的的确是事实：在桌面和移动端渲染电子邮件大约有上百万种不同的组合方式。

下面列出的是一些最常见的电子邮件客户端：

移动端客户端

Android 2.3 & 4.0
iPhone 5 iOS 6
iPhone 4S iOS 6
iPhone 3GS iOS 5
iPad 2 iOS 6
BlackBerry OS 4 & 5
Symbian S60
Windows Phone 7.5

桌面客户端

Apple Mail 4, 5, 6
Lotus Notes 8.5
Lotus Notes 8
Thunderbird
Windows Live Mail
Outlook 2013
Outlook 2011 for Mac
Outlook 2010
Outlook 2007
Outlook 2003
Outlook 2002/XP
Outlook 2000

网页邮件客户端

AOL Mail (在任何浏览器上)
Gmail (在任何浏览器上)
Outlook.com (在任何浏览器上)
Yahoo! (在任何浏览器上)

太多的设备了!

如果你已经熟悉Web开发，请忘了你所知道的一切。

对于协调这一切，条件样式是不太多的一个选择。有一些东西你可以做条件注释，但它局限于特定版本的Outlook或对一些Outlook版本忽略。

如果你已经熟悉Web开发，请忘了你所知道的一切。最大的障碍，你期待的工作能像Web的正常开发一样。这让你感到沮丧，也阻碍你的开发。最糟糕的事情是你不能使用任何的<div>标签，更让你生气的时完全不支持margin。所以请忘记你所知道的HTML的语义和CSS的最新规范之类。相信我，这将对你有很大的帮助。

如何在你的工作中处理

让我们看看一些邮件构建的建议。

结构第一

构建属于电子邮件的结构，首先可以帮助你避免许多错误和问题。从不构建完整个结构再来测试——你会碰到很多问题，最终他们可能都是相互影响的。

经常测试

直到你的开发达到一个小的里程碑(例如，当您完成基本结构)，然后运行测试。测试的最佳方法是使用Litmus或Acid。我建议经常进行测试，因为能够测试是非常重要的。

我也真的喜欢给所有表格添加边框，这样我可以看到我所有的创建，最后在清除表格的边框。你或许可以给某些单元格添加背景颜色来帮助看这些部分。我理想中的工作流程是先创建一个框架、测试，然后添加我的内容，再次测试，添加颜色和字体样式，测试，最后删除表格边框，发送之前再次测试。

经常验证

经常使用W3C验证器验证它。这将帮助你清除一些小细节，它会查出错误，比如丢失或没在关闭的标签。

发送你的电子邮件

发送你的电子邮件，你有大量的选择。使用最多的两个服务是MailChimp和Campaign Monitor。他们提供有竞争的价格和非常容易使用。提供大量的商业平台——这一切都取决于您的需要。您可以注册一个免费账户和付费账户，看你喜欢哪一个。确保利用两个服务器收集到关于你的电子邮件的有用数据，比如说电子邮件打开时间和客户端。这真的可以帮助你在下次开发需要集中精力的地方。

内容、开发和SPAM的比例

当SPAM到来的时候，内容、设计和开发都齐头并进。在标题中使用全部大写和大量的感叹号以避免典型的垃圾邮件策略是非常重要的。有一些单词也可能引发垃圾邮件过滤器(如“免费”和“投资”)。清理你的代码，尽可能的让你的邮件不被标记为垃圾邮件，和文本和图像的比例也会有影响。依赖图像的邮件，没有文本更容易被标记为垃圾邮件，所以邮件有很长的图像文件名。

全球的垃圾邮件占比是一个棘手的问题。重要的是发送邮件之前通过Litmus或Acid的账号测试你的邮件是不是一个垃圾邮件，确保你的努力工作不是直接产出一个垃圾邮件。

深入开发

现在，电子邮件的本质是开发...

好的基础是一个开始

我认为一片空白是很好的开始。HTML Email Boilerplate框架充满奇妙的技巧和片段，可以用于HTML电子邮件的制作中。然而，如果你是刚开始，我不推荐使用它作为一个起点，因为它包含了很多你不需要的元素。如果有很多不用的代码在你的文件内，Boilerplates更难以解决任何问题。

注意：因为使用任何类型的编辑器很不稳定，你不应该使用所见即所得编辑器，或任何类型的编辑器，承诺可以把你的设计神奇的变成有效的HTML电子邮件。这个东西不工作。

!DOCTYPE

这可能看起来像一个技术细节，但是你需要开始在一个空白模板上工作，模板需要文档类型。文档类型实质上是一行通知程序阅读HTML的代码，期待HTML和CSS遵循哪些规则集合。相当多的客户剥夺你的文档类型，有些人甚至是自己申请的。许多客户也支持你的文档类型，它可以使事情变得更容易。

使用一个XHTML文档类型一般有最少的怪癖和文档之间的矛盾。我使用的是XHTML１.０过渡文档类型，以我的经验，它已被证明是最可靠的文档类型。在下面的教程中，我们将构建一个完整的HTML电子邮件模板，我们将使用以下代码来开始我们的文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Demystifying Email Design</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

Content-Type的<meta>标签是告诉客户端如何处理文本和指定字符。在现实中，你需要编码你所有的特殊字符(如,&可以变成&)，这是安全的。

Viewport meta标签告诉设备设置屏幕可视区域的宽度。它还设置了initial-scale值为normal，表示既不放大也不缩小。如果你不指定，很多智能手机可以扩展内容，让内容适合可视区域，但并不是所有的padding和margin。这可能导致文和图像挨着屏幕的边缘。

最后，总是输入一个有意义的标题，因为人们在浏览器中查看电子邮件可以看到他们或与他们的朋友分享。

邮件是表格嵌套

由于电子邮件无法支持标准，是不可使用div、section或article——替代的是使用table。此外，你需要使用大量的表格嵌套，因为HTML电子邮件既不支持colspan和rowspan属性。

从头开始构建一个HTML电子邮件模板

段落或单元格？

同样，由于缺乏对标准的支持，使用标准的标签，如h1,h2,h3或p并不是一个好主意。我发现这些渲染在电子邮件客户端存在相当大的麻烦。

你最好选择将每一块文本放在息的单元格中，并且将行内样式应用于这个单元格，例如：

<tr>
    <td style=“font-size: 12px; font-family: Arial, sans-serif; color: #666666;”>
        Text
    </td>
</tr>

行内样式或样式表？

这更多的是一种个人的选择。我喜欢使用内联样式风格(即：HTML标记中写样式)，因为我想知道这些东西的具体存放位置是什么和影响是什么。您可以使用样式代码，然后结束的时候把他们放到内联中(你可以通过Campaign Monitor和MailChimp帮你这样做，你也可以使用Premailer或类似的东西)。但我不喜欢这样，原因是代码通过inliner运行它，代码变得有点认不出来。我发现，这使它更加难以解决。如果说这是你想要的工作方式，这很好，如果你没有任何技术，你不应该这样做。

不要忘记：你不能将多个类应用于HTML电子邮件，因为它不支持的这些。每个元素最多可以有一个类。

也不要忘记：你不能用简短的样式缩写如font-size（例如：style="font:8px/14px Arial,sans-serif"），因为HTML电子邮件不支持它。

图片我和垃圾邮件的分数

当保存图片时，很高兴给你的图片命名是短暂的和有意义的，因为这将改善你的垃圾邮件。图片名像"campaign_054_design_0x0_v6_email-link.gif"可能成为垃圾邮件分数要高于“email.gif”。

图片尺寸

试图让你的整个电子邮件尽可能小是一个非常好的想法：100ke是理想的，但并不总是这样，不过低于250kb也算是标准的。在发送之前尽可能多的使用像JPEGmini和tinyPNG工具压缩你的图片大小。如果整个文件大小太大，加载时间慢，尤其是在移动端，你的电子邮件要么成功要么加载失败。

其他的陷阱

不要离开任何的电子邮件客户端。指定所有宽度，你可能会得到意想不到的结果。常在你的主要容器元素设置宽度，如果你愿意，你可以在你的容器里使用百分比设置。

结论

有很多设计和开发时考虑到HTML电子邮件，其中大部分涉及实践标准网页设计相反。不过，本教程应该给了一个基础，现在你可以开始准备进入实际的构建过程。

有用的链接

在本教程中我引用了一些东西，所以在这里再一次将他们列在这里：

Litmus测试工具
Email on Acid测试工具
The Outlook Team Blog
The Litmus Team Blog
The Email Standards Project
W3C Validator
MailChimp
Campaign Monitor
Premailer,发送前检查邮件
JPEGmini图像压缩工具
tinyPNG图像压缩工具
Sublime Text, 我的文本编辑器
HTML Email Boilerplate
别忘了 Viewport Meta Tag
缩略图标由Pierre Borodin提供

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

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

英文原文：http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908

中文译文：http://www.w3cplus.com/css/what-you-should-know-about-html-email.html

译文