菜单

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

2019年10月19日 - 皇家前端

在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为引力的浏览器。

2016邮件设计大会以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
2013(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来推动邮件发展,是还是不是以为很打动?确认保证识别出订阅者们最忠爱的信箱应用软件,然后测量试验你新布署的邮件。

透过邮件深入分析,你能够精通订阅者日常在哪儿展开邮件,这样你就能够聚焦精力在渐进式加强(以致温婉降级!)上了。

测验设计也是开荒进度中格外重大的一步。在三十个以上邮箱顾客端和应用软件之间的包容性测量检验,能够有限补助订阅者们无论用怎么着邮箱展开邮件都能健康得到你的邮件。

 

赞 收藏 1
评论

关于作者:fzr

图片 2

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

图片 3

相关文章

发表评论

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

网站地图xml地图