某某茶叶有限公司欢迎您!
金沙棋牌在线 > Web前端 > 在Email中防御性地使用HTML5和CSS3的指南

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

时间:2019-11-27 20:39

在Email中防守性地运用HTML5和CSS3的指南

2015/04/20 · CSS, HTML5 · 1 评论 · Email

本文由 伯乐在线 - fzr 翻译,黄利民 校稿。未经许可,制止转发!
克罗地亚(Croatia卡塔尔语出处:litmus.com。迎接插足翻译组。

“在Email中不能运用HTML5或CSS3”。

是因为它们“有限”的帮衬,那已成为邮件设计行当的一个科学普及共鸣。但是,我们以往能够说它是三个一心荒谬的说法。

纵然支持还不是特别通用的,但广大主流电邮顾客端已经足以辅助HTML5和CSS3了。实际上,电中国人民邮政根据地体市集的八分之四都扶助HTML5和CSS。前五大电邮客户端中也可以有3家以前辅助它们了。对于特定客商,可支撑的开始和结果或然会越来越多。

不过,那多少个还无法支持这么些高档成效的客户端会如何啊?你的邮件在此样的订阅者的邮箱中该怎么样体现?当这个涉及到邮箱,就归纳为一个:为订阅者提供卓绝的体会。不过,那也不表示你的邮件必需在每一家顾客端中都显得的均等——只须要让您的兼具订阅者都能易得易取。

自身爱不忍释的两位邮件设计员——Jonathan Kim 和 Brian Graves——就不行强调应用区别的办法完成:防止性邮件设计和渐进式巩固。

卫戍性邮箱设计

大约四年前, 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 */
}

本条媒体询问只针对扶持Web基特的邮箱顾客端——对HTML5和CSS3有疑虑的扶助度。那么些媒体询问允许你采用今世本事比方HTML5录像、CSS3卡通、web字体以致越多。

本条方式也将今世邮件顾客端和旧式客商端的信箱开辟分为两某个。你能够在应用Safari或Chrome浏览器为支撑WebKit的客商端测量试验开辟今世技艺的还要,使用Firefox为旧式浏览器提供诸如外观之类的基本草述历。

那样铲除电邮开拓难题能够将越来越多的品质调整进度转移到浏览器方面并不是电邮客商端。那授予邮件设计者以更加的多的权位,调节力,和自信去付出贰个能在装有邮箱顾客端之间高雅渲染的电邮。

下载那么些Litmus测量检验结果,展现了就媒体询问对WebKit的扶持。值得注意的是,Gmail——既是多个web邮箱客商端,也是三个移动App——并不协助媒体询问,所以那么些测量检验对那叁个显示器截图无效。

你也能够本着Gecko(Firefox卡塔 尔(英语:State of Qatar)渲染那些媒体询问:

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

2015邮件设计大会以HTML5录制为背景的邮件

为了播报2016邮件设计大会,大家决定认真地以HTML5视频为背景达成渐进式巩固。即使这种专属技艺只可以在Apple邮箱和Outlook 二零一三(Mac版卡塔尔上中国人民解放军海军事工业程高校业作,但这两种客商端达到选择特定邮件的顾客30%左右。

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版卡塔 尔(英语:State of Qatar)中劳作,而那多个却占了我们的客商的多边。(注:邮件供给显示屏最少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 评论

HTML 邮件内容纵然也是 HTML,不过和大家在网页上使用的 HTML 不一致,因为安全原因,各大邮箱服务商及邮件顾客端都会对邮件内容开展一定水准上的拍卖,不会据守你写的原来HTML 呈现。

初藳地址

行内样式表

关于小编:fzr

图片 2

微博:@fzr-fzr) 个人主页 · 小编的小说 · 26

图片 3

在桌面和移动端渲染电子邮件大概有上百万种差异的结缘措施。

今日,笔者想写三个"低技巧"难题。

1 <html>
2     <head>
3           <title>行内样式表</title>
4     </head>
5     <body>
6         <p style="color:blue;font-size:10px;">aaaaaaa</p>
7     </body>
8 </html>    

尤其是盛名之下的 OutLook,从 OutLook二〇〇七 开头便接受 Word HTML 引擎实行渲染,为了它的安全性进而使得整个邮件倒退回了 二〇〇〇年前,为了邮件的宽容性你只好选拔过多废弃的竹签、属性,並且那风流倜傥景色将会保持无数个
年终,因为纵然整个终有尽头,但 OutLook 始终存在。

话说本人订阅了许多了情报邮件(Newsletter卡塔 尔(英语:State of Qatar),举个例子JavaScript Weekly。周周收到风华正茂封邮件,通晓本周的大事。

 

因为微软一直地方统一标准新立异,使得 OutLook 成为了最难啃的骨头。因为 OutLook 协助的标签和总体性少得可怜,所以即使宽容了 OutLook,其余邮箱顾客端基本都不会有怎样难点。

 

内嵌样式表

使用tableb布局

这大约是 HTML 邮件与平淡无奇 HTML 页面最大的区分,因为各类邮箱对 div + css 那后生可畏套构造的剖释难题一点都不小(如 float / position 等 CSS 都会被过滤,以致margin: 0 auto; 都不起功效卡塔尔国,基本各大邮箱都会分析混乱,所以老式的 table 布局是优等之选。那就象征 HTML 邮件中大约只有这多少个因素——table / tr / td / span / img / a,尽量幸免使用 div / p 或是其余标签。

並且并非有所邮箱都扶持 colspan / rowspan 属性,所以具备结构都须要选用table 嵌套肃清。

有一天,小编就在想,是还是不是自家也能做二个那样的邮件?

 1 1 <html>
 2 2     <head>
 3 3           <title>内嵌样式表</title>
 4 4     </head>
 5       <style>
 6             p{
 7                   color:blue;
 8                   font-family:"宋体";
 9                }
10       </style>
11 5     <body>
12 6         <p >aaaaaaa</p>
13 7     </body>
14 8 </html>