>

在Email中防备性地动用HTML5和CSS3的指南,设计你的

- 编辑:金沙国际平台登录 -

在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浏览器为协助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)作为渲染引擎,那也是干吗最佳就协助Web基特的信箱提供你的巩固版。可是,使用媒体询问为WebKit渲染引擎增添同样的效用就差不离的多了,对Thunderbird之类的顾客端来说。

除开这些方法,还应该有别的在电邮中贯彻HTML5和CSS3的办法呢?有。但大家深信这一个办法是开垦的最高效的主意——也是最安全的。它缩短了为优秀邮箱顾客端支付外观之类供给的专业量,何况聚集于依附浏览器的测量检验。

小结:渐进式加强的建议

叩问您的受众

订阅者在何地张开你的邮件?他们会利用对HTML和CSS协助的很好的如One plus和AppleMail之类的客户端吗?你能够使用Litmus’ Email Analytics测验工具检查评定出订阅者中最盛行的信箱App。

依据所获得的新闻,你能够调控是或不是渐进式巩固会对您的行事有帮扶。比方,借让你的受众中多方面使用WebKit,可以很好的支撑高等功用,那么大概尝试革新性的本事,比方HTML5 录制,会是八个不易的主见!

建构二个基本草经疏验

用对HTML和CSS扶助有限的邮箱App——如Outlook和Gmail,在你为别的顾客端优化邮件从前,为订阅者创立叁个核去除风湿利水验。渐进式加强不应当让别的顾客发生次优体验。

尽量优化

若果您早已确立四个主干经验,就起始为其余顾客优化体验。你可以应用CSS3,录制,交互,可缩放向量图形(SVG),以及web字体。记住,尽管是对HTML和CSS援救的可比好的Email客商端也可以有它们各自的卓越之处,如故须求测验哪些才是立见成效的。

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

咱俩先看看一些在邮件中运用渐进式加强的开创性例子。为了呈现对这个邮件的优化,你不可能不选用二个如Chrome或Safari一样以WebKit为引力的浏览器。

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

为了播报2015邮件设计大会,大家决定认真地以HTML5摄像为背景完毕渐进式巩固。纵然这种专门项目技能只可以在Apple邮箱和Outlook 二零一三(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来推进邮件发展,是还是不是感到很打动?确定保证识别出订阅者们最爱怜的信箱应用软件,然后测量试验你新安排的邮件。

由此邮件深入分析,你能够了然订阅者日常在哪个地方展开邮件,那样您就足以集中精力在渐进式巩固(以及优雅降级!)上了。

测量检验设计也是支付进度中十二分关键的一步。在27个以上邮箱客商端和电脑软件之间的包容性测验,能够确认保障订阅者们无论用什么邮箱张开邮件都能平日获得你的邮件。

 

赞 收藏 1 评论

一举手一投足设备上的邮件设计不止是三个剧情填充列表,它事关好多设计因素。

至于我:fzr

图片 2

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

图片 3

对于活动器材的筹划未有是一件轻松的业务。大家使用不一样的秘技选用网络,我们必要思考一个完善的方案,特别是在小显示器上运用邮件。

让大家共同来商量关于移动道具上的邮件设计必要怀恋的主题素材,这几个谈论并不代表能够解答手提式有线电话机邮件设计上的持有非常态,但这是二个好的源点。

1.维持简洁

严禁复杂—特别是在邮件上。始终制止使用复杂的布局,不然在小显示器上渲染时必然会退步。请牢记多数配备是不支持媒体询问的(举个例子Google邮件),所以我们不能够指望成熟的剧情重排技能。

四个线性简单的布局在大约意况下都能表现优秀。

邮件的总体尺寸也特别首要,假设它超越了预设的尺寸(大致100KB),你的邮件将不能够完全加载。小编在具有的顾客端上都未曾测试出这么些题目,可是Google邮件和IOS设备出现了这些难点。

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

图片 4

2.爱护邮件指标和折叠

即便本身不是“above the fold”难题的观者,可是在运动设备上阅读邮件意味我们要把上半有的放在十一分关键的任务。

让顾客能够轻便地观望摘要目录,在大部情景下都能便捷浏览内容,进而引导读者深刻阅读。

邮件最上端的小段落可以完成这一个。

图片 5

那使得一些根本的顾客端(如谷歌(Google)邮件,也许IOS和OSX上的邮件)职业更有利。

图片 6

3.调动字体和图表

其一话题只适用那叁个援救媒体询问的装置。不幸的是,对于这些不扶助的配备我们从未别的格局,他们会和睦调解文本与图片。

此时此刻,媒体询问能够被抱有IOS设备支持,安卓原生邮件选择也支撑(不过有少数主题素材还要Lollipop吐弃了这一风味扶助谷歌(Google)邮件),还恐怕有最新的OPPO手提式有线电话机和个其他任何手提式有线电话机协理。

IOS设备在字体与图片尺寸上有七个第一难点:

小字体在暗中认可情形下被放大

邮件宽度基于最大的单元

字体被放大平时不能够说是二个严重的标题,可是在许多气象会变成文本高出你的布局被分割。

在您的CSS代码中出席这一行能够轻易消除这一标题。

{-webkit-text-size-adjust:none;}

下边包车型客车截图你可见领悟地观察通过加多-webkit-text-size-adjus,铅白区域的文本大小是如何转移的,左侧包车型地铁是加多后的,右侧的是没增加。

图片 7

字体调治也影响移动设备上的客商体验。小字体在桌面设备上可知轻便阅读,不过小显示器上就有完全不一致的震慑。

看上面这几个事例,右侧的文字被放大了能力所能达到轻巧阅读,吸援客户的秋波。

图片 8

诚如的话,在活动设备上加大文本字体是一个非常好的做法,极度是对邮件来讲。因为阅读的大运很忐忑你需求飞速抓住客户的关切。

至于图片

您可感到那多少个帮忙媒体询问的装备加载针对性图片(能够看看这两篇作品A Slick, New Image Swapping Technique for Responsive Emails和Optimizing images for mobile)

4.自定义链接和开关

运动器具上的邮件设计对于链接供给一些本事。

率先考虑到将被手辅导击,所以保持优秀的间距并从严限制数量。

保险他们很轻便点击并可知。其它,恒久难忘在内联CSS样式表中为锚增加准则:Gmail应用程序链接的体裁为红棕,私下认可境况下重申他们。

八个机密的小标题是,Gmail和IOS自动为电话号码,U陆风X8L和电子邮件字符串(只是Gmail)增多链接。

为防止IOS自动生成都电子通讯工程大学话链接,你能够在你的代码中增添meta标签。

1

Gmail的消除有一部分心怀鬼胎:它通过投入一些不可知的字符,以担保字符串不会被辨以为多少个潜在链接。

笔者用HTML实体和“中性”span标签做了一文山会海洋度量试。独有用span标志打破链接的各种部分,才能获得预期结果。

5.增添距离

对此邮件的铺排小编有三个风靡的建议正是思量外Gavin本内容的内边距,那能够显著进级邮件可读性。

参照文章

Campaign Monitor Guides: Responsive Email Design

Email On Acid: 7 Tips on Designing and Developing Emails for the iPhone

Litmus: Ditch the “Mobile Version” of Your Email

Litmus: The How-To Guide to Responsive Email Design

Litmus:https://litmus.com/blog/anatomy-mobile-email

Email On Acid:12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps

Email On Acid: Viewport Metatag Rendered Unusable

Email On Acid: How Android is Strangling Responsive Design

Email On Acid:5 Easy Ways to Improve Your Mobile Design

Litmus: Mobile Email is Here to Stay. What Comes Next?

Litmus: Three Step Media Queries Imitate Fluid Resizing for Expedia Emails

天底下流行的安排财富,精彩实用设计技术每日呈现。接待关心微信公众号:ienqoo

图片 9

让每一款产品体验越来越好:www.enqoo.com

本文由首页发布,转载请注明来源:在Email中防备性地动用HTML5和CSS3的指南,设计你的