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

2019-10-09 12:34栏目:大国科技
TAG:

在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邮箱)。它所要求做的正是用四个适用的框架来快捷施行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协助的很好的如中兴和AppleMail之类的顾客端吗?你能够运用Litmus’ Email Analytics测量检验工具检测出订阅者中最盛行的邮箱App。

据说所获取的新闻,你能够调节是还是不是渐进式加强会对您的干活有援救。举个例子,倘让你的受众中多方面行使WebKit,能够很好的支撑高档作用,那么大概尝试创新性的本领,比方HTML5 录像,会是三个没有错的主见!

创立贰个核退热截疟验

用对HTML和CSS援助少数的信箱App——如Outlook和Gmail,在您为其它客商端优化邮件在此之前,为订阅者建构多个核和胃生津验。渐进式巩固不应该让别的客商产生次优体验。

尽量优化

如果你早已确立贰个为主经验,就开端为别的顾客优化体验。你能够运用CSS3,录制,交互,可缩放向量图形(SVG),以及web字体。记住,固然是对HTML和CSS协助的比较好的Email客户端也许有它们分别的独特之处,如故须求测验哪些才是实用的。

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

我们先看看一些在邮件中选拔渐进式巩固的开创性例子。为了显得对那一个邮件的优化,你必得利用三个如Chrome或Safari一样以WebKit为重力的浏览器。

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

为了播报二〇一五邮件设计大会,大家决定认真地以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 2012(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的指南