在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家初步援救它们了。对于特定顾客,可协理的剧情大概会更加多。

不过,那一个还无法援助那些高档成效的客商端会怎样啊?你的邮件在这么的订阅者的邮箱中该怎么展现?当那一个涉及到邮箱,就归纳为二个:为订阅者提供卓越的心得。然则,那也不代表你的邮件必得在每一家顾客端中都显示的均等——只须求令你的具有订阅者都能易得易取。

本身爱怜得舍不得放手的两位邮件设计员——乔恩athan 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。

基于所猎取的信息,你可以决定是不是渐进式巩固会对您的劳作有援助。举个例子,假如你的受众中多方面运用Web基特,能够很好的支撑高端作用,那么大概尝试创新性的技巧,比如HTML5
录像,会是一个不利的主见!

确立贰个主干经验

用对HTML和CSS援救有限的邮箱App——如Outlook和Gmail,在你为别的客商端优化邮件以前,为订阅者构建贰个为主经验。渐进式巩固不该让别的顾客发生次优体验。

尽量优化

一旦你早就确立三个为主经验,就开端为别的顾客优化体验。你能够运用CSS3,摄像,交互,可缩放向量图形(SVG),以及web字体。记住,尽管是对HTML和CSS援救的相比较好的Email客商端也会有它们各自的特别规之处,仍旧要求测验哪些才是实用的。

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

大家先看看一些在邮件中利用渐进式增强的开创性例子。为了显示对这一个邮件的优化,你不能够不利用叁个如Chrome或Safari一样以WebKit为引力的浏览器。

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

为了播报二〇一六邮件设计大会,咱俩决定认真地以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
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来推动邮件发展,是否以为很打动?确定保障识别出订阅者们最爱怜的信箱应用软件,然后测量试验你新规划的邮件。

由此邮件深入分析,你能够驾驭订阅者平时在哪儿展开邮件,那样您就足以集中精力在渐进式巩固(以及温婉降级!)上了。

测量试验设计也是支付进度中万分关键的一步。在贰拾八个以上邮箱客商端和应用软件之间的包容性测量试验,能够确认保障订阅者们无论用什么邮箱伸开邮件都能符合规律获得你的邮件。

 

赞 收藏 1
评论

活动道具上的邮件设计不仅仅是三个剧情填充列表,它关系众多统一筹算因素。

有关小编:fzr

图片 2

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

图片 3

对此运动设备的打算未有是一件轻松的业务。人们采纳分歧的秘籍使用互连网,大家必要思考一个宏观的方案,极度是在小荧屏上运用邮件。

让大家一道来钻探关于移动器械上的邮件设计必要思念的标题,那一个争执并不表示能够解答手提式有线电话机邮件设计上的具不平时,但那是贰个好的起源。

1.保险简洁

严禁复杂—尤其是在邮件上。始终防止选用复杂的构造,否则在小显示器上渲染时确定会战败。请牢记大多装置是不扶助媒体询问的(举例谷歌(Google)邮件),所以我们无法仰望成熟的剧情重排技术。

一个线性轻易的布局在大概景况下都能展现能够。

邮件的完好尺寸也丰硕主要,若是它当先了预设的轻重缓急(差不离100KB),你的邮件将不能一心加载。小编在具有的客户端上都尚未测验出那么些主题材料,可是Google邮件和IOS设备现身了那么些难点。

下边那张截图里,你可见看出顾客是何许通过点击贰个链接查看全部新闻:那使得客商不用读书全部邮件。

图片 4

2.器重邮件指标和折叠

就算如此自个儿不是“above the
fold”难点的观众,但是在运动器材上读书邮件意味大家要把上半部分放在相当重大的岗位。

让顾客能够轻易地观看摘要目录,在大部情况下都能急迅浏览内容,进而教导读者深刻阅读。

邮件顶上部分的小段落能够做到那么些。

图片 5

那使得部分主要的客商端(如谷歌(Google)邮件,只怕IOS和OSX上的邮件)职业更有利。

图片 6

发表评论

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