Responsive Email设计_Responsive, EDM 教程

作者：大漠日期：2013-11-19 点击：1040

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

——作者：Sara Soueidan

——译者：大漠

开始之旅

如果你使用一个可以上网的手机阅读你的电子邮件，你可能知道，这是一种很不爽的体验。虽然电子邮件在收件箱中看非常完美，当挤到一个小屏幕上，它绝对不能使用，小字体，窄的列和布局打乱是常见的问题。

本指南中，我们将看看为什么设计移动端电子邮件成为必备的技能，里面涵盖了设计和构建移动端电子邮件的基础知识，而且还有些巧妙的技巧和技术。我们假设你知道一些关于HTML编写电子邮件的基础知识，如果没有，不用担心，我也提供了几个指南，引导您从头开始。

为什么要优化移动端电子邮件

如果你发送了邮件简信，很可能订户使用iPhone、平板或类似设备阅读你的消息的比例越来越高。我们去年调查了2011年流行的电子邮件客户端，我们发现几乎20%的用户在使用移动设备阅读邮件，这比上次在2009年所调查的数据增长了4%。iOS设备占了公开报告的90%以上。

这意味着对于设计师让你的电子邮件在移动端上的显示能像Outlook和Gmail电子邮件客户端一样，变得非常重要。事实上，移动端的邮件客户端在快速蚕食Webmail和桌面客户端，这意味着在小屏幕上提供一个最佳的阅读体验可能不是只为几个人服务了，将来这个人数会越来越多。这可能导致减少响应速度，正如Return Path最近所做的总结报告：

那些不跟踪哪个设备用户正在阅读他们的电子邮件或者优化他们的电子邮件或网站的移动设备用户将丢失。用户体验很差，可能意味着没有反应，没有行动，或者说白了就是没有抽奖回报。——'Email in Motion: How Mobile is Leading the Email Revolution',Return Path ,2011

在本指南中，我们将看看提高移动端电子邮件体验的方法：使用媒体查询实现的响应式布局，以及更先进的技术。我们也会涉及如何在设计上考虑和规则电子邮件，甚至如何更好的让你的用户在智能手机上浏览电子邮件。

为哪些移动设备设计

首先要声明一点——这里所讲的技术并不支持所有的移动端电子邮件客户端。你也可能知道，并非所有电子邮件客户端是一样的，即使在相同的设备上。一个HTML电子邮件如何显示，完全依赖于邮箱的收件箱。例如Android的默认电子邮件客户端，Google Nexus可以支持先进的CSS，可Gmail会忽略<head>中<style>标签内的样式和不能理解很多普通的CSS2属性。

值得庆幸的是，iPhone和苹果的其他iOS设备不仅可以无障碍的渲染邮件，而且使用移动端打开邮件所占的比例也很大。

记住这一点，我们将为你展示一个简单的移动端电子邮件客户端和支持媒体查询的列表。一些媒体查询支持你使用很多响应技术，我们将在本指南中会做相关介绍。

默认的邮件客户端

邮件客户端	支持媒体查询
Amazon Kindle Fire	✔
Amazon Kindle Fire HD	✔
Android 2.1 Eclair	✘
Android 2.2+	✔
Apple iPhone	✔
Apple iPad	✔
Apple iPod Touch	✔
BlackBerry OS 5	✘
BlackBerry OS 6+	✔
BlackBerry Playbook	✔
Microsoft Windows Mobile 6.1	✘
Microsoft Windows Phone 7	✘
Microsoft Windows Phone 7.5	✔
Microsoft Windows Phone 8	✘
Microsoft Surface	✘
Palm Web OS 4.5	✔
Samsung Galaxy S3+	✘

第三方邮件客户端

邮件客户端	支持媒体查询
Microsoft Outlook Exchange 3rd party app (Android)	✘
Gmail mobile app (all platforms)	✘
Yahoo! Mail mobile app (all platforms)	✘

感谢Style Campaign一直帮忙在上述的设备上做测试——当谈到移动端的邮件设计时，推荐阅读他们的博客。

设计技术

正如大多数Web设计师一样，在他们的项目中先进行设计，在这份指南中，我们也一样，在深入编写代码之前，先针对移动设备端的电子邮件进行设计。这将帮助你在规化电子邮件时做出明智的决定，加上会让我们更容易概念化，之后我们也会讨论这些技术。

我们已经开始讨论邮件的响应式设计。如果你熟悉Web环境下的术语，你会很轻松的知道，在邮件中我们将使用相同的概念和技术。如果“自适应布局”对你来说很陌生，我强烈推荐您先阅读来自"A List Apart"上的介绍。

我们会给相同的通知邮件设计两个CSS布局——一个布局是让邮件在邮箱和桌面客户端看起来棒，以及另一个布局，可以在小屏幕移动设备上很容易阅读。例如，下图是HTML邮件在Outlook下的效果：

Responsive Email设计

下面是相同的电子邮件，只是这次在苹果的iPhome Mail中查看。正如您所看到的，两个布局有明显的差异性。移动版本很窄，缺乏视觉上的混乱，就像在桌面上客户端阅读。这些归功于移动端的特定CSS：

Responsive Email设计

两者相比较，没有移动端样式，邮件就会显示成右边那张图的样子。变小了和文本难以阅读。移动端设计每天面临数以百万计的电子邮件时，这就是问题所在了。

友好的移动端布局和设计元素

设计移动端不是简单的在一个指定的移动端中写样式，还有其他的事情需要考虑到：

单列布局，没有500px～600px的宽度能更好的在移动设备上运行。他们更容易阅读，如果他们分离出来，他们会更优雅。
根据苹果的设计指南，链接和按钮应该有一个最小区域，这个最小区域为44x44。在触摸屏上，比这个更小的按钮就不太方便使用。
在iPhone上显示的最小字体大小是13px。请记住将文本使用这个样式设置，因为任何更小的设置都将容易损坏你的布局。或者，你可以在你的样式表中覆盖这个默认属性（这样做你小心点）。
与以往相比，更多保持你的信息简洁，如果可能的话，尽可能将重要的部分放在电子邮件上部。因移动设备上滚动屏幕要比使用鼠标困难得多。
如果可能，使用display:none隐藏移动布局中无关紧要的细节。元素，如分享按钮可能在桌面收件箱中会显示，但在移动设备上并不总是容易使用。

当模拟一个HTML电子邮件或模板，我们的建议是创建两个草图或线框——一个是桌面或Webmail的布局，另一个是移动设备上的布局。记住，你的行动口号是CAT，如"View deal"在上面的两种布局都要出现——它是一打开邮件就能看到呢？还是收件人必须要滚动屏幕才能看到它呢？

Responsive Email设计

现在您已经了可用给移动端设置样式表，接下来我们进入代码制作阶段。

移动端电子邮件的编码

当网页设计师谈论移动端样式表，通常都不是在说给移动端一个完全独立的样式表，而都是在说媒体查询。这有一个最简单的示例，看起来像这样：

<style type="text/css">
    @media only screen and (max-device-width: 480px) {
        /* 移动端指定的样式写在这里 */
    }

    /*常规的样式写在这里*/
</style>

接下来我们来分解@media的声明。首先，为了在指定在移动端使用，我们有一些标准，必须满足电子邮件在客户端使用的样式。这个@media only screen只会让电子邮件在屏幕上显示。接着设置了设备的最大视窗宽度为480px。这个很重要，因为很多移动设备的可视区域都有480px的宽度。而max-device-width:480px是一个常用的值(因为它是iPhone横向显示的屏幕宽度)，你也可以调整这个值以适应较大的移动设备，比如说平板设备。你甚至可以像下面这样来设置：

@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }

所以，是时候重新审视我们前面的示例了，一个电子邮件在移动端上被缩小显示的布局。这里的设计是在iPhone Mail下的效果：

Responsive Email设计

在这个例子中，我们在HTML中的table应用了一个contenttable类名，用来包含文本和图像。这是其中的一段代码：

<style type="text/css">
    @media only screen and (max-device-width: 480px) { 
        /* 移动端指定的样式写在这里*/
        table[class=contenttable] { 
            width: 320px !important;
        }
    }

    /* 常规样式写在这里 */
    table.contenttable {
        width: 640px;
    }
</style>

这个contenttable类在这里很有趣——当查看电子邮件设备的屏幕宽度大于480px时，它没有效果。然而，当屏幕宽度是小于或等于480px时，表格宽度将缩小为320px。属性选择器被用来避免在Yahoo! Mail中的一个不寻常的故障。我也已经添加了!important;以确保移动端指定的样式更优先。但除此以外，它是普通的CSS。同样，你可能会有其他声明，如：

@media only screen and (max-device-width: 480px) {
    /* mobile-specific CSS styles go here */
    table[class=contenttable] { width: 325px !important; }
    img[class="headerimage"] { width: 325px !important;  }
    p[class="date"] { display: none !important; }
}

现在你已经知道代码是如何工作的，我们建议您下载或修改我信的移动端电子邮件模板。

假设到目前为止，指南中的例子有意义，我们将开始看几个更高的手术，用来适应移动设备上查阅电子邮件。

创建两列到一列的响应式布局

单列布局常是用来优化HTML格式的邮件在移动设备上显示方式，有一种优雅的试来创建响应式的２列布局，而无需在样式表中求助媒体查询。

两列布局通常是让桌面邮件客户端，如Outlook，来显示更多的内容，但在移动设备上阅读将是一件痛苦的事情。我们将解决这个问题。

电子邮件设计的黄金法则之一就是在有可能的情况下，使用HTML的属性来代替CSS。CSS样式无法支持所有电子邮件客户端，而HTML属性却可以。例如，属性align="left"和cellpadding="10"要比CSS样式float:left;padding:10px;更可靠。这正是我们将使用这些属性构建我们的2列布局。

让我们来看一个在Outlook 2007中的布局：

Responsive Email设计

在上面的例子中，我们有一个表格的容器的宽度为640px，里面嵌套了两个宽度为320px的表格当成列，类似于我们先前的例子。为了让内容与边缘一定的间距，在这两个表格中设置属性cellpadding="20"。

在Web代码的编写中，我们一般使用float:left，让列靠左，让他们并排排列。相反的是，我们可以使用align="left"来代替。只要表格容器宽度大于或等于两列的组合的宽度，都非常适合这种方式。

到目前为止，下面是简化的２列布局的代码：

<table width="640" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
                <tr>
                    <td><p>Column Left Content</p></td>
                </tr>
            </table>
            <table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
                <tr>
                    <td><p>Column Right Content</p></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

结果如下图：

Responsive Email设计

如果格容器宽度是640px，你会得到一个两列布局。但比这个宽度小的时候，右列将显示在左列的下面。使其宽度和列表(320px)一样，这样你只有一列布局，适合iPhone显示，而不需要放大。我们只需要在HTML的媒体查询中添加简单的一行代码就可以实现：

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

<table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable">

结果是一个响应式布局，在桌面或Web客户端显示两列，然后切换到iPhone　Mail和Android默认的电子邮件客户端会显示一列。

添加渐进增强

在网上，许多响应式网站转找到移动设备上通过使用一种称为渐进增强的技术。这包括了一个类似按钮或链接的元素，用来显示/隐藏内容的交互效果。维基百科在移动应用程序上使用的一样。我们也可以将他使用在移动端上的电子邮件。如果一个电子邮件有多篇文章，我们可以使用CSS来显示和隐藏邮件内容。在桌面邮件客户端，我们想要一个标题和文件显示在每一篇文章中：

Responsive Email设计

然后在移动客户端，我们只希望标题显示出来，然后通过一个显示/隐藏按钮来切换文本显示和隐藏。我把电子邮件做目录列表形式，大大缩短了显示消息的长度：

Responsive Email设计

要做到这一点，我们首先需要在HTML代码中创建一个标题、文本和一个显示/隐藏按钮。我们还将添加几个类来控制移动端上show/hide按钮。这是一个简化片的代码，用于每篇文章：

<td>
    <h4><a href="http://yourdomain.com" class="link">First heading</a></h4>
    <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>
    <div class="article">
        <p class="bodytext">
            <img src="kitten.jpg" style="float: left;" >Pellentesque habitant morbi...
        </p>
        <a href="http://yourdomain.com">Read more...</a> 
    </div>
</td>

注意mobilehide类名,mobileshow和article——这些将处理大部分的事情。

在我们的样式表中，在桌面和Web电子邮件客户端我们使用display:none将隐藏“显示/隐藏”按钮。在我们的样式表中像这样：

a[class="mobileshow"], a[class="mobilehide"] {
    display: none !important;
}

我们通过使用媒体查询，确保“显示/隐藏”按钮仅显示在移动设备上。这里的代码，包括早期的.mobileshow和.mobilehidden一些让按钮在webkit下更友好的样式：

@media only screen and (max-device-width: 480px) { 
    a[class="mobileshow"], a[class="mobilehide"] { 
        display: block !important; 
        color: #fff !important; 
        background-color: #aaa; 
        border-radius: 20px; 
        padding: 0 8px; 
        text-decoration: none; 
        font-weight: bold; 
        font-family: "Helvetica Neue", Helvetica, sans-serif; 
        font-size: 11px; 
        position: absolute; 
        top: 25px; 
        right: 10px; 
        text-align: center; 
        width: 40px;
    }
    div[class="article"] {
        display: none;
    }
    a.mobileshow:hover { 
        visibility: hidden;
    } 
    .mobileshow:hover + .article, .article:hover {
        display: inline !important;
    }
}

如果一切顺利，在iPhone中电子邮件的内容通过一个“显示/隐藏”按钮来切换内容。如果你想在自己的电子邮件系列中尝试使用这种技术，随时查看Github上的示例源码和自己决定适用自己的代码。非常感谢Eric Gideon免费贡献这个项目。

针对设备使用媒体查询

您可能已经注意到，在指南中我们使用一个标准的媒体查询：@media only screen and (max-device-width:480px){...}。针对于苹果的iPhone和其他手持设备是很强大的。因为他们占了手机邮件客户端的绝大数部分。

如果你或你的客户使用的是平板电脑、Android设备和一些更奇特的屏分辨阅读邮件，那么你就需要相应的媒体查询来匹配对应的设备。

正如你所知道的，媒体查询并不支持所有的移动电子邮件客户端——例如，Gmail在任何平台下都将不会显示响应式电子邮件。为了能更好的了解电子邮件客户端的支持媒体查询的程序，可以查阅下表相关信息。（文章开头列表也列出相关信息）。

微调你的媒体查询

我们回到前面的媒体查询中max-device-width: 480px;的规则。这告诉移动电子邮件客户端(浏览器)低于480px的阈值，其中关于移动端的布局样式写在这里面。超过个值，媒体查询之外的样式将被调用。

然而，你可以设计更具体的尺寸，例如，针对大于或等于320px但小于或等于480px的显示。这有一个示例：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ... }

很多人并不知道媒体查询可以很专注——除了可以围绕视窗的宽度和高度设计之外，还可以根据屏幕的方向（横屏和竖展）和像素比率设计。

有关于媒体查询与Responsive设计更多的信息可以点击这里查阅——大漠。

它有能力通过严格的精度提供目标设备。想创建一个iPad布局？确认，针对Retina显屏？为什么不，针对性的添加样式风格常常是有好处的，有时只需要添加几行代码，可以让手机和平板电脑都很好的显示电子邮件。

我们的朋友Andy Clarke针对流行的设备创建了一个美妙的模板。这是设计和构建电子邮件设计的一个很好起点，并不局限于两个480px的侧边栏。

难缠的Android设备

据说，许多人批评使用480px创建固定宽度的布局，通常在业内把这个称为“断点”。正如Marc Drummond所言：

如果你使用的是Web响应式设计技术，那么意味着使用默认的devic-width作媒体查询的断点大多是毫无意义的。—— Marc Drummond,"Responsive web design default breakpoints are dead"

Marc承认外部有很多断点一说，Ansy Clarke早先的模板，尤其是在早些时候的Android设备就有。此外，新的移动设备出来，今天针对Android手机做的媒体查询，明天可能就变得冗余。

使用媒体查询创建流体布局

提议的替代方案是设计流体布局，优雅适应浏览器窗口的调整的宽度。

通常使用一个简单的媒体查询，给元素的宽度应用一个百分比（而不是固定宽度320px），或许你的邮件内容能在标准的桌面上浏览，但低于一定的视窗宽度，可以自动扩展或缩小来适应。因此，电子邮件可以在各种设置中得到最佳的显示，从小型的视窗，到小屏幕的设备：

Responsive Email设计

图片自适应样式，可以参阅Fluid mobile email design (part 4)。

在现实中想看这种技术，我推荐您调整你的浏览器窗口阅读这封星巴克的电子邮件。这个例子是由设计师Ed Melly提供。

我们有一篇详细的博客文章，你可以系统的学习HTML邮件流体布局和在接下来的一节内容中，将会谈到如何让HTML电子邮件中的图片能够自适应。

最后提醒大家——虽然它很容易让你设计一个响应式电子邮件，但需要注意不要搞乱整个大局。如果有85%的移动用户查看你的电子邮件是在320px x 480px视窗下，你没有必要为了一个在用184px x 307px的用户来打破你的布局。

优化移动端的图像

移动视窗的可视区域是有限的，这意味着你在HTML电子邮件中添加图像应该有所顾忌。然而，支持CSS样式的客户端，像iPhone mail意味着有很多种方法可以实现，你可以按需使用。

在这一节中，我们将看一些技术，利用支持CSS的属性，如background-image。这些技术不仅会让你的设计在移动设备下能够进行优化显示，还可以确保在任何宽度下图片看起来很清爽。

使用background-image

我们通常建议任何人在他们的电子邮件制作中不要使用background-image，但对于iPhone和Android的默认邮件客户端，我们正在讨论客户端可以支持CSS以及媒体查询带来的所有好处。其中一个好处是，当一个电子邮件在移动设备上阅读时，通过隐藏原始图片，使用背景图片来替代，让图片在移动端上更友好的展示。

传统上，我们建议调整图片的大小以适应移动设备的视窗。然而，问题是以这种方式调整图片大小，会让任何信息变小阅读或难以阅读。一个更好的选择是给移动用户创建一个特独的图像。我们会通过一个单元格或div来包裹图像，然后创建一个媒体查询，隐藏原始图片和使用另一个背景图来代替。

@media only screen and (max-device-width: 480px) {
    td[class="headercell"] {
        background-image: url(images/header-325.png);
        width: 325px !important;
        height: 115px !important;
    }
    td[class="headercell"] img { 
        display: none; 
    }
}

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class="headercell">
            <img src="images/header.png" border="0" width="600" />
        </td>
    </tr>
</table>

这里可以看出头部之前和之后的图片是怎么换出的：

Responsive Email设计

使用这种技术的一个好处是可能通过缩短图像来缩短电子邮件高度，如上图所示。当谈到移动电子邮件，越短越好。

流体布局的图片缩小

上面介绍使用background-image交换的方法有一个问题存在，电子邮件要有一个宽度才能生效。这些天，移动设备可以有各种各样的形状和大小，因此使用流体布局的电子邮件会更受欢迎。显而易见的解决文案是使用background-size，在早期的媒体查询使用的是background-size:100%,而Elliot Jay Stocks指出，使用background-size:cover;是一种更好的选择：

@media only screen and (max-device-width: 480px) {
    td[class="headercell"] {
        background-image: url(images/header-480.png) !important;
        background-size: cover;
        }
    td[class="headercell"] img { 
        display: none; 
        }
}

谢天谢地，webkite内核的电子邮件客户端完全支持background-size属性，这意味着，在iOS和Android默认邮件客户中可以放心的使用background-size。如果有疑问，我们建议还是使用老方法，这也是在一个流体布局中坚持使用常规<img>标签的主要原因，你可以在样式中这样调整：

@media only screen and (max-device-width: 480px) {
    td[class=headercell] img {
        height:auto !important;
        width:100% !important;
    }
}

为视网膜显示器提供高分辨率图像

最后我们要提的是在苹果的视网膜网显示器提供的图片显示幅度。这在我们之前有讨论过，鉴于这些显示器不会很快消失，我们有必要考虑进来。

诀窍就是创建双倍大小的图像，从而使用图像在iPhone4,4s的ipad显示屏显示很清晰。例如，使用我们之前的背景图像，我们需要创建一个头部图像，真的尺寸是650px x 230px(如，header-325@2x.png)，但在移动屏幕上缩小了。下面是这个媒体查询的示例代码：

@media only screen and (max-device-width: 480px) {
    td[class="headercell"] {
        background-image: url(images/header-650@2x.png) !important;
        background-size: 325px 115px;
        width: 325px !important;
        height: 115px !important;
        }
    td[class="headercell"] img { 
        display: none; 
        }
    }
}

如果你想给视网膜使用特殊样式，你可以使用下面的CSS来声明：

@media all and (min-device-pixel-ratio : 1.5) { ... }

有关于更多的信息，我们推荐您阅读Ben Frain写的这篇文章。

虽然这图像只会在Retina屏下显示，但问题是，所有支持媒体查询的电子邮件客户端将背负下载高分辨率图像。事实上，使用这种技术的缺点是更大的图像，文件更大，导致邮件加载时间过长。特别是，不是每个人都将受益于高分辨率图像的时候，请明智的使用这种技术。

如果您对Retina一点都没有了解，推荐你点击这里查阅相关信息。——大漠

优化你的订阅表单

优化移动端的邮件并不仅仅限于确保你的邮件能在小屏幕上阅读。如果移动端用户无法订阅你的邮件，那么在移动端上做邮件优化还有什么意义呢？

好的一面是，移动设备如iPhone和Android手机可以远程做一些事情，但有几件事情，我们的设计和程序员可以做，使其尽可能的易于使用。最明显的好处是使用最少的时间和精力为移动设备做优化，可以让用户使用效率更高和得到更多的用户。

下面几点加上一个功能简单的例子，告诉你怎么为自己制作一个邮件订阅：

顶部对齐标签：一个常见的问题在移动设备上使用一个表单，当在移动端浏览器选择表单的域，对应的标签会看不到。在初始缩放阶段，有一个左对齐的标签，如“输入您的邮箱地址：”,但你开始选择文本框，视窗放大，标签出了自己的视线，有可能就看不到了。解决的方案是，要以使用顶部对齐标签，要到在文本的value中添加一个标签值。后者不会占据太多的垂直空间，但是
有可能有点讨厌，你进入输入阶段，标签就被隐藏了。
使用input type="email"：如果你使用input type="emial"在表单的邮件域上，在iOS设备是会指定一个键盘，包括常用的字符，就像@。
限制缩小表单（如果不是整个网站）：使用媒体查询添加移动端指定的CSS样式，防止变小和去除视觉上的混乱，提高可用性。毕竟没有比只输入了半个文字，字段就消失离开了屏幕更笨重。就我个人而言，我赞成给移动设备使用流体布局，仅仅因为你不能预测视窗的尺寸或方向。简单制作文本字段的宽度为视窗宽度的80%，可以大大改善订阅邮件的外观和可用性。
注意多选项字段：当我们谈论狭窄的布局，要谨慎这样的做法迫使所有的内容迫使成为一列——尤其是复选框。当选项是一个内联样式，事情会变得更麻烦。经常下拉列表更好的选择是单选按钮和减少大量的滚动形式。
保持缩放：最后，这些大量的设计技巧没有特定的形式——更多是网页设计形式。包括想法设法在移动设备上使用viewport meta标记来设置初始的规模/缩放，特别是构建独立的表单时候。当应用他的时候，他们可以防止用户不小心缩放，在视线范围中失去大部分的形式。在一个HTML页面中，这就是一个典型的viewport meta标签<meta name = "viewport" content = "width = device-width, user-scalable = no" />。其他的几种形式，可以查看苹果的meta标签文档。

我们创建了一个简单的CSS模板，向您展示如何优化你的表格。你可以看看这恰好像我们基本订阅表单的代码。你可以使用你的浏览器和移动设备访问这个简短的链接：http://goo.gl/7xDuu。

你可以把CSS中的媒体查询运用在单独的表单上或你的页面上。

创建友好的文本邮件

我们不想限制HTML电子邮件设计，我们要针对纯文本的优化添加一些指标。当谈到格式化文本，有两种说法——在信息中每60~65个字符添加一个换行，其他的不需要。有优点就有缺点，具体要取决于电子邮件客户。

我们已经找到了60~65字符的限制最适合桌面和Web邮件客户端。这是因为在Windows窗口中预览中可以无限文本的宽度。段落的文本超过60个字符后就就得非常难以辨认，遍历一长串的文本结束后会开始另一个文本。

然而，在移动设备上情况并不一样。在iPhone的邮件(见上图)，你可以看到65个字符的文本换行在容器中导致非常参差不齐。可以说，它比阅读一个无限长的行文本更糟糕。

如果你使用包含换行符的纯文本发送HTML电子邮件，大多数移动邮件客户端不会返回查看这些文本。所以它需要程序员手工花相当长时间创建一个良好的格式化HTML文本。然而，如果你只发送纯文本，你需要决定使用客户端走哪条路。如果你有足够的多的移动端用户阅读邮件，添加换行可能不是一个很好的方法。但在其他情况下，花时间进行格式化还是值得的。

案例学习：Twitter

现在我们已经有了这个理论，我们应该把这些技术付诸到实践中，创建一个真实的电子邮件。不是任何电子都可以每天的发送到数以百万计的用户手中。

在不太遥远的过去，Twitter的邮件通知是无法发送到时髦的移动设备上。问题是，结合小文和一个宽布局在小屏幕中缩放他们几乎是不可读的。

我们决定为它做点什么。用五分钟时间，我们应用一个简单的修复，让这个差异变小，实现一个实用性和可读性的邮件通知...这样可以帮你大大提高电子邮件营销活动在移动设备上的显示。

在这个案例中，我们将向您民示我们如何把一个电子邮件通知更好在iPhone或Android或者支持媒体查询的电子邮件客户端更好的阅读。

搞定小的文本

首先，我们想方法显示更多的Twitter通知——小的文本。为什么文本看起来很少，那是因为710px宽布局强制在移动设备上的电子邮件客户端查持邮件，会显著的缩小整个宽度来查看消息。让我们针对小型显示器的媒体查询来解决这个问题：

@media only screen and (max-width: 480px) { ... }

如果您已经阅读过响应式电子邮件设计相关的内容，你可能知道可以在<style>标签内添加样式声明——样式表中只解释满足@media only screen and (max-width:480px)的电子邮件客户端样式。所以让我们把它用在适应这里的布局。首先，在这个电子邮件信息中有两个table。

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td style="background-color:#e9eff2; padding: 30px 15px 0;">
            <table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">

在结构中通过添加类名wrappertable和wrappercelland来控制他们的大小：

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable">
    <tbody>
        <tr>
            <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">

现在我们在媒体查询中通过这些类名达到我们需要的目标：

@media only screen and (max-device-width: 480px) {
    body {
        width: 320px !important;
    }
    table[class="wrappertable"] {
        width: 320px !important;
    }
    table[class="structure"] {
        width: 300px !important;
}

上面使用的宽度意义非常重大，特别在是iPhone的竖屏，显示的宽度是320px。邮件布局缩小为320px的时候，他的布局默认为100%,这意味着不仅整个设计是可见的，而且文本和图片也看起来清晰。

页头的图片

现在，如果Twitter标题图片不是有问题，上面技术是好的。所以我们会做一些特殊的处理，将图片分成３个部分。在小屏幕布局下可以隐藏。这是原来的代码：

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />

在这里，标题图片分成三块：

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">

您可能已经注意到了，logo左边的图有一个类名logo-left.png，右边的图有一个类名logo-right.png。隐藏这些比较简单——在现有的媒体查询中添加下面的代码：

img[class="logo"] { display: none !important; }

最后，在手机屏幕上头部图像和布局都会缩小。

目前，除了上述的之外我们再添加一点保险因素。我们在元素上添加一些额外的内距和调整字体大小。但最终，最主要的变化是通过几行代码，只是几分钟的事情。结果不言自明，如下图所示：

Responsive Email设计

数以百计的人支持他的变化和加入游说Twitter来改善他们的邮件通知。开心的是，Twitter听取了众人建议，对他们的邮件通知进行了主要的设计。

当然，你也可以在你自己的HTML电子邮件设计中做一些代码优化。这里的代码，免费帮你测试出适应你自己的需求。下载代码

现在我们可以开始

这篇文章被作为设计一个移动设备电子邮件的起点。移动屏幕总是在改变，同样的，为了适合各种各样的电子邮件客户端，需要使用新的技术。所以如果你有一个好的建议，或者改善我们的指南，或者对响应式电子邮件有任何疑问一定要和我们取得联系。如果你有更好的想法或者思路可以在下面的评论中与我们一起分享。

扩展阅读

向大家提供了一个支持所有流行的移动、Web和桌面邮件客户端的完整指南。可以下载关于18个客户对CSS支持的完全指南，或点击这里查阅前10邮件客户端对CSS的支持。

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

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

英文原文：http://www.campaignmonitor.com/guides/mobile/

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

上一篇: 初学Foundation之导航栏 | 下一篇: 从头开始构建一个HTML电子邮件模板

w3cplus

Responsive Email设计

开始之旅

为什么要优化移动端电子邮件

为哪些移动设备设计

默认的邮件客户端

第三方邮件客户端

设计技术

友好的移动端布局和设计元素

移动端电子邮件的编码

创建两列到一列的响应式布局

添加渐进增强

针对设备使用媒体查询

微调你的媒体查询

难缠的Android设备

使用媒体查询创建流体布局

优化移动端的图像

使用background-image

流体布局的图片缩小

为视网膜显示器提供高分辨率图像

优化你的订阅表单

创建友好的文本邮件

案例学习：Twitter

搞定小的文本

页头的图片

现在我们可以开始

扩展阅读

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品

w3cplus

你在这里

Responsive Email设计

开始之旅

为什么要优化移动端电子邮件

为哪些移动设备设计

默认的邮件客户端

第三方邮件客户端

设计技术

友好的移动端布局和设计元素

移动端电子邮件的编码

创建两列到一列的响应式布局

添加渐进增强

针对设备使用媒体查询

微调你的媒体查询

难缠的Android设备

使用媒体查询创建流体布局

优化移动端的图像

使用background-image

流体布局的图片缩小

为视网膜显示器提供高分辨率图像

优化你的订阅表单

创建友好的文本邮件

案例学习：Twitter

搞定小的文本

页头的图片

现在我们可以开始

扩展阅读

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品