来自 业界快讯 2019-10-09 23:34 的文章
当前位置: 118kj开奖现场 > 业界快讯 > 正文

在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——就那么些重申应用不相同的格局完毕:卫戍性邮件设计和渐进式巩固。

堤防性邮箱设计

118kj开奖现场,大约八年前, Jonathan Kim在我们的 Mobile Master 小说展上建议了“Pushing the Limits of Email”的定义。在开口中,乔恩athan发明了一个新词来证实当前的电邮设计意况,即防范性邮件设计。

她表达说,由于部分邮箱客商端对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浏览器为支撑Web基特的顾客端测量试验开辟今世技术的同临时间,使用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邮箱使用的备用方案——多个绝色的团团转木马网格布局,没有藏匿也尚无复制任何内容!

118kj开奖现场 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

118kj开奖现场 2

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

118kj开奖现场 3

本文由118kj开奖现场发布于业界快讯,转载请注明出处:在Email中防御性地使用HTML5和CSS3的指南

关键词: