当前位置:王中王鉄算盘开奖结果 > 品牌动态 > 在Email中防卫性地接纳HTML5和CSS3的指南

在Email中防卫性地接纳HTML5和CSS3的指南

文章作者:品牌动态 上传时间:2019-10-14

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

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

本文由 伯乐在线 - fzr 翻译,黄利民 校稿。未经许可,幸免转载!
英文出处:litmus.com。应接加入翻译组。

“在Email中不能够接纳HTML5或CSS3”。

由于它们“有限”的辅助,那已变成邮件设计行当的三个广阔共鸣。但是,我们现在能够说它是三个截然荒唐的说教。

固然帮忙还不是老大通用的,但广大主流电邮客户端已经得以扶助HTML5和CSS3了。实际上,电中国人民邮政总部体商场的二分之一都帮助HTML5和CSS。前中国共产党第五次全国代表大会电邮客户端中也可以有3家最初帮助它们了。对于特定客商,可援助的剧情或许会更加多。

可是,那么些还无法支撑这个高端效能的客商端会怎样呢?你的邮件在如此的订阅者的邮箱中该咋样呈现?当这么些涉及到邮箱,就归咎为二个:为订阅者提供优秀的感受。然则,那也不表示你的邮件必须在每一家客商端中都彰显的同等——只须要让您的持有订阅者都能易得易取。

自家喜欢的两位邮件设计员——乔恩athan 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邮箱)。它所急需做的便是用二个适宜的框架来火速推行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帮助的很好的如HTC和AppleMail之类的顾客端吗?你能够动用Litmus’ Email Analytics测量检验工具检验出订阅者中最风靡的邮箱App。

基于所收获的音信,你能够垄断是不是渐进式加强会对您的职业有救助。举例,若是你的受众中多方面施用WebKit,能够很好的支撑高档效能,那么或许尝试创新性的本事,比方HTML5 录像,会是三个不利的主张!

确立叁个主导经验

用对HTML和CSS协理有限的邮箱App——如Outlook和Gmail,在你为其余客商端优化邮件在此以前,为订阅者塑造一个着力经验。渐进式巩固不应有让别的客商发生次优体验。

尽心竭力优化

万一您曾经济建设立贰个着力经验,就起来为别的客户优化体验。你能够选择CSS3,录制,交互,可缩放向量图形(SVG),乃至web字体。记住,固然是对HTML和CSS支持的可比好的Email客商端也可以有它们分其他独特之处,如故要求测量试验哪些才是立见成效的。

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

大家先看看一些在邮件中利用渐进式加强的开创性例子。为了展示对那一个邮件的优化,你不可能不利用一个如Chrome或Safari一样以WebKit为引力的浏览器。

二〇一五邮件设计大会以HTML5摄像为背景的邮件

为了播报2016邮件设计大会,咱俩决定认真地以HTML5摄像为背景达成渐进式加强。就算这种专门项目手艺只好在Apple邮箱和Outlook 二〇一二(Mac版)上行事,但那二种客商端达到接收特定邮件的客商30%左右。

View the full email here

对于不帮忙摄像的电邮客商端,HTML5录像仅仅只是退化为一夏梅态背景图片。我们的结果却是令人惊异的——何况回报也是登高履危的!

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

那个时候中最酷的邮件之一是B&Q的交互式旋转圆盘邮件。对于Web基特顾客端,该邮件包蕴了三个转悠火爆,供顾客点击查阅差别的有个别。

View the full email here

一体邮件中最令人回忆深切的一部分,大概是它为非WebKit邮箱使用的备用方案——八个绝色的团团转木马网格布局,未有藏身也尚未复制任何内容!

图片 1

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

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

为了引进大家的新邮件代码编辑器,Litmus Builder,在此封邮件中显示了一大波的可点击交互。同样,该才干也只可以在Apple邮箱和Outlook 二〇一一(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之间的包容性测量检验,能够确定保证订阅者们无论用什么样邮箱打开邮件都能寻常获得你的邮件。

 

赞 收藏 1 评论

有关小编:fzr

图片 2

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

图片 3

本文由王中王鉄算盘开奖结果发布于品牌动态,转载请注明出处:在Email中防卫性地接纳HTML5和CSS3的指南

关键词: