“在Email中不能使用HTML5或CSS3”。

由于它们“有限”的支持，这已成为邮件设计行业的一个普遍共识。然而，我们现在可以说它是一个完全荒唐的说法。

尽管支持还不是十分通用的，但许多主流电邮客户端已经可以支持HTML5和CSS3了。实际上，电邮总体市场的50%都支持HTML5和CSS。前五大电邮客户端中也有3家开始支持它们了。对于特定顾客，可支持的内容可能会更多。

但是，那些还不能支持这些高级功能的客户端会怎么样呢？你的邮件在这样的订阅者的邮箱中该如何展示？当这些涉及到邮箱，就归结为一个：为订阅者提供非凡的体验。然而，这也不意味着你的邮件必须在每一家客户端中都显示的一样——只需要让你的所有订阅者都能易得易取。

我喜欢的两位邮件设计师——Jonathan Kim 和 Brian Graves——就十分强调使用不同的方法实现：防御性邮件设计和渐进式增强。

防御性邮箱设计

大概两年前， Jonathan Kim在我们的 Mobile Master 作品展上提出了“Pushing the Limits of Email”的概念。在谈话中，Jonathan发明了一个新词来说明当前的电邮设计状态，即防御性邮件设计。

他解释说，由于一些邮箱客户端对CSS的支持有限，使得邮件设计者们陷入了陈旧的设计状态。他倡导邮件设计者们优先为那些支持网络渲染引擎的客户端设计，进而推动邮件设计行业发展。

渐进式增强

以此类推，在2014年的邮箱设计大会上，DEG的UI设计师， Brian Graves,，提出了“赢得在每个屏幕上设计的战斗”。他的谈话的重点在于渐进式增强，关于在支持的环境上提供高级功能。他也强调了优雅降级的重要性。优雅降级意味着，即使订阅者的邮箱客户端不能支持某项特定功能，你也要能为他们提供愉悦的用户体验。

对获得Brian的完整展示感兴趣？幻灯片和录像现在都有提供了。

自动楼梯就是实际生活中一个渐进式增强和优雅降级的完美例子。已故喜剧演员Mitch Hedberg开玩笑说，“自动扶梯永远不会出故障：因为它可以只是一个楼梯。你应该永远也不会看到‘自动扶梯暂时故障’的标牌，只是‘自动扶梯暂时为楼梯’，不利于方便。”不论环境如何，自动扶梯都能保持自己的功能。

为HTML5和CSS3实现渐进式增强

使用渐进式增强是解决邮件设计的最有效方式。我们都知道的是，在邮箱中使用传统的HTML5和CSS3会在不同客户端之间引起许多渲染问题。向后的兼容性非常不一致——一些HTML和CSS有稳固的向后兼容性而其他的却并没有。对此，不同的客户端采用了不同选择。使用标准的HTML5和CSS3需要更多的测试，而且会影响开发速度。所以，到底什么才是在邮箱中实现渐进式增强的最好方法？

在电邮中使用HTML5和CSS3不必太困难。它不要求在古怪的邮箱客户端上浪费大量时间排除故障(说的就是Outlook邮箱)。它所需要做的就是用一个合适的框架来快速执行HTML5和CSS3而不用烦恼和担心产生渲染问题。而且，非常幸运的是，我们有那样的框架。

下面就是邮件设计者们和开发者们提供的一行重要的代码：

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* Insert styles here */

}

这个媒体查询只针对支持WebKit的邮箱客户端——对HTML5和CSS3有难以置信的支持度。这个媒体查询允许你使用现代技术例如HTML5视频、CSS3动画、web字体以及更多。

这个方法也将现代邮件客户端和旧式客户端的邮箱开发分为两部分。你可以在使用Safari或Chrome浏览器为支持WebKit的客户端测试开发现代技术的同时，使用Firefox为旧式浏览器提供诸如外观之类的基本体验。

这样解决电邮开发问题可以将更多的质量控制过程转移到浏览器方面而不是电邮客户端。这给予邮件设计者以更多的权力，控制力，和自信去开发一个能在所有邮箱客户端之间优雅渲染的电邮。

下载这些Litmus测试结果，显示了就媒体查询对WebKit的支持。值得注意的是，Gmail——既是一个web邮箱客户端，也是一个移动App——并不支持媒体查询，所以这些测试对那些屏幕截图无效。

你也可以针对Gecko(Firefox)渲染这个媒体查询：

@-moz-document url-prefix() {

/* Insert styles here */

}

很少有客户端使用Gecko(Firefox)作为渲染引擎，这也是为什么最好就支持WebKit的邮箱提供你的增强版。但是，使用媒体查询为WebKit渲染引擎添加同样的功能就简单的多了，对Thunderbird之类的客户端而言。

除了这个方法，还有其他在电邮中实现HTML5和CSS3的方法吗？有。但我们相信这个方法是开发的最迅速的方法——也是最安全的。它缩小了为特殊邮箱客户端开发外观之类需要的工作量，而且集中于基于浏览器的测试。

总结：渐进式增强的建议

了解你的受众

订阅者在哪里打开你的邮件？他们会使用对HTML和CSS支持的很好的如iPhone和AppleMail之类的客户端吗？你可以使用Litmus’ Email Analytics测试工具检测出订阅者中最流行的邮箱App。

基于所获得的信息，你可以决定是否渐进式增强会对你的工作有帮助。例如，如果你的受众中绝大部分使用WebKit，能够很好的支持高级功能，那么可能尝试创新性的技术，比如HTML5 视频，会是一个不错的想法！

建立一个基本体验

用对HTML和CSS支持有限的邮箱App——如Outlook和Gmail，在你为其他客户端优化邮件之前，为订阅者建立一个基本体验。渐进式增强不应该让其他用户产生次优体验。

尽可能优化

一旦你已经建立一个基本体验，就开始为其他用户优化体验。你可以使用CSS3，视频，交互，可缩放向量图形(SVG)，以及web字体。记住，即使是对HTML和CSS支持的比较好的Email客户端也有它们各自的特殊之处，仍然需要测试哪些才是可行的。

实战：邮件中的渐进增强例子

我们先看看一些在邮件中使用渐进式增强的开创性例子。为了展示对这些邮件的优化，你必须使用一个如Chrome或Safari一样以WebKit为动力的浏览器。

2014邮件设计大会以HTML5视频为背景的邮件

为了播报2014邮件设计大会，我们决定认真地以HTML5视频为背景实现渐进式增强。尽管这种专项技术只能在Apple邮箱和Outlook 2011(Mac版)上工作，但这两种客户端达到接收特定邮件的用户40%左右。

View the full email here

对于不支持视频的电邮客户端，HTML5视频仅仅只是退化为一张静态背景图片。我们的结果却是令人惊奇的——而且回报也是惊人的！

B&Q 交互式旋转圆盘邮件

这一年中最酷的邮件之一是B&Q的交互式旋转圆盘邮件。对于WebKit客户端，该邮件包含了一个旋转热点，供用户点击查看不同的部分。

View the full email here

整个邮件中最令人印象深刻的部分，可能是它为非WebKit邮箱使用的备用方案——一个美丽的旋转木马网格布局，没有隐藏也没有复制任何内容！

你可以在 Firefox 或 Internet Explorer 浏览器中打开该邮件查看备用设计。

Litmus Builder(邮件开发工具)交互之旅邮件

为了引入我们的新邮件代码编辑器，Litmus Builder，在这封邮件中展示了大量的可点击交互。同样，该技术也只能在Apple邮箱和Outlook 2011(Mac版)中工作，而这两个却占了我们的顾客的绝大部分。(注：邮件需要屏幕至少800像素宽才能浏览。)

该展览仅仅只是退化为一个静态背景图片，而且会调用接口跳转到登录页面。这邮件取得了巨大的成功，其产品在最开始的几天里增加了成千上万的用户。

View the full email here

想尝试一下 Litmus Builder？注册后 ，你就可以开始使用HTML5和CSS3测试你的邮件!

一个创新邮件设计框架

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* Insert styles here */

}

这个媒介查询为邮件设计师提供了一个简单的创新框架。我们可以为拥有现代邮箱客户端的那一大部分订阅者提供更好的体验。

最好的防卫就是进攻。现在该是进攻的时候了。在邮件设计中使用这个媒介查询开始创新，推动邮件前进。

为了订阅者去尝试。为了我们的行业，为了 对邮件的热爱。

已经迫不及待想看看我们会共同建立出什么了。

如果你用的是这种方法——或者开发你自己的更高级的版本——在你的邮件中，或者如果你对这种方法有任何的疑问，请在下面的评论中贴出，或者用更好的方式，去Litmus社区！

发现你的受众 + 测试你的设计

对于能够开始使用高级技能像HTML5和CSS3来推动邮件发展，是不是感到很激动？确保识别出订阅者们最喜爱的邮箱APP，然后测试你新设计的邮件。

通过邮件分析，你可以了解订阅者经常在哪里打开邮件，这样你就可以集中精力在渐进式增强(以及优雅降级！)上了。

测试设计也是开发过程中非常关键的一步。在30个以上邮箱客户端和APP之间的兼容性测试，可以确保订阅者们不论用什么邮箱打开邮件都能正常获得你的邮件。