在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的帮助有限,使得邮件设计者们陷入了破旧的设计情状。他倡议邮件设计者们事先为那三个帮助互联网渲染引擎的客商端设计,进而推动邮件设计行业升高。

渐进式加强

依此类推,在2016年的信箱设计大会上,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,在你为其余客商端优化邮件以前,为订阅者创建叁个为主经验。渐进式巩固不应当让其余顾客发生次优体验。

尽量优化

设若您早已确立二个为主经验,就从头为其余客商优化体验。你能够选择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邮箱使用的备用方案——二个精粹的团团转木马网格布局,未有藏匿也未有复制任何内容!

图片 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来推动邮件发展,是还是不是感到很打动?确定保证识别出订阅者们最心爱的信箱应用程式,然后测验你新设计的邮件。

由此邮件剖判,你能够掌握订阅者平常在何地展开邮件,那样你就足以聚集精力在渐进式加强(以至高贵降级!)上了。

测量试验设计也是开采进度中国和北美洲常关键的一步。在贰拾陆个以上邮箱客商端和应用程式之间的包容性测量试验,能够确定保证订阅者们无论用哪些邮箱展开邮件都能平常获得你的邮件。

 

赞 收藏 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邮件),还或然有新式的One plus手提式有线电话机和少数的别的手机扶植。

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揽胜极光L和电子邮件字符串(只是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

相关文章