永利皇宫402:在Email中防守性地选择HTML5和CSS3的指南,5大白金守则

永利皇宫402 9
永利皇宫402

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

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

本文由 伯乐在线 –
fzr
翻译,黄利民
校稿。未经许可,幸免转载!
罗马尼亚(România)语出处: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浏览器为补助WebKit的客户端测量试验开拓今世本事的同一时间,使用Firefox为旧式浏览器提供诸如外观之类的基本草求原验。

这般解决电邮开荒难点能够将更加的多的身分调节进度转移到浏览器方面并非电邮顾客端。那给予邮件设计者以越多的权能,调整力,和自信去支付叁个能在有着邮箱客户端之间文雅渲染的电邮。

永利皇宫402,下载那么些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支持的很好的如小米和AppleMail之类的客商端吗?你能够行使Litmus’
Email
Analytics测量试验工具检查测量检验出订阅者中最流行的信箱App。

凭借所得到的新闻,你能够决定是不是渐进式巩固会对你的做事有援助。举例,假设您的受众中多方面利用WebKit,能够很好的扶助高端成效,那么大概尝试立异性的能力,举个例子HTML5
录像,会是三个没有疑问的主见!

树立一个为主经验

用对HTML和CSS辅助少数的信箱App——如Outlook和Gmail,在您为任何客商端优化邮件以前,为订阅者营造一个骨干经验。渐进式巩固不该让其他客商发生次优体验。

尽量优化

借使你已经创建一个骨干经验,就从头为别的客商优化体验。你能够动用CSS3,录制,交互,可缩放向量图形(SVG),以致web字体。记住,就算是对HTML和CSS支持的相比较好的Email顾客端也许有它们各自的出格之处,仍旧须求测验哪些才是有效的。

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

我们先看看一些在邮件中应用渐进式巩固的开创性例子。为了突显对这几个邮件的优化,你不能够不使用叁个如Chrome或Safari一样以WebKit为重力的浏览器。

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

为了播报2016邮件设计大会,咱俩决定认真地以HTML5摄像为背景落成渐进式加强。固然这种专门项目手艺只好在Apple邮箱和Outlook
二零一三(Mac版)上中国人民解放军海军工程高校业作,但那三种客商端到达接收特定邮件的客商二成左右。

View the full email here

对于不扶助录制的电邮顾客端,HTML5录制仅仅只是退化为一李林态背景图片。咱们的结果却是令人惊慌的——况兼回报也是危言耸听的!

B&Q 交互式旋转圆盘邮件

那年中最酷的邮件之一是B&Q的交互式旋转圆盘邮件。对于WebKit顾客端,该邮件包含了八个转悠热门,供顾客点击查看不一致的某个。

View the full email here

全套邮件中最令人影像浓烈的一对,恐怕是它为非WebKit邮箱使用的备用方案——贰个绝色的团团转木马网格布局,未有藏匿也远非复制任何内容!

永利皇宫402 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来推进邮件发展,是还是不是感到很打动?确保识别出订阅者们最喜爱的信箱APP,然后测量检验你新设计的邮件。

透过邮件深入分析,你能够领会订阅者平常在哪儿展开邮件,那样你就可以聚集精力在渐进式加强(以至名贵降级!)上了。

测验设计也是付出进程中国和亚洲常重大的一步。在二拾伍个以上邮箱客户端和应用程式之间的宽容性测验,能够有限扶持订阅者们无论用什么邮箱展开邮件都能健康获得你的邮件。

 

赞 收藏 1
评论

移步器材上的邮件设计不仅仅是贰个内容填充列表,它关系众多统一计划成分。

关于小编:fzr

永利皇宫402 2

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

永利皇宫402 3

对此运动设备的设计未有是一件简单的事体。大家接纳区别的章程选择网络,我们需求考虑二个周全的方案,非常是在小荧屏上使用邮件。

让大家一块来探寻关于移动设备上的邮件设计需要思索的标题,这么些商酌并不表示能够解答手提式有线电话机邮件设计上的全数标题,但那是一个好的源点。

1.保持简洁

严禁复杂—特别是在邮件上。始终制止采用复杂的布局,不然在小荧屏上渲染时必然会失利。请记住好些个装置是不援助媒体询问的(举例谷歌(Google)邮件),所以大家无法指望成熟的原委重排技艺。

三个线性轻巧的布局在大约意况下都能表现可以。

邮件的完整尺寸也特别主要,要是它超越了预设的尺寸(大概100KB),你的邮件将不能完全加载。小编在具有的客户端上都未曾测验出这些题材,不过谷歌(Google)邮件和IOS设备出现了那一个标题。

上边那张截图里,你可以看到看见客户是何等通过点击贰个链接查看全体音讯:那使得客商不用读书全体邮件。

永利皇宫402 4

2.爱护邮件目的和折叠

固然小编不是“above the
fold”难题的观者,然则在移动设备上阅读邮件意味大家要把上半有的放在拾贰分关键的职责。

让客商能够轻易地观察摘要目录,在非常多情形下都能便捷浏览内容,进而辅导读者浓重阅读。

邮件最上端的小段落能够完成那些。

永利皇宫402 5

那使得有个别最重要的客商端(如谷歌(Google)邮件,或许IOS和OSX上的邮件)职业更有利。

永利皇宫402 6

3.调节字体和图表

以此话题只适用那些援助媒体询问的配备。不幸的是,对于那三个不接济的器械大家从没别的措施,他们会融洽调治文本与图片。

日前,媒体询问能够被有着IOS设备扶助,安卓原生邮件选用也支撑(不过有少数主题材料同期Lollipop放弃了这一特征扶植谷歌(Google)邮件),还恐怕有最新的iPhone手提式有线电话机和个其他其他手提式有线电电话机协助。

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

小字体在默许景况下被推广

邮件宽度基于最大的单元

字体被加大平时不可能说是四个严重的难点,可是在众多状态会形成文本超过你的布局被分割。

在您的CSS代码中投入这一行能够轻便消除这一难题。

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

上面包车型客车截图你能够领略地观望通过抬高-webkit-text-size-adjus,水晶色区域的文书大小是什么退换的,侧边的是增加后的,侧边的是没增加。

永利皇宫402 7

字体调治也耳闻则诵移动道具上的顾客体验。小字体在桌面设备上能够轻松阅读,可是小荧屏上就有一起区别的熏陶。

看下边那些例子,左侧的文字被推广了能够轻巧阅读,吸援客户的秋波。

永利皇宫402 8

平日的话,在运动道具上拓展文本字体是二个相当好的做法,特别是对邮件来讲。因为阅读的岁月特别不安你需求急迅抓住客户的青睐。

关于图片

你可感到那么些扶助媒体询问的配备加载针对性图片(能够看看这两篇小说A
Slick, New Image Swapping Technique for Responsive
Emails和Optimizing
images for
mobile)

4.自定义链接和按键

活动道具上的邮件设计对于链接须要或多或少才干。

首先考虑到将被手教导击,所以保持卓越的间距并严俊限定数量。

保证他们很轻便点击并可以见到。别的,恒久铭刻在内联CSS样式表中为锚加多准则:Gmail应用程序链接的样式为深石榴红,私下认可情状下重申他们。

一个地下的小意思是,Gmail和IOS自动为电话号码,UENCOREL和电子邮件字符串(只是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

永利皇宫402 9

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

发表评论

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

网站地图xml地图