响应式布局在邮件中的实现

2010 年， Ethan Marcotte 提出了响应式布局——一个网站兼容多个终端的概念。而响应式邮件，则是一封邮件兼容多个终端。

根据 ExtactTarget 在 2012 年针对各个年龄段希望接受营销信息的方式调查表明，电子邮件是客户愿意接受营销信息的主要方式。

电子邮件营销中， 电子邮件内容是非常重要的一环。由于人们习惯的浏览式阅读模式，一封设计优秀、有品牌识别度的邮件比一封纯文字邮件更能引起客户的关注。从 ReturnPath 最近的调查 [i] 中又可以看出，人们已经逐渐习惯在移动端进行邮件的阅读。一封在移动端不方便浏览的邮件，不但会使精心的设计打折扣，还有可能影响品牌在邮件阅读者心目中的排名。

用户在移动设备上阅读邮件时，与其他客户端的区别一般在于以下几点：

1)邮件阅读，用户倾向于上下滚动阅读，在移动客户端上很容易出现需要横向滚动的情况。

2)链接和按钮：用户在移动端阅读时，一般使用手指进行点击。手指点击的区域较大，因此链接和按钮的区域应该尽量扩大以方便点击，同时也应当做到较为分散以防止误点击。

3)图片：用户在移动端使用数据流量时，很有可能不进行大量图片的载入。因此，邮件内容如果简单的以图片拼接，在移动客户端并不一定能够呈现出良好的效果。

鉴于以上几点，适合在移动端阅读的邮件和非移动端的邮件在设计上是需要区别的。电子邮件的特点是：邮件发送后，邮件的内容无法动态更改。收信人则可能在任意客户端打开邮件，因此，需要分别设计移动端和非移动端邮件，并进行响应式布局。

结合项目中制作响应式邮件的过程，本文主要分析响应式邮件主要的两个难点：实现方式受限和测试终端众多。

实现方式受限

在响应式邮件实现中，首先要考虑的是目标客户群体可能使用的邮件客户端种类。根据目标客户端种类，设计人员在设计邮件时，需要考虑到实现的可能性；技术人员在发现有不可能实现的设计时，也应当即时反馈给设计人员。

由 campaignmonitor 公布的兼容性测试结果 [ii] 可以看出，桌面客户端有很多不兼容的地方 ，而移动客户端则大多支持 css3。所以在项目中，应该优先针对桌面客户端进行思考。

1. Outlook

Outlook 在众多邮件客户端中占有很大份额。为了令 Microsoft Word 创建出来的邮件具有更好地表现力，微软在 Outlook 2007、2010、2013 版本的设计中都使用了 Microsoft Word 作为邮件渲染引擎。针对 Outlook 在 Web 格式上的兼容性问题，邮件编写者们在 Outlook 2010 发布后创立了 fixoutlook.org 网站向微软请愿。随后的 Outlook 2011(Mac) 使用了 Webkit 引擎 [iii]，但 Outlook 2013 依然伴随着 Word 引擎出现 [iv]。关于 Outlook2007、2010、2013 系列的特性，在 MSDN 的文档中有详细的说明 [v] 。

2. Gmail

Gmail 是 Web 客户端的另一个难点。Gmail 的用户量位居前列，但是由于不明原因，Gmail 会过滤掉邮件中的