微信号:infoqchina

介绍:有内容的技术社区媒体

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

2013-05-23 18:31 InfoQ

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


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

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

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

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

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


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


1. Outlook


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


2. Gmail


Gmail是Web客户端的另一个难点。Gmail的用户量位居前列,但是由于不明原因,Gmail会过滤掉邮件中的<style>标签。因此,只有内联在元素中的样式才会得以保留。邮件中过多的内联样式会直接导致代码的可读性急剧下降,加重修改的负担。


3. 响应移动设备


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


4. iOS设备针对性优化


根据Campaign Monitor的报告, 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>标签中。


点击“阅读原文”查看更多内容并吐槽吧。

 
InfoQ 更多文章 Facebook如何实现PB级别数据库自动化备份 学术派Google软件工程师Matt Welsh谈移动开发趋势 Spotify为什么要使用一些“无聊”的技术? 妹纸们放假了,汉纸们做啥? 大多数重构可以避免
猜您喜欢 大话Android 资源目录命名规则 后端的轮子(一) .Net中的RealProxy实现AOP(上) 不需要生活大爆炸,前后端在一起就够了 程序员年终苦逼测试