编写指南,在Email中防御性地使用HTML5和CSS3的指南

在Email中防御性地拔取HTML5和CSS3的指南

2015/04/20 · CSS,
HTML5 · 1
评论 ·
Email

本文由 伯乐在线 –
fzr
翻译,黄利民
校稿。未经许可,禁止转发!
编写指南,在Email中防御性地使用HTML5和CSS3的指南。英文出处:litmus.com。欢迎出席翻译组。

“在Email中不可能应用HTML5或CSS3”。

出于它们“有限”的支撑,那已改成邮件设计行业的一个常见共识。可是,大家现在得以说它是一个截然荒唐的布道。

就算支持还不是十分通用的,但过多主流电邮客户端已经得以帮忙HTML5和CSS3了。实际上,电邮总体市场的50%都帮忙HTML5和CSS。前五大电邮客户端中也有3家开首帮助它们了。对于特定顾客,可支撑的内容可能会越多。

可是,那多少个还不可以支撑这么些高级功用的客户端会怎么着呢?你的邮件在这么的订阅者的邮箱中该怎么体现?当这一个关乎到邮箱,就归纳为一个:为订阅者提供优异的感受。不过,那也不意味你的邮件必须在每一家客户端中都体现的一致——只必要让你的具备订阅者都能易得易取。

自家欣赏的两位邮件设计师——Jonathan Kim 和 Brian
Graves——就那个强调应用不相同的形式落成:防御性邮件设计和渐进式增强。

防御性邮箱设计

大体两年前, Jonathan
Kim在大家的 Mobile
Master 文章展上提议了“Pushing the Limits of
Email”的概念。在开口中,Jonathan发明了一个新词来验证当前的电邮设计情形,即防御性邮件设计。

他表达说,由于局地邮箱客户端对CSS的帮衬少数,使得邮件设计者们陷入了破旧的安排性意况。他倡议邮件设计者们事先为那一个协助互连网渲染引擎的客户端设计,进而推进邮件设计行业前行。

渐进式增强

以此类推,在二〇一四年的邮箱设计大会上,DEG的UI设计师,
Brian
Graves,,提议了“赢得在各样显示屏上规划的交锋”。他的说道的紧要性在于渐进式增强,关于在匡助的环境上提供高档功效。他也强调了优雅降级的重中之重。优雅降级意味着,即使订阅者的邮箱客户端不可以支持某项特定功用,你也要能为她们提供愉悦的用户体验。

yzc88,对取得Brian的完好浮现感兴趣?幻灯片和拍摄现在都有提供了。

自动楼梯就是实在生活中一个渐进式增强和淡雅降级的无微不至例子。已故悲剧影星Mitch
Hedberg开玩笑说,“自动扶梯永远不会出故障:因为它可以只是一个阶梯。你应有永远也不会看到‘自动扶梯暂时故障’的牌子,只是‘自动扶梯暂时为阶梯’,不便于方便。”不论环境怎么,自动扶梯都能保险自己的效率。

为HTML5和CSS3完结渐进式增强

利用渐进式增强是化解邮件设计的最得力格局。我们都精通的是,在邮箱中运用传统的HTML5和CSS3会在分化客户端之间引起广大渲染难题。向后的包容性分外不平等——一些HTML和CSS有安于盘石的向后包容性而任何的却并没有。对此,区其他客户端应用了分裂取舍。使用正式的HTML5和CSS3亟需越来越多的测试,而且会潜移默化开发进度。所以,到底怎么才是在邮箱中贯彻渐进式增强的最好格局?

在电邮中采纳HTML5和CSS3不必太劳苦。它不要求在好奇的信箱客户端上浪费大批量时间排除故障(说的就是Outlook邮箱)。它所急需做的就是用一个适宜的框架来疾速执行HTML5和CSS3而不用烦恼和顾虑暴发渲染难点。而且,极度幸运的是,我们有那么的框架。

下面就是邮件设计者们和开发者们提供的一行首要的代码:

XHTML

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles
here */ }

1
2
3
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Insert styles here */
}

本条媒体询问只针对接济WebKit的信箱客户端——对HTML5和CSS3有疑心的支持度。那个媒体询问允许你选用现代技能例如HTML5摄像、CSS3动画片、web字体以及越来越多。

这么些措施也将现代邮件客户端和旧式客户端的邮箱开发分为两部分。你可以在选取Safari或Chrome浏览器为永葆WebKit的客户端测试开发现代技术的同时,使用Firefox为旧式浏览器提供诸如外观之类的主干经验。

这么化解电邮开发难题可以将更多的品质控制进程转移到浏览器方面而不是电邮客户端。那给予邮件设计者以越来越多的权杖,控制力,和自信去开发一个能在享有邮箱客户端之间优雅渲染的电邮。

下载那一个Litmus测试结果,突显了就媒体询问对WebKit的支撑。值得注意的是,Gmail——既是一个web邮箱客户端,也是一个移动App——并不支持媒体询问,所以那几个测试对这些屏幕截图无效。

您也可以本着Gecko(Firefox)渲染这么些媒体询问:

XHTML

@-moz-document url-prefix() { /* Insert styles here */ }

1
2
3
@-moz-document url-prefix() {
  /* Insert styles here */
}

很少有客户端应用Gecko(Firefox)作为渲染引擎,那也是为啥最好就协助WebKit的信箱提供您的增强版。可是,使用媒体询问为WebKit渲染引擎添加相同的职能就不难的多了,对Thunderbird之类的客户端而言。

而外这些点子,还有任何在电邮中落实HTML5和CSS3的章程吧?有。但大家信任那些措施是支付的最高效的艺术——也是最安全的。它减少了为新鲜邮箱客户端支出外观之类需求的工作量,而且集中于依照浏览器的测试。

总计:渐进式增强的指出

精晓你的受众

订阅者在何地打开你的邮件?他们会使用对HTML和CSS帮衬的很好的如One plus和AppleMail之类的客户端吗?你能够运用Litmus’
Email
Analytics测试工具检测出订阅者中最流行的邮箱App。

据悉所收获的新闻,你可以操纵是还是不是渐进式增强会对您的办事有帮带。例如,如若你的受众中多方面用到WebKit,可以很好的支撑高级功效,那么可能尝试创新性的技能,比如HTML5
视频,会是一个科学的想法!

创制一个骨干经验

用对HTML和CSS支持少数的信箱App——如Outlook和Gmail,在您为其余客户端优化邮件从前,为订阅者建立一个主导经验。渐进式增强不应有让其余用户发生次优体验。

尽心尽力优化

只要你早已创立一个主导经验,就起来为其余用户优化体验。你可以运用CSS3,摄像,交互,可缩放向量图形(SVG),以及web字体。记住,即便是对HTML和CSS协助的可比好的Email客户端也有它们各自的非正规之处,依旧要求测试哪些才是实用的。

实战:邮件中的渐进增强例子

俺们先看看一些在邮件中选用渐进式增强的开创性例子。为了浮现对那么些邮件的优化,你不可能不拔取一个如Chrome或Safari一样以WebKit为动力的浏览器。

2014邮件设计大会以HTML5摄像为背景的邮件

为了播报2014邮件设计大会,大家决定认真地以HTML5视频为背景完成渐进式增强。即使那种专项技术只可以在Apple邮箱和Outlook
2011(Mac版)上干活,但那两种客户端达到接收特定邮件的用户40%左右。

View the full email here

对于不支持视频的电邮客户端,HTML5摄像仅仅只是退化为一张静态背景图片。大家的结果却是让人惊奇的——而且回报也是惊人的!

B&Q 交互式旋转圆盘邮件

这一年中最酷的邮件之一是B&Q的交互式旋转圆盘邮件。对于WebKit客户端,该邮件包罗了一个筋斗热点,供用户点击查阅分裂的一些。

View the full email here

所有邮件中最令人回忆深远的局地,可能是它为非WebKit邮箱使用的备用方案——一个华美的旋转木马网格布局,没有藏身也尚未复制任何内容!

yzc88 1

你能够在 Firefox 或 Internet Explorer 浏览器中开拓该邮件查看备用设计。

Litmus Builder(邮件开发工具)交互之旅邮件

为了引入大家的新邮件代码编辑器,Litmus
Builder,在那封邮件中彰显了大批量的可点击交互。同样,该技术也只能在Apple邮箱和Outlook
2011(Mac版)中劳作,而这多个却占了大家的顾客的多方面。(注:邮件需要显示器至少800像素宽才能浏览。)

该展览仅仅只是退化为一个静态背景图片,而且会调用接口跳转到登录页面。那邮件取得了英雄的中标,其制品在最初始的几天里增添了众多的用户。

View the full email here

想尝试一下 Litmus Builder?注册后
,你就能够起来应用HTML5和CSS3测试你的邮件!

一个更新邮件设计框架

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles
here */ }

1
2
3
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Insert styles here */
}

以此红娘查询为邮件设计师提供了一个大致的换代框架。大家可以为拥有现代信箱客户端的那一大片段订阅者提供更好的感受。

最好的守护就是进攻。现在该是进攻的时候了。在邮件设计中行使那么些红娘查询伊始更新,拉动邮件前进。

为了订阅者去品味。为了大家的本行,为了
对邮件的钟爱。

现已按捺不住想看看大家会联手建立出怎么着了。

万一您用的是那种方法——或者支付你自己的更高级的版本——在您的邮件中,或者一旦你对那种方法有别的的疑点,请在下边的评介中贴出,或者用更好的法子,去Litmus社区!

发觉你的受众 + 测试你的陈设性

对于可以起始应用高级技术像HTML5和CSS3来推动邮件发展,是否感到很感动?确保识别出订阅者们最心爱的信箱APP,然后测试你新设计的邮件。

透过邮件分析,你可以驾驭订阅者日常在哪里打开邮件,那样您就可以集中精力在渐进式增强(以及优雅降级!)上了。

测试设计也是付出进度中那多少个紧要的一步。在30个以上邮箱客户端和APP之间的包容性测试,可以保险订阅者们无论用什么邮箱打开邮件都能正常得到你的邮件。

 

赞 收藏 1
评论

HTML 邮件内容尽管也是 HTML,不过和大家在网页上利用的 HTML
差异,因为安全原因,各大邮箱服务商及邮件客户端都会对邮件内容展开自然程度上的处理,不会依据你写的原来
HTML 体现。

初稿地址

行内样式表

至于作者:fzr

yzc88 2

微博:@fzr-fzr)
个人主页 ·
我的篇章 ·
26

yzc88 3

在桌面和活动端渲染电子邮件大约有上百万种不相同的结合方式。

前日,我想写一个”低技术”难点。

1 <html>
2     <head>
3           <title>行内样式表</title>
4     </head>
5     <body>
6         <p style="color:blue;font-size:10px;">aaaaaaa</p>
7     </body>
8 </html>    

进而是鼎鼎大名的 OutLook,从 OutLook2007 起先便利用 Word HTML
引擎举行渲染,为了它的安全性从而使得所有邮件倒退回了 2000
年前,为了邮件的包容性你不得不拔取过多舍弃的价签、属性,并且本场景将会维持无数个
年头,因为即便总体终有尽头,但 OutLook 始终存在。

话说自己订阅了诸多了情报邮件(Newsletter),比如JavaScript
Weekly。每一周收到一封邮件,通晓本周的大事。

 

因为微软向来地特立独行,使得 OutLook 成为了最难啃的骨头。因为 OutLook
援救的标签和总体性少得卓殊,所以即使包容了
OutLook,其余邮箱客户端基本都不会有怎么着难题。

 

内嵌样式表

使用tableb布局

那大约是 HTML 邮件与常见 HTML 页面最大的区分,因为种种邮箱对 div + css
这一套布局的辨析难题很大(如 float / position 等 CSS 都会被过滤,甚至
margin: 0 auto; 都不起功效),基本各大邮箱都会分析混乱,所以老式的 table
布局是优等之选。那就象征 HTML 邮件中大致惟有那多少个因素——table / tr /
td / span / img / a,尽量防止使用 div / p 或是其余标签。

并且并不是享有邮箱都协助 colspan / rowspan 属性,所以具有布局都亟需利用
table 嵌套解决。

有一天,我就在想,是或不是自己也能做一个如此的邮件?

 1 1 <html>
 2 2     <head>
 3 3           <title>内嵌样式表</title>
 4 4     </head>
 5       <style>
 6             p{
 7                   color:blue;
 8                   font-family:"宋体";
 9                }
10       </style>
11 5     <body>
12 6         <p >aaaaaaa</p>
13 7     </body>
14 8 </html>    

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website