>

在Email中防守性地采纳HTML5和CSS3的指南

- 编辑:乐百家599手机首页 -

在Email中防守性地采纳HTML5和CSS3的指南

在Email中堤防性地采用HTML5和CSS3的指南

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

本文由 伯乐在线 - fzr 翻译,黄利民 校稿。未经许可,禁绝转发!
土耳其共和国语出处:litmus.com。款待参预翻译组。

“在Email中无法应用HTML5或CSS3”。

由于它们“有限”的支撑,那已化作邮件设计行业的一个宽广共鸣。但是,大家未来得以说它是八个通通荒唐的说教。

尽管援救还不是那三个通用的,但为数不菲主流电邮客户端已经能够帮衬HTML5和CSS3了。实际上,电中国人民邮政总局体市集的一半都扶助HTML5和CSS。前中国共产党第五次全国代表大会电邮顾客端中也许有3家开首扶助它们了。对于特定顾客,可支撑的内容或然会越多。

然而,那多少个还不可能支撑那个高端功用的客户端会怎么着啊?你的邮件在那样的订阅者的信箱中该怎么样展现?当这个涉嫌到邮箱,就总结为一个:为订阅者提供优良的心得。可是,那也不表示你的邮件必得在每一家顾客端中都显得的一模二样——只需求让您的兼具订阅者都能易得易取。

自己爱好的两位邮件设计员——乔恩athan Kim 和 Brian Graves——就老大重申应用差异的艺术完成:防卫性邮件设计和渐进式加强。

防止性邮箱设计

大要八年前, Jonathan Kim在大家的 Mobile Master 作品展上提议了“Pushing the Limits of Email”的概念。在出口中,乔恩athan发明了叁个新词来注脚当前的电邮设计情状,即堤防性邮件设计。

她解释说,由于一些信箱客商端对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 */
}

以此媒体询问只针对支持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)作为渲染引擎,那也是干吗最佳就帮忙WebKit的邮箱提供你的加强版。可是,使用媒体询问为WebKit渲染引擎增多一样的机能就轻松的多了,对Thunderbird之类的顾客端来说。

除了那么些艺术,还应该有其他在电邮中贯彻HTML5和CSS3的主意吧?有。但大家深信那个方法是支付的最高效的章程——也是最安全的。它缩小了为独特邮箱客商端支付外观之类须要的专门的职业量,而且聚焦于依附浏览器的测量试验。

小结:渐进式加强的建议

打探您的受众

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

基于所猎取的音信,你能够垄断(monopoly)是还是不是渐进式加强会对你的工作有救助。举个例子,要是您的受众中多方面施用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 贰零壹贰(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 评论

让我们一起来研究关于移动设备上的邮件设计须要思索的题目,这一个商量并不意味能够解答手机邮件设计上的有所标题,但那是多少个好的源点。

浏览器内核指的是(参考)

浏览器内核又足以分成两片段:渲染引擎(layout engineer 可能 Rendering Engine)和 JS 引擎。它担任猎取网页的源委(HTML、XML、图像等等)、整理音讯(比方加入CSS 等),乃至总计网页的展现情势,然后会输出至显示屏或打字与印刷机。
浏览器的基石的不如对于网页的语法解释会有两样,所以渲染的作用也不平等。全体网页浏览器、电子邮件客户端以至任何要求编写制定、展现网络内容的应用程序都需求内核。
JS 引擎则是分析 Javascript 语言,推行 javascript 语言来完毕网页的动态效果。

最开首渲染引擎和 JS 引擎并未区分的很醒目,后来 JS 引擎更加的独立,水源就帮衬于只指渲染引擎。有三个网页标准安排小组制作了贰个ACID 来测量试验引擎的包容性和性能。内核的品种众多,如加上没哪个人采取的非商业的无偿内核,也许会有 10 三种,然则大面积的浏览器内核能够分那三种:Trident、Gecko、Webkit、Blink。

一、Trident内核代表产品Internet Explorer,又称其为IE内核。
Trident(IE内核)是微软在 Mosaic代码的根底之上修改而来的,Trident实际上是一款开放的水源,其接口内核设计的一对10%熟,因而才有众多选取IE 内核而非 IE 的浏览器(壳浏览器)涌现。
Trident内核常见的浏览器有:

  • IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0);
  • 猎豹安全浏览器:1.0-4.2本子为Trident Webkit,4.3本子为Trident Blink;
  • 360康宁浏览器 :1.0-5.0为Trident,6.0为Trident Webkit,7.0为Trident Blink;
  • 360极速浏览器:7.5以前为Trident Webkit,7.5为Trident Blink;
  • 傲游浏览器 :傲游1.x、2.x为IE内核,3.x为IE与Webkit双核;
  • 搜狗高速浏览器:1.x为Trident,2.0及随后版本为Trident Webkit;

出于市集分占的额数高,微软相当短日子都并从未创新 Trident 内核,导致

  • 一是 Trident 内核曾经大致与 W3C 典型脱节(2007年)
  • 二是 Trident 内核的豁达 Bug 等安全性难点未有收获及时化解。

二、Gecko内核Gecko(Firefox内核)
Gecko:Netscape6开端使用的基石,后来的Mozilla FireFox(火狐浏览器) 也应用了该内核,Gecko的特点是代码完全驾驭,由此,其可开辟水平异常高,全球的技术员都可以为其编写代码,增添效果。因为那是个开源内核,因而遭到过多人的讲究,Gecko内核的浏览器也非常多,那也是Gecko内核即使年轻但商场分占的额数能够高效提升的最首要原由。
唯独事实上,Gecko 内核的浏览器照旧依旧Firefox (火狐) 客户最多,所以有的时候候也会被叫做Firefox内核。另外Gecko也是贰个跨平台内核,能够在Windows、 BSD、Linux和Mac OS X中央银行使。

三、WebKit内核代表小说Safari、Chromewebkit
Webkit引擎包涵WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都以自由软件,在GPL合同下授权,同有的时候间帮忙BSD系统的开采。所以Webkit也是自由软件,相同的时间绽开源代码。
特点在于源码结构清晰、渲染速度相当的慢。
缺点是对网页代码的宽容性不高,导致有的编写制定不职业的网页不或者符合规律展现。

WebKit内核常见的浏览器:

  • Apple Safari (Win/Mac/iPhone/iPad)
  • Symbian手提式有线话机浏览器
  • Android 私下认可浏览器
  • Google Chrome

四、Bink
Blink 是一个由谷歌和Opera Software开荒的浏览器排版引擎,这一渲染引擎是开源引擎WebKit中WebCore组件的贰个分支。

谷歌 决定从 WebKit 衍生出团结的 Blink 引擎,将要 WebKit代码的根基上研究开发尤其连忙和简易的渲染引擎,并逐年淡出 WebKit的震慑,创制多个截然独立的 Blink 引擎。

参照他事他说加以考察资料

XHTML™ 1.0
Say Hello to the HTML Email Boilerplate
What You Should Know About HTML Email
A Guide to CSS Inlining in Emai

关于笔者:fzr

乐百家前段 2

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

乐百家前段 3

4.自定义链接和开关

一抬手一动脚设备上的邮件设计对于链接需求或多或少技巧。

首先思量到将被手教导击,所以保持卓越的间隔并严峻限制数量。

保障他们很轻松点击并可知。别的,长久难忘在内联CSS样式表中为锚加多法则:Gmail应用程序链接的体裁为中黄,私下认可意况下强调他们。

四个机密的小意思是,Gmail和IOS自动为电话号码,UPRADOL和电子邮件字符串(只是Gmail)增多链接。

为幸免IOS自动生成都电子通信工程高校话链接,你能够在你的代码中增添meta标签。

1

Gmail的消除有一部分存心不良:它通过出席一些不可知的字符,以确定保证字符串不会被辨以为一个潜在链接。

自家用HTML实体和“中性”span标签做了一多种测验。唯有用span标志打破链接的每种部分,能力赢得预期结果。

4、有哪些常见的meta标签

标签 含义
<meta charset="utf-8"> 声明文档使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> 声明文档兼容模式,指示IE以目前可用的最高模式显示内容
<meta name="keywords" content="your tags"> 定义针对搜索引擎的关键词
<meta name="description" content="不超过850个字符"> 页面描述,告诉搜索引擎你的站点的主要内容
<meta name="author" content="你的姓名"> 定义网页作者
<meta name="revised" content="David, 2008/8/8/" /> > 定义页面的最新版本
<meta http-equiv="refresh" content="5"/> 5秒刷新一次页面
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> 用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
<meta http-equiv="pragma" content="no-cache"> 禁用缓存
<meta http-equiv="set-cookie" content="Mon, 12 May 2001 00:20:00 GMT"> cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也必须使用GMT时间格式。
<meta name="robots" content="index,follow" /> 搜索引擎索引方式

<meta name="robots" content="index,follow" />
all:文件将被寻觅,且页面上的链接能够被询问;
none:文件将不被搜寻,且页面上的链接不能够被询问;
index:文件将被寻觅;
follow:页面上的链接能够被询问;
noindex:文件将不被搜寻;
nofollow:页面上的链接不得以被询问。

目录

  • 模板开拓
  • 工具推荐
  • 参照他事他说加以考察资料

1.维持简洁

严禁复杂—非常是在邮件上。始终幸免使用复杂的组织,不然在小显示屏上渲染时一定会倒闭。请牢记好些个配备是不援助媒体询问的(比方Google邮件),所以大家无法仰望成熟的剧情重排本事。

八个线性简单的布局在大约景况下都能表现优良。

邮件的总体尺寸也不行关键,要是它超过了预设的大大小小(差不离100KB),你的邮件将不可能完全加载。笔者在具有的客商端上都没有测量试验出那几个题目,可是谷歌邮件和IOS设备出现了那一个难题。

上边这张截图里,你可以见到看出客商是哪些通过点击二个链接查看全部消息:那使得客商不要求读书全体邮件。

乐百家前段 4

3、怎么着掌握内容与体制分离的口径

Html指的是布局;CSS指的是体制;JavaScript指的是行为。

  • 写 HTML 的时候先不管样式, 器重放在HTML的结商谈语义化上,让 HTML 能呈现页面结构依旧内容。之后再去写样式。
  • HTML 内差异意出现属性样式,尽量不要现身行内样式。
  • 写 JS 的时候,尽量不要用 JS 去平素操作样式,而是经过给成分增多删减class来调整样式变化。

前言

在张开 HTML Email Boilerplate 开垦时遇上的最常见的标题正是体制渲染和财富引进难点,那些难点的发出往往是各大主流邮件顾客端(手提式有线电话机、桌面或是网页版)对体制协理大概财富引进的限定。


本文由乐百家前段发布,转载请注明来源:在Email中防守性地采纳HTML5和CSS3的指南