响应式电子邮件设计

本文由大漠根据Jack Osborne 的《Responsive Email Design》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://jackosborne.com/articles/responsive-email-design，以及作者相关信息
——作者：Jack Osborne
——译者：大漠

自从Ethan Marcotte在2010年5月25日发布的《A List Apart》文章开始，响应式网页设计(RWD)讨论的热度并没有减少，但在相同的时间内我们构建电子邮件的方式并没有太多的改变。值得庆幸的是，在过去的一年，人们开始使用RWD和运用类似的方法来设计电子邮件。

在我们开始之前，我想向大家介绍Anna Yeaman在最近一次演讲中介绍的一些数据，我们知道我们正在处理：

2012年上半年，近41%的电子邮件在手机上阅读
仅有2%的人会在另一个设备上打开电子邮件
电子邮件不能在小屏幕上优化，其转化率要低28%
如果不能在小屏幕上阅读您的电子邮件，将近有三分之一的用户会退订您的信息

既然您已经看到电子邮件是多么的重要，那么多现在开始，让我们把他们做到最好。

最基本的

在我们的职业生涯中，如果我们亲手做过几个响应式的HTML电子邮件，以及分享出来，这样其他人解决这样一个相同的任务会有一个更好的起点。我不喜欢说这是所有的答案，我并不想说你要读懂什么是最好的方法，但希望这些方法可以帮助你解决问题或者说是一些最基础的东西。

在开始之前，我决定找一些可以帮助我们创建第一个响应式电子邮件的帮助文档。在Campaign Monitor文档中列出了我们构建电子邮件所需要的一些帮助文档。

然而随着Campaign Monitor在网站指出的的内容，以及我列出的技术并不普遍支持所有移动端上的电子邮件客户端。

电子邮件显示如何从根本上改变了收件箱收邮件，但值得庆幸的是，Campaign Monitor给我们提供了电子邮件客户端对CSS的不同支持的列表和媒体查询如何支持当前的状态。

开始

记住，编写电子邮件不像编写一个网页，除非是像编写一个1994年的Web页面。你可能会碰到一些问题，但只要你有足够的时间，保持引用不同的方法，你就会实现你需要的效果。

文档类型

在已知的电子邮件客户端Gmail和Hotmail，会自动删除你自己定义的文档类型，他们会自动插入XHTML 1.0 Strict的文档类型，这样并不是一个坏主意，这样一来你可以避免任何可能发生的冲突。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

视窗的Meta标签

就像创建一个响应式的Web页面一样，第一步你就得在你的文档的<head>标签内添加一个特定的<meta>标签。没有这个meta标记，移动端浏览器将假定你在桌面环境中查看内容，并设置视窗为一个更大的宽度，因此在小屏幕的设备上会挤压页面的一切。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

为了解决这个问题，苹果公司推出视窗的meta标签，允许你设置五种不同状态。在上面的代码片段中，我们只关心device-width和initial-scale。device-width设置了在你的页面加载保持初始页面的大小时，视窗的宽度设置为设备的宽度，此时你的页面布局将按1:1的规模不做任何放大效果呈现。

重置`body`

如果你不想在iOS邮件中呈现的内容有间距，接下来我们要做的就是将body标签的margin和padding的值重置为０。然后在一些移动电子邮件客户端使用-webkit-text-size-adjust和-ms-text-size-adjus禁用自动文本大小调整，其作用就是阻止设备减少/增加默认的文本大小。

<body bgcolor="#EAE8E4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="height: auto; padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust: 100%;">

最后，我们设置一个背景颜色。

构建

布局

响应式设计首先绘制草图是移动端设计的最好开始，因为这可以让你更好的把握你的内容，主要的、重要的内容怎么放置。如果你需要的时候在来返工重新设计，这样会让你变得更佳笨拙。

行内样式

不幸的是，即使有很多响应式设计的介绍，但我仍然离不开在元素的行内声明样式。

<div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block; font-size: 15px; color: #4D4D4D; font-weight: lighter; line-height: 120%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

媒体查询和CSS

我们规定不是行内的CSS样式，都放在<head>标签内。CSS样式放在媒体查询里面，同时使用属性选择器来避免Yahoo电子邮件客户端的一个不同寻常的故障。

不同类名的属性选器也将被使用，因为一些更明显的名字在邮件客户端可能导航一些冲突和布局的混乱。最后一件是需要注意，所有声明的样式必须使用!important，确保这些样式优先于内联的样式。

<style type="text/css">
    @media only screen and (max-device-width: 480px) {
        table[class=tableContent] {
            width:320px !important;
        }
        img[class="headerImage"] {
            width:320px !important;
        }
        p[class="theDate"] {
            display: none !important;
        }
    }
</style>

第一行使用媒体查询，将其设置为max-device-width:480px的断点值，这意味着，当视窗的宽度小于或等于这个尺寸时，执行里面所有的代码。虽然我们只列出了一个特定的例子，但媒体查询可以很具体，你可以通过他们传递任意数量的值。

HTML结构

外容器设置一个固定宽度是为数不多的地方，这只是因为为了让桌面用户用一个更好的体验，我们需要设置一个固定的宽度。您还会注意到在我们的媒体查询中添加了一个类tableContent，当媒体查询生效时，将指定一个较小的屏幕。

<table cellspacing="0" cellpadding="0" border="0" align="center" width="700" class="tableContent">
    <tbody>
        <tr>
            <td bgcolor="#FFFFFF">
                <在这里插入一列或两列布局的代码>
            </td>
        </tr>
    </tbody>
</table>

上面的代码片段中是我们邮件的基础部分，你可以选择将一列或两列布局的代码嵌套到<td>中。

正如我们前面提到的，当我们编写HTML电子邮件，最重要的是坚持我们多年来一直坚持的原则。通常在设计一个网站时，我们使用浮动来对齐内容，但我们应该放弃我们通常使用的<div align="left">来替代<div style="float:left;">，让内容左对齐。我们这么做是因为align="left"和cellpadding="10"比float:left和padding:10px;等同的效果更可靠。

单列布局

<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
        <tr>
            <td bgcolor="#FFFFFF">
                <内容放在这里>
            </td>
        </tr>
    </tbody>
</table>

两列布局

<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
        <tr>
            <td bgcolor="#FFFFFF">

                <table bgcolor="#FFFFFF" width="320" border="0" cellspacing="0" cellpadding="0" align="left">
                    <tbody>
                        <tr>
                            <td bgcolor="#FFFFFF" valign="top">
                                <左列内容放在这里>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <table bgcolor="#FFFFFF" width="320" border="0" cellspacing="0" cellpadding="0" align="right">
                    <tbody>
                        <tr>
                            <td bgcolor="#FFFFFF" valign="top">
                                <右列的内容放在这>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </td>
        </tr>
    </tbody>
</table>

在上面的例子中我们显式设置了三个宽度，在主要的容器上设置了一个100%宽度和里面的左表格和右表格分别设置了一个320px的宽度。选择320px的原因是因为iPhone的视窗大小是320px，这似乎已成为设计响应式网页一个断点的行业标准。

当你在移动设备上查看两列布局的时候，两个表将会垂直排列，第二个表会显示在第一个表的下面。这是由于媒体查询，tableContent表格会从700px的宽度减少到320px宽度。只要表容器的宽度大于或等于两列的宽度之和，布局都将会显示的很好。

如果两列之前有一个表格单元你想隐藏，您可以使用display:none。

排版和动作触发

苹果设备文本渲染的最小尺寸是13px，因此我们在创建电子邮件时，你需要将你的最小字体设置为13px，这样才符合这些准则。为此，我给我的电子邮件的body设置了一个15px的值和给列表项目设置文本大小为13px。特别声明，如果你将你的字体大小设置为一个小于13px的值，那么在这些设备上运行时会增加风险，文本将会损坏你的布局。如界你没有使用text-size-adjust属性，更不用说，你可能会导致各种易读性问题。

测试我的电子邮件时，我注意到使用<p>标签存在很多问题，所以决定不使用标签或从浏览器或客户端继承过来的任何基本样式。最后我决定使用<div>，因为当我使用一个<span>我会遇到一些间距的问题，即例我们设置他为一个块元素。

我遇到了另一个问题，当我在同一个表格的行中使用两个div，而且他们设置不同样式(如字体大小)，一些移动客户端只会给一优先级和取消另一个。如果你的设计，这两个视觉上不同的文本效果在项目中都是至关重要的，那么你将不得不把它们放在单独的行中。

动作触发

动作触发(CTAs)，它往往被视为电子邮件中最重要的部分，同样我们需要遵守苹果的设计指南，使用这些按钮的最小区域为44 x 44像素。

有一件事我们需要注意，在电子邮件中<a href="">使用padding填充占击区域，在一些客户端上如你所料的，只有文本区域才有效。为了解决这个问题，我决定把背景颜色和内距设置在按钮的父元素上。虽然这不能给足够大的触击面积，但可以给用户一个错觉。在电子邮件查看中，我注意到，大多数人试图点击按钮的文本来解决这个问题。

<div style="background: #69BF13; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: inline-block; font-size: 15px; margin: 0 auto; padding: 20px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;">
    <a href="#" style="background: #69BF13; color: #FFFFFF; text-decoration: none;">Centered Button</a>
</div>

另外就是如果在移动页面上，通过链接触发动作，有一个很好的方式就是忽略他。在没有一个成熟的标准之前，我们没有必要为每个用户去做这些事情。

图像

你应该经常检查你的电子邮件的图片的开启/关闭，因为图片将会被所有用户假设是关闭的。

响应图片大小，电子邮件和Web页面中实现的代码是相同的。在下面的代码中，我们告诉图像包含在一个容器中，并且使用图像的宽度一直是图片容器宽度的100%。你可能还注意到图像还设置了height:auto;，这主要是为了确保图像保持长宽比例。

td[class=scaleImage] img {
    height:auto !important;
    width:100% !important;
}

Retina图像

另一块就是苹果设备上的视网膜显示屏，iPad3+、iPhone4+和视网膜笔记本。视网膜图像的关键是创建两倍大小的相同图像，小尺寸的图像和视网膜的图像。

如果我的电子邮件上想要显示一个图像，它的尺寸是320 x 320，那么对于我们的视网膜显示屏，我就应该创建相同的图像，只是尺寸为640 x 640。我们创建更大尺寸图的像，然后我们缩放到小尺寸，这样我们大图变小尺寸图能给我们提供一个高质量的图像。有两种方法你可以叫视网膜图像的电子邮件：

第一种

在这种方法中，我们在电子邮件中放置小图像，然后通过媒体查询执行的时候，在视网膜显屏设备中换出视网膜图像：

@media only screen and (max-device-width: 480px) {
    img[class="scaleImage"] {
        background-image: url(scaleImage-640@2x.png) !important;
        background-size: 320px 320px;
        width: 320px !important;
        height: 320px !important;
    }
}

第二种

在这种方法中，我们实际隐藏了实际的图像，然后在图像的容器中显示视网膜图像，当然这种方法也是使用媒体查询来实现：

@media only screen and (max-device-width: 480px) {
    td[class="scaleImage"] {
        background-image: url(scaleImage-640@2x.png) !important;
        background-size: 320px 320px;
        width: 320px !important;
        height: 320px !important;
        }
    td[class="scaleImage"] img { 
        display: none; 
        }
}

仅仅是Retina

还有一种解决方案，但它需要第二个媒体查询：

@media all and (min-device-pixel-ratio : 1.5) {
    img[class="scaleImage"] {
        background-image: url(scaleImage-640@2x.png) !important;
        background-size: 320px 320px;
        width: 320px !important;
        height: 320px !important;
    }
}

在这个媒体查询中没有设置规定的断点，只要设备具有视网膜功能。如果符合这个条件媒体查询中的代码将执行。这样处理的好处是，你可以通过媒体查询，适合的设备才加载所有的图像。

总结

尽管每个人都很喜欢好看的图像，但要记住优化是非常重要的。但在最近的一项调查中，3G网络目前比桌面连接低于40%，４G网络连接才12%。所以不要让用户等待下载图片太久，这样做是没必要的。

如果你从未接触过视网膜相关的知识，建议您点击这里，花点时间了解一下视网膜相的应用。——大漠

复制

在移动设备上空间是有限的，所以你的工作需要确保你提供的信息很清楚，简明扼要。尽管在桌面上滚动屏幕并不是太大的问题，但在移动设备上就让人有点乏味，因为使用手指比使用鼠标更费力。如果想给客户一个更好的体验，更好的消化你的信息，你必须提供的信息在移动设备上无需滚动就能查阅。

如果你觉得在移动上的电子邮件有必要隐藏桌面上的一些内容，你可以在媒体查询中使用display:none。但你需要问问自己，如果你愿意隐藏的东西是否值得。

测试

如果构建和测试普通电子邮件时间不够，会增加额外的复杂性，将会导致电子邮件有更多的问题。幸好有各种整套的测试设备和电子邮件客户端服务。Litmus和Email On Acid是首屈一指的，当你想预浏你的代码和类似的功能，你还可以通过Campaign Monitor和MailChimp实现。

当然，实际上没有什么比实际设备上测试更好，哪果你足够幸运有这么一个测试套件，那么你使用你自己的测试方式进行测试。

总结

在工作中，我一直鼓励放弃支持旧版本的浏览器，虽然如此，它仍然是备受关注的，所以响应式电子邮件设计，你还是需要权衡轻重。

媒体查询在一些些设备和应用程序中得不到支持，尤其是Blackberrys和Gmail应用程序，以及一些客户端会将头部信息全部删除，这样一来，媒体查询就没有任何意义了。但对于我来说很好，因为不支持媒体查询查看电子邮件不多，大部分人认为媒体查询的电子邮件就像是复活节中的一份意外的礼物。

值得庆幸的是移动设备和应用不断更新，这些都让我们的生活变得无比的精彩。这也意味着我们需要不断的提高我们的技术，不能一直停在原地不动。由我们设计人员和开发人员推动制造商向前发展，以确保它们不断的向前迭代开发，确保我们正在使用的和五年前使用的不一样。

案例

如果你有兴趣看一个简单的邮件模板的代码，我这里有一个演示页面，你可以点击这里查看。但请注意，你只可以在支持媒体查询的移动设备上查看。

扩展阅读

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

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

英文原文：http://jackosborne.com/articles/responsive-email-design/

中文译文：http://www.w3cplus.com/css/responsive-email-design-2.html

译文