在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邮箱)。它所急需做的正是用四个适当的框架来火速实行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,在您为其余客户端优化邮件从前,为订阅者创建二个基德宏药录验。渐进式巩固不应该让其余客户爆发次优体验。

尽大概优化

万一您早已构建四个Kidd宏药录验,就起来为其余客商优化体验。你能够应用CSS3,录制,交互,可缩放向量图形(SVG),以及web字体。记住,纵然是对HTML和CSS帮助的可比好的Email客户端也可能有它们分别的特别规之处,如故须求测试哪些才是可行的。

实战:邮件中的渐进巩固例子

大家先看看一些在邮件中运用渐进式加强的开创性例子。为了呈现对那些邮件的优化,你必得选取一个如Chrome或Safari同样以WebKit为引力的浏览器。

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

为了播报2015邮件设计大会,作者们决定认真地以HTML5录像为背景落成渐进式巩固。尽管这种专属技巧只可以在Apple邮箱和Outlook
2013(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版)中劳作,而那多个却占了笔者们的客户的多方面。(注:邮件须要显示屏起码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

发表评论

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