您的位置:澳门新葡8455最新网站 > Web前端 > 5大黄金守则,在Email中防卫性地使用HTML5和CSS3的

5大黄金守则,在Email中防卫性地使用HTML5和CSS3的

发布时间:2019-10-05 16:07编辑:Web前端浏览(54)

    在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浏览器为协助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扶助的很好的如Motorola和AppleMail之类的客户端吗?你能够采取Litmus’ Email Analytics测量检验工具检查实验出订阅者中最盛行的邮箱App。

    遵照所取得的音信,你能够垄断是不是渐进式加强会对您的办事有援救。举个例子,借使您的受众中多方面采取WebKit,能够很好的支撑高档作用,那么大概尝试立异性的技术,举例HTML5 录制,会是贰个不错的主见!

    建设构造二个中坚经验

    用对HTML和CSS扶助有限的信箱App——如Outlook和Gmail,在您为其余客商端优化邮件在此以前,为订阅者建设构造四个基小品方验。渐进式加强不应该让其余顾客爆发次优体验。

    尽量优化

    比如你曾经确立三个主干经验,就起先为其余顾客优化体验。你可以运用CSS3,录制,交互,可缩放向量图形(SVG),以及web字体。记住,就算是对HTML和CSS协理的可比好的Email客商端也是有它们各自的非常之处,还是供给测量试验哪些才是立竿见影的。

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

    我们先看看一些在邮件中选拔渐进式巩固的开创性例子。为了突显对那几个邮件的优化,你必须利用一个如Chrome或Safari一样以Web基特为引力的浏览器。

    2015邮件设计大会以HTML5摄像为背景的邮件

    为了播报二〇一四邮件设计大会,咱俩决定认真地以HTML5摄像为背景达成渐进式巩固。固然这种专属才干只好在Apple邮箱和Outlook 二〇一一(Mac版)上行事,但那二种顾客端到达接收特定邮件的客户二成左右。

    View the full email here

    对于不帮忙录制的电邮顾客端,HTML5录像仅仅只是退化为一王芸态背景图片。我们的结果却是令人傻眼的——并且回报也是摄人心魄的!

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

    今年中最酷的邮件之一是B&Q的交互式旋转圆盘邮件。对于WebKit客户端,该邮件包罗了多个转悠火爆,供客户点击查看差异的部分。

    View the full email here

    整整邮件中最令人回想深切的部分,大概是它为非WebKit邮箱使用的备用方案——二个美观的团团转木马网格布局,未有藏匿也未尝复制任何内容!

    澳门新葡8455最新网站 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 */
    }

    本条红娘查询为邮件设计员提供了三个不难的翻新框架。大家得以为持有当代信箱顾客端的那一大学一年级部分订阅者提供越来越好的感受。

    最棒的看守就是进攻。以后该是进攻的时候了。在邮件设计中应用这些红娘查询开端更新,拉动邮件前进。

    为了订阅者去品尝。为了大家的行业,为了 对邮件的喜爱。

    一度十万火急想看看我们会共同创设出怎样了。

    澳门新葡8455最新网站,假若你用的是这种艺术——大概开拓你协调的更加高等的本子——在您的邮件中,恐怕一旦你对这种艺术有任何的疑问,请在上面包车型大巴评说中贴出,大概用越来越好的点子,去Litmus社区!

    意识你的受众 + 测量检验你的规划

    对于可以初叶选拔高档技艺像HTML5和CSS3来推动邮件发展,是还是不是认为很激动?确认保证识别出订阅者们最垂怜的信箱应用程式,然后测验你新陈设的邮件。

    由此邮件深入分析,你能够理解订阅者平日在哪个地方张开邮件,那样你就足以聚集精力在渐进式巩固(以及高雅降级!)上了。

    测量检验设计也是付出进程中那么些首要的一步。在三二十一个以上邮箱顾客端和APP之间的宽容性测量检验,能够保证订阅者们无论用什么邮箱展开邮件都能平常得到你的邮件。

     

    赞 收藏 1 评论

    一抬手一动脚器械上的邮件设计不止是一个内容填充列表,它关系众多企划因素。

    至于作者:fzr

    澳门新葡8455最新网站 2

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

    澳门新葡8455最新网站 3

    对于活动器具的策画未有是一件轻巧的事务。大家选拔不相同的不二秘诀选择互连网,大家须求思量三个圆满的方案,极其是在小显示屏上使用邮件。

    让大家一并来研究关于移动设备上的邮件设计须要思索的主题材料,那些商量并不意味能够解答手提式有线电话机邮件设计上的具有标题,但那是五个好的源点。

    1.保持简洁

    严禁复杂—特别是在邮件上。始终防止选择复杂的构造,不然在小显示屏上渲染时料定会失利。请牢记好多装置是不扶助媒体询问的(比如谷歌(Google)邮件),所以大家不能够指望成熟的内容重排本事。

    二个线性简单的布局在差不离景况下都能表现完美。

    邮件的完整尺寸也不行关键,假若它超过了预设的分寸(差不离100KB),你的邮件将无法完全加载。我在颇负的客商端上都未曾测量试验出这些标题,不过Google邮件和IOS设备出现了那个主题材料。

    上边那张截图里,你能够看出顾客是怎么样通过点击一个链接查看全数新闻:那使得客户不须要读书全体邮件。

    澳门新葡8455最新网站 4

    2.重视邮件指标和折叠

    就算自身不是“above the fold”问题的观众,可是在活动设备上读书邮件意味大家要把上半片段放在特别首要的地方。

    让顾客能够轻便地收看摘要目录,在半数以上情状下都能高效浏览内容,进而指引读者深刻阅读。

    邮件最上部的小段落可以完毕那些。

    澳门新葡8455最新网站 5

    那使得一些重要的顾客端(如谷歌(Google)邮件,或然IOS和OSX上的邮件)职业更有帮忙。

    澳门新葡8455最新网站 6

    3.调动字体和图片

    以此话题只适用那四个辅助媒体询问的设施。不幸的是,对于那多少个不援助的装置我们从未其他方法,他们会本身调治文本与图片。

    眼前,媒体询问能够被有着IOS设备支撑,安卓原生邮件选择也援助(可是有少数标题还要Lollipop吐弃了这一脾性援助Google邮件),还也会有最新的Samsung手提式有线电话机和少数的任何手提式有线电电话机补助。

    IOS设备在字体与图片尺寸上有三个关键难点:

    小字体在暗许意况下被推广

    邮件宽度基于最大的单元

    字体被加大常常不能够说是贰个严重的主题材料,不过在好些个情况会招致文本超越你的布局被分割。

    在你的CSS代码中到场这一行能够轻易化解这一标题。

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

    上边包车型地铁截图你可见精晓地收看通过抬高-webkit-text-size-adjus,桃红区域的文件大小是怎样转移的,右边的是增添后的,右侧的是没增进。

    澳门新葡8455最新网站 7

    字体调度也影响移动器材上的顾客体验。小字体在桌面设备上可见轻巧阅读,可是小显示屏上就有一同两样的震慑。

    看上面那个事例,侧边的文字被加大了能力所能达到轻便阅读,吸援客户的目光。

    澳门新葡8455最新网站 8

    诚如的话,在运动设备上扩充文本字体是三个极其好的做法,极其是对邮件来讲。因为阅读的时间很忐忑你需求急速抓住客户的酷爱。

    至于图片

    你可认为那多少个协助媒体询问的装置加载针对性图片(能够看看这两篇小说A Slick, New Image Swapping Technique for Responsive Emails和Optimizing images for mobile)

    4.自定义链接和按键

    一举手一投足器材上的邮件设计对于链接必要一些才干。

    第一思量到将被手教导击,所以保持卓绝的距离并严峻限定数量。

    管教他们很轻松点击并可知。别的,永恒铭刻在内联CSS样式表中为锚增多法规:Gmail应用程序链接的体制为桃红,暗中同意情形下重申他们。

    七个神秘的小意思是,Gmail和IOS自动为电话号码,U奥迪Q7L和电子邮件字符串(只是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

    澳门新葡8455最新网站 9

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

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:5大黄金守则,在Email中防卫性地使用HTML5和CSS3的

    关键词:

上一篇:没有了

下一篇:没有了