如何设计响应式邮件

时间 2019-11-17

标签如何设计响应邮件繁體版

原文原文链接

在过去的几年中，移动端使用的飙升，使咱们向网络用户提供内容的方法引发了一场进化或者革命。最终目标是流体的，适应移动端和device-agnostic　Web以及一个已成为受人青睐的学派：响应式设计。然而，虽然响应式设计思想高涨，而电子邮件设计和开发一直在努力跟上。 css

在某种程度上，HTML电子邮件对开发者而言是一个异常复杂的介质，这是一个铁的事实。古老的电子邮件客户技术没法呈现现多的许多的规则，导致一些代码无效。但电子邮件仍然是一个关键的营销渠道，这很是的重要，不能让人忽视的是2012年上半年Litmus公布了一个在移动设备上打开电子邮件的报告，报告显示使用移动设备查阅电子邮件增长了80%。同年Campaign Monitor显示，第一次他们的移动电子邮件打开率实际上已经超过了桌面和Web邮箱。 html

显然在移动端开发以前进行适当的分析是重要的。但制做一个响应式电子邮件能够确保使用桌面和移动设备的用户能获得一个优秀的用户体验，以及４G网络的到来，移动端的趋势更是势不可挡，因此说为何响应式设计不会过期。 web

格格不入

若是你曾经不幸的在移动设备上打开过一个固定宽度的电子邮件，你就会明白须要响应式电子邮件设计。忽然打开屏幕，多栏布局能够放大，以便缩小字体大小而变得不清不楚。用户可能放大，但使人气愤的是，用户要不断的从左到右，水平滚动，以便阅读内容。连接小，并且挤在一块儿，彻底没有考虑手指触屏。在小视窗上对比，每每让人难已阅读。显然，移动端的优化很重要，但最好的方法是什么呢？浏览器

移动端的最佳实践

在编写代码以前，考虑设计特性能够大大改善移动端用户的体验。不管屏幕大小，能够说这都是明智的。网络

清晰、简洁的内容：小屏幕意味着它如今比以往任什么时候候更重要的是让用户更有效的获取重要信息。
单列布局：简单是关键，布局没有比640px宽度更好用。单列布局能够确保你视窗放大时没有内容丢失。
一个吸引人的标题：这是一个电子邮件营销在一个拥挤的收件箱中最有效的武器。保持标题简短精悍。
大的动做触发面积(CTA)：不要惩罚胖手指！苹果的iOS人机交互界面设计指南建议点击目标区域的面积为44 x 44。
慷慨的字体大小：确保你的信息能够很容易地阅读。
Pre-header：另外一个关键领域就是在收件箱中的能见度。尽可能避免“浏览器显示”这样的文本字样。
左对齐文本：有许多缘由调整重要元素在左边内容区。（根眼动跟踪研究代表，西方用户大部分注意力集中在左边的电子邮件内容。这并不足觉得奇，由于咱们从左到右读取文本。某些操做系统，尤为是Android，内容没法缩放适应屏幕，所以只显示电子邮件的左半部分。从人体工程学的角度来看，大多数用户会发现它容易与屏幕左下角/手持中间元素操做。）
结构垂直排列：减小屏幕的地方每每任什么时候候采用的是折叠的想法。重要的商品交易的可点击区域应该尽量的靠近顶部；若是不能当即看到，也许他们将失去使用的功能。
谨慎使用图像：不要觉得会看到图片。iPhone的本地电子邮件应用程序将显示默认图片，但不少客户端不会显示图像。

这些技巧能够提升移动端用户体验，可是你能够，并且应该进一步优化。因为移动电子邮件客户端不断增加对CSS3的支持，响应式电子邮件设计如今是可能的。 ide

开始

如前所述，HTML电子邮件制做严重缺少一个标准，对于外行来讲，接下来将带你回到一个早期的Web开发时代。因为HTML电子邮件客户端渲染引擎所制，布局必须使用表格和CSS样式必须使用行内样式。几个电子邮件客户将彻底无视<head>内的<style>样式。工具

有一些电子邮件模板可使用，我建议使用Sean Powell的HTML Email Boilerplate做为起点，但为了演示，咱们从头开始。布局

有关于HTML Email Boilerplate的中文介绍，能够点击HTML Email Boilerplate源码阅读和HTML Email Boilerplate——大漠 post

若是你喜欢跟随着代码学习，你能够多这里下载本文的模板。学习

demo download

文档类型(Doctype)

Hotmail和Gmail会自动插入XHTML 1.0 Strict 文档类型。虽然不是一个坏主意，但重要的是用它能够完全地测试您的电子邮件和没有文档类型的电子邮件客户端能够自动生成。

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

Email Acid对电子邮件的文档类型进行了普遍的研究，感兴趣能够点击这里。

媒体查询(Media queries)

咱们如今能够插入一个视窗的meta标签，以确保咱们的电子邮件在移动设备上能够正确的显示。指定内容类型和一个标题标签也是一个好主意。若是你打算在电子邮件中提供一个“浏览器查看”的一个连接，这是一个好主意，但忽略了一点，在不少电子邮件客户端会忽略这一点。

由于在电子邮件中有可能会忽略“content-type”，明智的作法是在你的电子邮件中全部特殊字符都最好使用HTML实体符进行编码。

还有几个确保咱们电子邮件能跨平台，咱们还需设置几个他管理费样式。

<head> <meta name="viewport" content="width=device-width, initial scale=1.0"/> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Email subject or title</title> <style type="text/css"> .ExternalClass {width:100%;} img {display: block;} </style> </head>

注意：视窗meta标记对黑莓有负面影响。

如今，咱们能够插入媒体查询，有多少取决于你但愿每一个设备特性所须要。在这个示例中，咱们将使用的媒体查询只有一个——大多数设备屏幕大小不大于600px是现代手机和触摸屏作出有利于移动设备优化样式。此外，咱们我假设遵循通用移动最佳实践技术，早前也说过，手机用户浏览更大的布局会运到重大的可用性问题。

咱们以机样的方式使用媒体查询构建一个网站时，若是视窗大小符合媒体查询条件时，将应用媒体查询里的样式。

@media only screen and (max-width: 600px) { table[class="hide"], img[class="hide"], td[class="hide"] { display:none!important; } }

在上面的例子中，屏幕小于600px时，经过给带有类名hidden的元素设置display:none来隐藏元素。!important能够确保覆盖任何内联样式。这是响应式电子邮件设计的基本原理：在<head>头部样式中经过!important来覆盖HTML文档中的内联样式，而且根据媒体查询特定的屏幕尺寸来覆盖这些样式。有一个明显的例个是Gmail应用程序将会忽略<head>内部的任何样式。然而，内容的居左会确保Gmail用户有一个更好的用户体验。显然这并非一个理想的解决文案，目前，响应式电子邮件设计尽量多的想法是对前沿技术的妥协。

值得注意的是，咱们针对HTML元素的CSS属性选择器来克服Yahoo邮件的渲染问题。

因此咱们能够看到，媒体查询选择性的显示内容是一个有用的工具，但咱们也可使用它们来让我空调其余功能的布局。或许最重要的是，咱们能够约束咱们电子邮件的列宽——移动体验最大的关键。

@media only screen and (max-width: 600px) { table[class="content_block"] { width: 92%!important; } }

咱们已经在咱们的媒体查询中设置了，当屏幕宽度小于600px，全部类名content_block元素宽度调整为92%。如今咱们要作的就是把内联属性指定宽度(600px)和定义类content_block任何表格，咱们有一个固定宽度的容器，而后在移动设备下指定一宽度的比例。

给这个容器的子元素的宽度属性都指定为百分比，这是一个基本响应式电子邮件模板。

做为一个经验法则，为了照顾Webkit自动调整<body>标签文本大小，尽可能保持字体大小最低在12px以上。

按钮

调用操做(CAT)一般是营销邮件最重要的部分。他们应该是引人注目的，良好的，最重要的是使用。一个强大的CAT标准是根据不一样的动做有不一样的光标或手指。响应式电子邮件强大功能是在小触屏设备上提供一个手指可操做的按钮，让手指操做不受图像阻碍。

不幸的是，这种按钮不能广泛显示，由于他们依赖于padding属性，但在一些桌面电子邮件客户端并不支持。

@media only screen and (max-width:600) { a[class="button"]{ display: block; padding: 7px 8px 6px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff!important; background: #f46f62; text-align: center; text-decoration: none!important; } }

上面的样式声明将改变带有类名button的标签，只要屏幕宽度不大于600px，按钮变大，好看，彩色的，并且跨越内容区域的宽度。CSS3支持不该该是一个问题，咱们能够撰写咱们的目标是合理的现代的移动技术。

<a href="#" style="color:#f46f62; font-weight: bold; text-decoration: underline;">Click me!</a>

内联样式知足鼠标的用户能够点击和更大精度但覆盖这些样式连接，可让触屏用户减小交互的错误。重要的是，这种方法不依赖于图像，所以避免了图像加载阻滞存在的可用性问题。

结论

响应电子邮件设计仍然是一个妥协方案。使人困惑的是一系列不一样的设备，电子邮件客户端的渲染引擎给设计人员和开发人员带来一个艰巨的任务。但随着科技的进步变得更容易为用户提供适当的布局，他们能够绝不费力提供有效的交互。越来载多的电子邮件客户端支持媒体查询改变了移动电子邮件的外观和优化，而且为咱们提供了一个平台，大大提升更多的用户体验。如今对咱们来讲，设计人员和开发人员，尝试有创意的方法来让更多的移动用户有更好的体验。

你设计过电子邮件吗？你使用响应式方法吗？请在评论中让咱们知道。

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

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

英文原文：http://www.webdesignerdepot.com/2013/06/responsive-html-email-design/

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