在Email中防卫性地选取HTML5和CSS3的指南

在Email中防范性地利用HTML5和CSS3的指南

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

本文由 伯乐在线 –
fzr
翻译,黄利民
校稿。未经许可,防止转发!
斯拉维尼亚语出处:litmus.com。招待参预翻译组。

“在Email中无法采纳HTML5或CSS3”。

由于它们“有限”的接济,那已形成邮件设计行当的贰个广阔共鸣。但是,大家未来能够说它是一个截然荒诞的说教。

就算帮衬还不是那么些通用的,但广大主流电邮顾客端已经足以支持HTML5和CSS3了。实际上,电中国人民邮政总局体市镇的二分一都帮衬HTML5和CSS。前中国共产党第五次全国代表大会电邮顾客端中也是有3家初阶帮助它们了。对于特定客户,可支撑的内容只怕会越多。

可是,那多少个还不能够支撑这个高端效用的客商端会如何啊?你的邮件在如此的订阅者的信箱中该怎样浮现?当那些涉嫌到邮箱,就总结为叁个:为订阅者提供卓绝的体会。然则,那也不表示你的邮件必得在每一家客商端中都展现的等同——只须求让您的持有订阅者都能易得易取。

本人喜欢的两位邮件设计员——Jonathan Kim 和 Brian
Graves——就那多少个强调应用差别的不二秘籍落成:防卫性邮件设计和渐进式加强。

防范性邮箱设计

大约八年前, Jonathan
Kim在我们的 Mobile
Master 艺术展上建议了“Pushing the Limits of
Email”的定义。在讲话中,Jonathan发明了贰个新词来证实当前的电邮设计情况,即防范性邮件设计。

她解释说,由于部分邮箱顾客端对CSS的扶持少数,使得邮件设计者们陷入了破旧的筹算意况。他首倡邮件设计者们事先为这几个援助网络渲染引擎的客户端设计,进而推进邮件设计行当前进。

渐进式巩固

就那样类推,在贰零壹肆年的邮箱设计大会上,DEG的UI设计师,
Brian
Graves,,提出了“赢得在每一个荧屏上设计的作战”。他的讲话的根本在于渐进式巩固,关于在支撑的条件上提供高等效用。他也重申了温婉降级的最首要。优雅降级意味着,即便订阅者的邮箱客商端无法扶助某项特定效用,你也要能为她们提供愉悦的顾客体验。

对获得Brian的总体显示感兴趣?幻灯片和摄像今后都有提供了。

自动楼梯就是实际生活中叁个渐进式巩固和古雅降级的大公无私例子。已去世正剧歌手Mitch
Hedberg开玩笑说,“自动扶梯长久不会出故障:因为它能够只是二个梯子。你应有长久也不拜访到‘自动扶梯一时半刻故障’的品牌,只是‘自动扶梯方今为阶梯’,不便于方便。”无论情状怎样,自动扶梯都能维持和谐的成效。

为HTML5和CSS3完结渐进式加强

选拔渐进式加强是缓和邮件设计的最管用方法。大家都精晓的是,在邮箱中央银行使古板的HTML5和CSS3会在分裂客商端之间引起众多渲染难题。向后的宽容性特不均等——一些HTML和CSS有抓牢的向后宽容性而其余的却并不曾。对此,分歧的客商端接收了不一致选项。使用专门的学问的HTML5和CSS3供给越来越多的测验,何况会耳熏目染开辟进度。所以,到底怎么着才是在邮箱中贯彻渐进式巩固的最棒点子?

在电邮中运用HTML5和CSS3不必太不方便。它不必要在好奇的邮箱客户端上浪费多量日子扫除故障(说的正是Outlook邮箱卡塔 尔(英语:State of Qatar)。它所急需做的就是用二个适用的框架来超快试行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卡塔 尔(英语:State of Qatar)作为渲染引擎,那也是为何最棒就扶助Web基特的邮箱提供你的巩固版。可是,使用媒体询问为WebKit渲染引擎加多类似的效应就归纳的多了,对Thunderbird之类的客商端来说。

除却这些办法,还应该有别的在电邮中落到实处HTML5和CSS3的办法吗?有。但大家信赖这些主意是付出的最快速的点子——也是最安全的。它缩短了为新鲜邮箱客商端支付外观之类需求的职业量,并且聚集于依赖浏览器的测验。

总计:渐进式加强的提出

刺探你的受众

订阅者在哪儿打开你的邮件?他们会动用对HTML和CSS支持的很好的如摩托罗拉和AppleMail之类的客商端吗?你能够利用Litmus’
Email
Analytics测量检验工具检查实验出订阅者中最流行的邮箱App。

基于所获取的音信,你能够决定是或不是渐进式加强会对您的劳作有帮带。比方,如若你的受众中多方面用到Web基特,能够很好的支撑高等效用,那么或然尝试立异性的技能,举例HTML5
摄像,会是一个没有错的主见!

确立一个骨干经验

用对HTML和CSS扶植有限的邮箱App——如Outlook和Gmail,在你为别的客商端优化邮件从前,为订阅者创建四个主干经历。渐进式加强不该让别的客商发生次优体验。

尽量优化

假诺您早就确立一个主干阅世,就从头为别的顾客优化体验。你可以采取CSS3,录制,人机联作,可缩放向量图形(SVG卡塔尔国,以至web字体。记住,固然是对HTML和CSS援救的可比好的Email客商端也可以有它们分其余非正规之处,依旧须要测验哪些才是行得通的。

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

我们先看看一些在邮件中选拔渐进式加强的开创性例子。为了显得对那些邮件的优化,你一定要采纳一个如Chrome或Safari相似以WebKit为引力的浏览器。

2016邮件设计大会以HTML5录像为背景的邮件

为了播报2016邮件设计大会,我们决定认真地以HTML5录像为背景达成渐进式巩固。固然这种专属本领只好在Apple邮箱和Outlook
二零一三(Mac版卡塔 尔(阿拉伯语:قطر‎上干活,但那二种顾客端达到接纳特定邮件的客商四分三左右。

View the full email here

对此不扶持录像的电邮用户端,HTML5摄像仅仅只是退化为一孙铎态背景图片。大家的结果却是令人惊叹的——况兼回报也是惊魂动魄的!

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

那一年中最酷的邮件之一是B&Q的人机联作式旋转圆盘邮件。对于WebKit客商端,该邮件满含了八个筋不问不闻火热,供客户点击查阅差异的部分。

View the full email here

成套邮件中最令人纪念深入的大器晚成都部队分,大概是它为非WebKit邮箱使用的备用方案——多少个神奇的旋转木马网格布局,未有藏身也从未复制任何内容!

图片 1

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

Litmus Builder(邮件开荒工具卡塔尔交互作用之旅邮件

为了引进大家的新邮件代码编辑器,Litmus
Builder,在此封邮件中呈现了多量的可点击交互作用。相像,该本领也只可以在Apple邮箱和Outlook
二零一三(Mac版卡塔 尔(英语:State of Qatar)中劳作,而那七个却占了笔者们的花费者的多方面。(注:邮件须求荧屏起码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,然后测量检验你新设计的邮件。

因而邮件剖析,你能够领悟订阅者平常在哪个地方展开邮件,那样你就足以三月不知肉味在渐进式加强(以至温婉降级!卡塔 尔(英语:State of Qatar)上了。

测验设计也是付出进程中丰硕关键的一步。在三十多少个以上邮箱顾客端和应用程式之间的宽容性测验,能够确定保证订阅者们无论用什么邮箱打开邮件都能平常获得你的邮件。

 

赞 收藏 1
评论

至于作者:fzr

图片 2

微博:@fzr-fzr)
个人主页 ·
笔者的小说 ·
26

图片 3

发表评论

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