BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 魏广程 关注 0 他的粉丝 发布于 2013年5月23日. 估计阅读时间: 11 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

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会过滤掉邮件中的<style>标签(搜索无果,向Gmail团队发信也没有回应,推测为安全原因)。因此,只有内联在元素中的样式才会得以保留。邮件中过多的内联样式会直接导致代码的可读性急剧下降,加重修改的负担。

使用一些css inline工具会缓解这些问题。

3. 响应移动设备

移动设备中,iOS和Android设备目前无疑占据了绝大多数。 Android Gmail由于限制<style>标签导致无法实现响应式设计,因此,主要精力应该放在iOS邮件客户端和Android系统原生的邮件客户端上。iOS设备中,由于尺寸较统一,初步实现响应式邮件并不困难;Android设备中,屏幕比例碎片化严重,像素密度也并不一致。

对此,可以使用viewport进行调整。

4. iOS设备针对性优化

根据Campaign Monitor的报告[vi], iOS在各邮件客户端中占有35.60%的市场份额, 比例远远大于其他客户端。因此,对于iOS设备的优化是十分必要的。iOS邮件客户端自动识别日期、网址等的特性和视网膜屏幕有可能使得精心设计的邮件变得一团糟。

实现的解决方案

针对这几个方面,邮件编码时的思路可以考虑以下实践:

使用table行主要布局,使用css针对整。根据Microsoft Word引擎渲染html时对table结构有着较良好支持的特点,可以选择用上个世纪的层叠table风格作为基本布局。同时,根据Outlook 2007、2010、2013系列的css兼容性报告,可以发现Outlook系列不支持多数布局相关的css,比如position、float、visibility、display、top、bottom、left、right等等。另外,如果针对它布局时用到margin、padding,也最好依靠table的cell来实现。对于table结构划定时,也需要考虑到之后的移动版本的实现 。

使用inline style进行全尺寸客户端的布局,并在style标签中使用!important进行移动端布局premailer是一个方便的的进行样式内联的工具。以 premailer的Ruby gem为例,该工具会在项目中将文件分成一份html和两份css,由基础不带样式的html和一份内联css生成内联样式html,之后再将另一份用于响应式布局的css内容添加到头部的<style>标签中。

图 1 响应式邮件布局生成过程

桌面及Web客户端使用img标签,移端使用background,并藏相应img标签 。这样可以应对图片本身需要变化的情况,同样的技术也可以用于一些不易实现的布局的改变。

例如:在遇到下图左侧布局 需要转换成右侧布局时,可以在左侧显示图1,并为图2留出空间。在转变为移动端布局时,只需要将图1隐藏,再设定图2的background图像和大小。

图 2 响应式布局利用图片和背景交互显示的示例

于视网膜屏用大幅背景图片、svg图片或css绘图,并且iOS端中自动识别的链接样式使用!important行覆盖。在针对iOS的优化中,视网膜屏幕是第一个需要考虑的因素。由于普通的图像在视网膜屏幕下会显得模糊不清,因此需要用更大的图像进行替换。视网膜屏现在多见于Mac、iOS、Android设备,因此可以考虑使用svg元素/图片或者进行可能的css绘图替换一些像素图片。另外,iOS的邮件客户端会将地址、链接、电话等信息识别出来并加上链接和样式,破坏邮件效果。为了保证视觉效果的统一,可以在头部<style>标签中,对可能被识别的元素中<a>标签加上与父元素相同的样式以及!important标记,重新进行覆盖。

测试终端众多

对于主要的邮件客户端市场份额,Campaign Monitor公布在网站上2012年九月的统计数据如下:

图 3 2012年9月邮件客户端市场份额

由于邮件客户端分布较浏览器分布更加分散,对可能的客户端一一测试会消耗大量的资源。

测试的解决方案

由于主要的邮件客户端的数量远远多于浏览器,因此,当企业没有足够空闲测试人员/机器的时候,可以考虑使用线工具litmus或者 Email on Acid来针对邮件外观进行测试,最后再对有条件使用真实客户端的情况进行细致的调整。

Email on Acid可以直接注册进行免费的测试(仅限使用AOL、Gmail、Outlook 2003三个客户端),而Litmus则需要关联信用卡才可以获得7天的试用期。

测试的步骤一般分为:选择客户端,上传/发送邮件内容,等待各客户端处理、查看各客户端截图。

总结

针对邮件客户端的邮件布局,和针对浏览器的页面布局 ,其区别在于客户端多样性和对于实现的限制。

页面布局中,浏览器一定程度上都在遵循W3C标准,部分支持情况不佳的陈旧浏览器都在逐步被淘汰。

邮件布局中,每个客户端都有自己的渲染方式。由于Email的安全性要求较强,会有诸如刚打开陌生发件人邮件时,图片不会显示之类的限制。

目前编写邮件时,依然像上世纪浏览器大战时代编写网页一样无法放开拳脚施展。但是对于用户体验的追求并不能因此停下脚步,尤其在邮件的浏览量逐渐向移动端偏移的时候,掌握响应式邮件设计会逐渐成为前端设计师的基本技能之一。

引用:


[i] http://blog.returnpath.com/blog/tom-sather/infographic-email-mostly-mobile

[ii] http://www.campaignmonitor.com/css/

[iii] http://9to5mac.com/2010/10/25/outlook-2011-uses-webkit-to-render-html/

[iv] https://litmus.com/blog/outlook-2013-still-powered-by-word-now-available-for-email-testing

[v] http://msdn.microsoft.com/en-us/library/aa338201.aspx

[vi] http://www.campaignmonitor.com/resources/will-it-work/email-clients/

 

 


感谢李永伦对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

不错 by 张 鑫

非常好,给力!

不错 by hu steven

值得借鉴

提供了思路 by 孙 成利

文章这不错

红领巾 by wang qietu

推荐一个响应式测试工具 [ 跨屏测 ] kuapingce.com/

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

4 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT