图片 6

在Email中防御性地使用HTML5和CSS3的指南,5大黄金准则

在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辅助的很好的如Samsung和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版)上行事,但那三种客户端达到接收特定邮件的用户五分之一左右。

View the full email here

对此不援助摄像的电邮客户端,HTML5摄像仅仅只是退化为一黄大润发态背景图片。我们的结果却是令人诧异的——并且回报也是摄人心魄的!

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

今年中最酷的邮件之一是B&Q的交互式旋转圆盘邮件。对于WebKit客户端,该邮件富含了一个筋斗火爆,供用户点击查阅分化的部分。

View the full email here

整整邮件中最令人回想深远的一部分,只怕是它为非Web基特邮箱使用的备用方案——四个美妙的旋转木马网格布局,未有藏身也未曾复制任何内容!

图片 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来带动邮件发展,是还是不是感到很震惊?确定保证识别出订阅者们最热衷的信箱APP,然后测量试验你新设计的邮件。

通过邮件深入分析,你能够驾驭订阅者平日在哪个地方展开邮件,那样你就能够聚焦精力在渐进式加强(以及优雅降级!)上了。

测量检验设计也是开辟进程中极其主要的一步。在三十八个以上邮箱客户端和应用软件之间的包容性测量试验,能够保障订阅者们无论用什么样邮箱张开邮件都能健康获得你的邮件。

 

赞 收藏 1
评论

挪动器械上的邮件设计不止是一个内容填充列表,它关系许多规划成分。

有关笔者:fzr

图片 2

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

图片 3

对此运动设备的安排性未有是一件轻便的职业。人们采用分歧的办法使用互连网,大家要求思考三个周到的方案,极其是在小显示器上利用邮件。

让大家联合来探求关于移动设备上的邮件设计须要思虑的难题,这么些议论并不意味可以解答手提式有线电电话机邮件设计上的保卓殊,但那是三个好的起源。

1.维持简洁

严禁复杂—越发是在邮件上。始终幸免使用复杂的构造,不然在小显示器上渲染时分明会退步。请牢记好些个装置是不支持媒体询问的(举例谷歌(Google)邮件),所以大家不可能指望成熟的剧情重排技巧。

四个线性简单的布局在大概景况下都能显现不错。

邮件的全部尺寸也要命重大,假诺它超越了预设的大大小小(大致100KB),你的邮件将不可能完全加载。笔者在有着的客户端上都未有测量试验出那么些题目,不过Google邮件和IOS设备出现了这么些主题材料。

上边那张截图里,你可见看出用户是什么通过点击三个链接查看全数消息:那使得用户无需读书全体邮件。

图片 4

2.讲究邮件目的和折叠

尽管如此自个儿不是“above the
fold”难题的听众,但是在运动设备上读书邮件意味我们要把上半有些放在比较重大的岗位。

让用户可以轻易地看出摘要目录,在大多数情状下都能便捷浏览内容,进而教导读者深远阅读。

邮件最上部的小段落能够做到这一个。

图片 5

那使得部分首要的客户端(如谷歌(Google)邮件,或然IOS和OSX上的邮件)工作更平价。

图片 6

发表评论

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