塞班岛贵宾会5大黄金准则,设计你的移动端邮件

在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的支撑少数,使得邮件设计者们陷入了破旧的设计情状。他发起邮件设计者们事先为这多少个支持互联网渲染引擎的客户端设计,进而推动邮件设计行当发展。

渐进式巩固

依此类推,在2015年的邮箱设计大会上,DEG的UI设计师,
Brian
Graves,,提议了“赢得在每一种显示器上统筹的出征作战”。他的言语的根本在于渐进式加强,关于在支撑的条件上提供高端功用。他也强调了高雅降级的最重要。温婉降级意味着,就算订阅者的信箱客商端不能扶持某项特定功用,你也要能为她们提供愉悦的客商体验。

对获取Brian的完整体现感兴趣?幻灯片和拍录将来都有提供了。

自动楼梯就是事实上生活中一个渐进式加强和高雅降级的大公无私例子。已经去世正剧歌唱家Mitch
Hedberg开玩笑说,“自动扶梯恒久不会出故障:因为它能够只是三个阶梯。你应有永世也不会见到‘自动扶梯临时故障’的品牌,只是‘自动扶梯权且为阶梯’,不低价方便。”无论遇到如何,自动扶梯都能保全团结的功能。

为HTML5和CSS3得以实现渐进式巩固

应用渐进式加强是焚薮而田邮件设计的最实用措施。大家都了然的是,在邮箱中接受守旧的HTML5和CSS3会在分化顾客端之间引起大多渲染难题。向后的包容性特不一样等——一些HTML和CSS有稳定的向后宽容性而其余的却并不曾。对此,差异的客户端选择了分歧选项。使用正式的HTML5和CSS3急需越多的测验,而且会潜濡默化开拓速度。所以,到底如何才是在邮箱中落到实处渐进式巩固的最佳方式?

在电邮中选取HTML5和CSS3不必太费劲。它不须求在好奇的信箱客商端上浪费一大波小时解除故障(说的正是Outlook邮箱卡塔 尔(英语:State of Qatar)。它所急需做的便是用一个适用的框架来火速实施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卡塔 尔(阿拉伯语:قطر‎渲染这些媒体询问:

XHTML

@-moz-document url-prefix() { /* Insert styles here */ }

1
2
3
@-moz-document url-prefix() {
  /* Insert styles here */
}

很稀少顾客端应用Gecko(Firefox卡塔 尔(英语:State of Qatar)作为渲染引擎,那也是干吗最佳就援助WebKit的信箱提供你的加强版。不过,使用媒体询问为WebKit渲染引擎增加肖似的效用就总结的多了,对Thunderbird之类的客商端来讲。

除去那一个方法,还应该有别的在电邮中贯彻HTML5和CSS3的章程吧?有。但咱们信赖那么些办法是支付的最火速的艺术——也是最安全的。它裁减了为独特邮箱顾客端支付外观之类需求的专门的学业量,况兼聚集于依附浏览器的测量试验。

小结:渐进式加强的提出

叩问您的受众

订阅者在哪儿张开你的邮件?他们会利用对HTML和CSS援助的很好的如Samsung和AppleMail之类的客商端吗?你能够应用Litmus’
Email
Analytics测量试验工具检查评定出订阅者中最流行的信箱App。

依赖所获得的音讯,你能够决定是还是不是渐进式巩固会对你的做事有扶持。比如,要是您的受众中多方面运用WebKit,能够很好的扶持高档功能,那么只怕尝试立异性的能力,比如HTML5
录像,会是四个不利的主见!

树立三个主干经验

用对HTML和CSS协助少数的邮箱App——如Outlook和Gmail,在您为其余客商端优化邮件以前,为订阅者建构二个核解阳疮热毒验。渐进式加强不该让别的客商发生次优体验。

尽量优化

譬如您曾经确立一个为主经验,就开端为别的客户优化体验。你尚可CSS3,录像,人机联作,可缩放向量图形(SVG卡塔尔国,以致web字体。记住,即便是对HTML和CSS扶助的可比好的Email客商端也会有它们分别的奇特之处,如故需求测量检验哪些才是行得通的。

实战:邮件中的渐进巩固例子

作者们先看看一些在邮件中采用渐进式巩固的开创性例子。为了显得对这么些邮件的优化,你必需使用一个如Chrome或Safari同样以Web基特为重力的浏览器。

2016邮件设计大会以HTML5录像为背景的邮件

为了播报2015邮件设计大会,大家决定认真地以HTML5录制为背景达成渐进式巩固。尽管这种专属手艺只好在Apple邮箱和Outlook
2012(Mac版卡塔 尔(英语:State of Qatar)上干活,但那三种客户端达到选用特定邮件的顾客三分一左右。

View the full email here

对于不援助摄像的电邮客户端,HTML5摄像仅仅只是退化为一李欣蔓态背景图片。我们的结果却是让人诧异的——并且回报也是振撼的!

B&Q 人机联作式旋转圆盘邮件

这个时候中最酷的邮件之一是B&Q的人机联作式旋转圆盘邮件。对于WebKit客商端,该邮件富含了一个旋转火热,供客商点击查阅区别的部分。

View the full email here

全总邮件中最令人印象深刻的生龙活虎对,恐怕是它为非WebKit邮箱使用的备用方案——二个美观的旋转木马网格布局,未有藏匿也从未复制任何内容!

塞班岛贵宾会 1

您能够在 Firefox 或 Internet Explorer 浏览器中展开该邮件查看备用设计。

Litmus Builder(邮件开垦工具卡塔 尔(英语:State of Qatar)交互作用之旅邮件

为了引进我们的新邮件代码编辑器,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卡塔 尔(英语:State of Qatar),你的邮件将不可能一心加载。作者在全体的顾客端上都并未有测量试验出那么些难点,不过Google邮件和IOS设备现身了这几个标题。

上面那张截图里,你能够见到客商是怎么样通过点击四个链接查看全体消息:那使得客商不用读书全体邮件。

塞班岛贵宾会 4

2.讲究邮件目的和折叠

就算如此小编不是“above the
fold”难点的观众,可是在移动设备上读书邮件意味大家要把上半有些放在十分重大的岗位。

让客商能够轻易地看出摘要目录,在大部气象下都能便捷浏览内容,进而指导读者深切阅读。

邮件最上端的小段落能够做到那些。

塞班岛贵宾会 5

那使得部分尤为重要的客商端(如Google邮件,或然IOS和OSX上的邮件卡塔 尔(阿拉伯语:قطر‎工作更方便人民群众。

塞班岛贵宾会 6

3.调动字体和图纸

以此话题只适用那多少个支持媒体询问的道具。不幸的是,对于那多少个不帮衬的设施大家从不任何措施,他们会融洽调节文本与图片。

眼前,媒体询问能够被有着IOS设备支撑,安卓原生邮件选拔也帮助(可是有好几难点同一时候Lollipop放弃了那风姿洒脱特色协理Google邮件卡塔 尔(英语:State of Qatar),还应该有新式的Motorola手提式无线话机和少数的此外手提式有线电电话机帮忙。

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自动为电话号码,UEvoqueL和电子邮件字符串(只是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

五洲四海流行的布署质量源,特出实用设计本领每一天展现。款待关切Wechat群众号:ienqoo

塞班岛贵宾会 9

让每大器晚成款产物体验越来越好:www.enqoo.com

发表评论

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