hg888皇冠手机登录

在Email中防卫性地使用HTML5和CSS三的指南

四月 15th, 2019  |  www.hg888.com

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

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

本文由 伯乐在线 –
fzr
翻译,黄利民
校稿。未经许可,禁止转载!
英文出处:litmus.com。欢迎参加翻译组。

“在Email中无法动用HTML伍或CSS叁”。

出于它们“有限”的援救,那已变为邮件设计行当的二个科学普及共同的认识。但是,大家现在能够说它是3个通通荒唐的说法。

固然帮助还不是特别通用的,但过多主流电邮客户端已经可以支撑HTML五和CSS叁了。实际上,电中国人民邮政分局体市集的四分之二都支持HTML伍和CSS。前中国共产党第五次全国代表大会电邮客户端中也有叁家开始协理它们了。对于特定顾客,可支撑的始末可能会愈多。

可是,那么些还不能够协助那几个高档效用的客户端会怎么着啊?你的邮件在这么的订阅者的信箱中该怎么显示?当那么些关乎到邮箱,就总结为二个:为订阅者提供卓绝的体验。然则,那也不意味你的邮件必须在每一家客户端中都彰显的一致——只须求让你的具有订阅者都能易得易取。

小编欣赏的两位邮件设计师——Jonathan Kim 和 Brian
Graves——就可怜重申应用区别的法子达成:防范性邮件设计和渐进式巩固。

防卫性邮箱设计

大意两年前, Jonathan
Kim在我们的 Mobile
Master 文章展上提议了“Pushing the Limits of
Email”的概念。在开口中,Jonathan发明了1个新词来验证当前的电邮设计情形,即防范性邮件设计。

他表达说,由于有个别信箱客户端对CSS的协理有限,使得邮件设计者们陷入了破旧的宏图意况。他倡导邮件设计者们事先为那么些扶助互连网渲染引擎的客户端设计,进而推进邮件设计行当前行。

渐进式加强

以此类推,在201四年的邮箱设计大会上,DEG的UI设计师,
Brian
Graves,,建议了“赢得在各样显示器上统一筹划的战斗”。他的发话的显要在于渐进式加强,关于在援助的条件上提供高等作用。他也重申了优雅降级的第二。优雅降级意味着,尽管订阅者的邮箱客户端不可能支撑某项特定效率,你也要能为他们提供愉悦的用户体验。

对获取Brian的1体化呈现感兴趣?幻灯片和摄影未来都有提供了。

自动楼梯就是事实上生活中二个渐进式巩固和高雅降级的周密例子。已逝世正剧歌唱家Mitch
Hedberg开玩笑说,“自动扶梯永世不会出故障:因为它能够只是3个梯子。你应有永久也不晤面到‘自动扶梯权且故障’的标牌,只是‘自动扶梯一时为阶梯’,不便利方便。”不论环境如何,自动扶梯都能保全团结的成效。

为HTML5和CSS3兑现渐进式巩固

接纳渐进式巩固是解决邮件设计的最有效方法。大家都通晓的是,在邮箱中央银行使古板的HTML5和CSS3会在差别客户端之间引起众多渲染难点。向后的包容性万分不均等——一些HTML和CSS有加强的向后包容性而其余的却并未。对此,差异的客户端选拔了不一致取舍。使用正规的HTML伍和CSS三亟待更加多的测试,而且会潜移默化开采进程。所以,到底什么才是在邮箱中贯彻渐进式加强的最棒法子?

在电邮中接纳HTML伍和CSS3不必太不方便。它不供给在好奇的邮箱客户端上浪费大批量年华排除故障(说的就是Outlook邮箱)。它所供给做的便是用三个适宜的框架来不慢试行HTML伍和CSS3而不用烦恼和顾虑产生渲染难题。而且,10分幸运的是,大家有那么的框架。

上边便是邮件设计者们和开荒者们提供的壹行重要的代码:

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的信箱客户端——对HTML⑤和CSS叁有存疑的支持度。这几个媒体询问允许你使用当代技能例如HTML5录像、CSS叁卡通、web字体以及越多。

以此办法也将当代邮件客户端和旧式客户端的邮箱开拓分为两局地。你能够在运用Safari或Chrome浏览器为永葆WebKit的客户端测试开采现代技巧的还要,使用Firefox为旧式浏览器提供诸如外观之类的中坚经验。

如此那般消除电邮开辟难题得以将更多的质感调控进程转移到浏览器方面而不是电邮客户端。这给予邮件设计者以更加多的权力,调节力,和自信去支付1个能在富有邮箱客户端之间优雅渲染的电邮。

下载那几个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协理的很好的如Nokia和AppleMail之类的客户端吗?你能够接纳Litmus’
Email
Analytics测试工具检查测试出订阅者中最流行的信箱App。

基于所得到的音信,你能够操纵是或不是渐进式加强会对你的职业有协理。例如,假诺您的受众中多方面运用WebKit,能够很好的扶助高档效用,那么大概尝试立异性的本领,比如HTML5摄像,会是3个毋庸置疑的想法!

确立2个主导经验

用对HTML和CSS支持有限的邮箱App——如Outlook和Gmail,在你为其余客户端优化邮件从前,为订阅者建立多少个着力经验。渐进式加强不应有让别的用户产生次优体验。

尽大概优化

假定您曾经济建设立3个基日用本草验,就起来为其余用户优化体验。你能够选拔CSS3,录制,交互,可缩放向量图形(SVG),以及web字体。记住,即便是对HTML和CSS协理的可比好的Email客户端也有它们各自的例外之处,依然必要测试哪些才是卓有成效的。

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

大家先看看1些在邮件中央银行使渐进式加强的开创性例子。为了显得对这几个邮件的优化,你无法不运用两个如Chrome或Safari一样以Web基特为重力的浏览器。

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

为了播报201四邮件设计大会,小编们决定认真地以HTML5摄像为背景完毕渐进式巩固。固然那种专项本领只幸而Apple邮箱和Outlook
201一(Mac版)上职业,但那三种客户端达到接收特定邮件的用户十分之四左右。

View the full email here

对此不扶助录像的电邮客户端,HTML五录制仅仅只是退化为一高满堂态背景图片。我们的结果却是令人惊讶的——而且回报也是登高履危的!

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

那个时候中最酷的邮件之一是B&Q的交互式旋转圆盘邮件。对于WebKit客户端,该邮件包蕴了贰个旋转火热,供用户点击查看不一样的片段。

View the full email here

方方面面邮件中最令人影像深入的部分,恐怕是它为非Web基特邮箱使用的备用方案——2个美貌的转动木马网格布局,没有藏匿也远非复制任何内容!

图片 1

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

Litmus Builder(邮件开荒工具)交互之旅邮件

为了引进大家的新邮件代码编辑器,Litmus
Builder,在那封邮件中显得了汪洋的可点击交互。同样,该本领也只可以在Apple邮箱和Outlook
2011(Mac版)安徽中华南理工科业余大学学学程公司作,而那多少个却占了大家的主顾的多边。(注:邮件须要荧屏至少800像素宽工夫浏览。)

该展览仅仅只是退化为一个静态背景图片,而且会调用接口跳转到登录页面。那邮件获得了高大的打响,其出品在最先河的几天里扩充了不少的用户。

View the full email here

想尝试一下 Litmus Builder?注册后
,你就足以开端采取HTML伍和CSS叁测试你的邮件!

2个更新邮件设计框架

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 */
}

其1红娘查询为邮件设计师提供了四个简易的立异框架。大家可认为持有今世邮箱客户端的那一大学一年级些订阅者提供越来越好的体验。

最棒的看守正是进攻。今后该是进攻的时候了。在邮件设计中运用这些红娘查询初始更新,推动邮件前进。

为了订阅者去品尝。为了我们的行业,为了
对邮件的爱护。

业已十万火急想看看我们会联手创设出什么样了。

借使你用的是这种格局——可能支付你自身的越来越尖端的本子——在您的邮件中,大概一旦你对那种办法有其余的疑难,请在底下的褒贬中贴出,或许用越来越好的办法,去Litmus社区!

察觉你的受众 + 测试你的筹划

对此能够开始选择高端技巧像HTML5和CSS3来拉动邮件发展,是还是不是感到很震憾?确认保证识别出订阅者们最重视的信箱应用软件,然后测试你新设计的邮件。

通过邮件分析,你可以领悟订阅者通常在何地展开邮件,那样你就能够集中精力在渐进式巩固(以及优雅降级!)上了。

测试设计也是付出进程中充足关键的一步。在三1几个以上邮箱客户端和APP之间的包容性测试,能够确认保障订阅者们无论用哪些邮箱张开邮件都能寻常得到你的邮件。

 

赞 收藏 1
评论

一、HTML、XML、XHTML 有怎么着界别

HTML是超文本标志语言(Hyper Text 马克up
Language),是语法较为松散的、不严加的Web语言。比如大小写混写,编码不正规。

XML是可扩充标志语言(The Extensible 马克up
Language),首要用以存储数据和结构,重点是如何是数码,如何存放数据。XML
没有预约义的价签,是一种允许用户对团结的标志语言实行定义的源语言。

XHTML是可扩张超文本标记语言(Extensible Hyper Text 马克up
Language),基于XML,成效与HTML类似,但语法更严酷。

最关键的两样:

  • XHTML 元素必须被正确地嵌套
  • XHTML 成分必须被关闭
  • XHTML 标签字必须用小写字母
  • XHTML 文书档案必须具备根成分

前言

在开始展览 HTML Email Boilerplate
开荒时遇见的最普及的标题就是样式渲染和资源引入难点,这一个难题的发出往往是各大主流邮件客户端(手提式有线电话机、桌面或是网页版)对体制扶助或然能源引进的限量。


浏览器内核 Trident/Gecko/WebKit/Presto

至于我:fzr

图片 2

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

图片 3

2、怎么样领悟 HTML 语义化

基于内容的结构化(内容语义化),选用合适的标签(代码语义化)便于开垦者阅读和写出更优雅的代码,同时让浏览器的爬虫和机械和工具很好地分析、读懂内容。一句话来说是让代码更有益于清楚,更加精简,脱离了CSS仍可以看懂页面。

语义化的便宜:

  1. 清晰的页面结构:去掉或样式丢失的时候,也能让页面展现清晰的协会,加强页面包车型大巴可读性。
  2. 援救更多的装置:显示器阅读器(如若访客有视障)会完全依照你的号子来“读”你的网页。
    如若您使用的含语义的标识,荧屏阅读器会根据你的价签来推断网页的始末,而不是三个假名一个字母的拼写出来。
  3. 惠及SEO:和搜索引擎建立出色关系,有助于爬虫抓取越多的实惠音信,搜索引擎的爬虫也依靠于标识来规定上下文和一壹显要字的权重。
  4. 有利于团队开垦和维护:在组织中大家都依照同二个规范,能够减小过多差距化的东西,方便开荒和护卫,提升开销成效,甚至实现模块化开采。

目录

  • 模板开辟
  • 工具推荐
  • 参考资料

  “浏览器内核”首要指渲染引擎(Rendering
Engine),负责解析网页语法(如HTML、JavaScript)并渲染、体现网页。由此,所谓的浏览器内核经常也正是指浏览器所运用的渲染引擎,渲染引擎决定了浏览器如何浮现网页的剧情以及页面包车型客车格式音讯。不一致的浏览器内核查网页编写语法的剖析也云泥之别,因而同一网页在分化的内核浏览器里的渲染、突显效果也说不定分歧。

3、如何明白内容与体制分离的规格

Html指的是组织;CSS指的是样式;JavaScript指的是行为。

  • 写 HTML 的时候先不管样式, 重点放在HTML的协会和语义化上,让 HTML
    能反映页面结构依然内容。之后再去写样式。
  • HTML 内区别意出现属性样式,尽量不要出现行内样式。
  • 写 JS 的时候,尽量不要用 JS
    去一向操作样式,而是通过给成分增多删减class来决定样式变化。

模板开辟

首先,简明扼要提炼多少个邮件模板开采时的关切点:

一. CSS 成分的星星扶助
局地邮件客户端不援助 <style> in <head> 或 <style> in
<link>;
贰. 外部引入的能源只好是图形,无法是 stylesheets, fonts 和 vedio

3. 习以为常使用 table 举行页面布局

  • doctype
    有1对邮件客户端( Gmail 和 Hotmail )会移除
    doctype,当然大多数会保留你的 doctype,使用 XHTML1.0 的 doctype
    包容性最佳以及并发最少开辟者意想之外的情事;
    XHTML 1.0 的 doctype 代码如下:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Virtual Library</title>
  </head>
  <body>
    <p>Moved to <a href="http://example.org/">example.org</a>.</p>
  </body>
</html>
<!-- origin from XHTML 1.0 -->
  • layout
    创作页面包车型地铁起步平常是经过 HTML
    成分进行页面内容布局,然则大家无能为力自由的利用部分常用的成分,比如
    HTML5 的 <canvas><audio><vedio>的包容性就极差;

图片 4

HTML5 support for email clients

此外,由于壹些客户端对 CSS 的部分搭架子样式的支撑较差,比如 position
float 等,导致常用的 float + position的布局方法失效;

图片 5

CSS support for email clients

之所以,HTML Email Boilerplate 常用的通用布局方法是利用 tables

图片 6

table support for email clients

经过嵌套的 table 可以兑现复杂的布局;

  <table>
    <tr>
      <td width="50%"> 33.33% </td>
      <td width="25%"> 33.33% </td>
      <td width="25%"> 33.33% </td>
    </tr>
    <tr>
      <td colspan="3"> 100% </td>
    </tr>
  </table>

图片 7

table-layout-01

小编1起始接纳 table 布局,犯了一个荒唐,在此分享①番:

  <table>
    <tr>
      <td width="33.33%"> 33.33% </td>
      <td width="33.33%"> 33.33% </td>
      <td width="33.33%"> 33.33% </td>
    </tr>
    <tr>
      <td width="100%"> 100% </td>
    </tr>
  </table>

本意是想将第 二 个 tr
的大幅充满一行,结果下面代码导致现身意外的布局。

图片 8

table-layout-02

因而在为每一种 td 的小幅度实行百分比赋值时,倘诺某一行的 td
唯有一个时,日常设置 tdcolspan 属性去贯彻,colspan="x"的 x
值依据表格某行最多的 td 去确定。

另1种相比较统1的安装属性的点子是:

  <table>
    <tr>
      <td colspan="100%"> 50% </td>
    </tr>
    <tr>
      <td colspan="33.33%"> 33.33% </td>
      <td colspan="33.33"> 33.33% </td>
      <td colspan="34%"> 33.33% </td> <!-- 这里的 colspan 的值需要 hack 一下,才能保持布局一致性 -->
    </tr>
    <tr>
      <td colspan="25%"> 25% </td>
      <td colspan="25%"> 25% </td>
      <td colspan="25%"> 25% </td>
      <td colspan="25%"> 25% </td>
    </tr>
    <tr>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
    </tr>
  </table>

图片 9

table-layout-03

【code link

  • style

图片 10

style method injection of email clients

上海体育场面显示 Gmail 不帮助样式表通过 <head><link> 的艺术引入HTML,为了维持对 Gmail 的包容性,因而 HTML Email Boilerplate
的开销日常选拔 inline style 的方法。
当然,大家能够先将样式 <head> ,然后在通过一些 CSS Inliner 工具,如
putsmailPutsMail
直接嵌入 HTML 元素中。

HTML Email Boilerplate
开采重点的注意事项正是以上几点,当然涉及差异浏览器的因素样式处理分歧等的主题素材,大家能够动用第叁方写好的
Email-Boilerplate去消除上述难点。


  浏览器内核种类见怪不怪,商用的拉长非商业的免费内核,差不离会抢先10款,咱俩昨天珍视看一下当下主流的四大浏览器内核Trident、Gecko、WebKit以及Presto

四、有如何常见的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:页面上的链接不可能被询问。

工具推荐

  • 查询邮件客户端所支撑样式属性的网址
    campaignmonitor

  • Gmail 的 Email Template 插件
    Gmail™ Email
    Templates

  • CSS Inliner
    putsmail

  • Email Boilerplate
    Email
    Boilerplate


  图片 11

5、文档注脚的效果,严酷情势和混合形式指什么?<!doctype html>的作用?

网页的DOCTYPE注解的意义
DOCTYPE是document
type(文书档案类型)的简写,在Web设计使得来验证你用的XHTML只怕HTML是怎样版本。要成立符合标准的网页,DOCTYPE表明是不能缺少的首要组成都部队分;除非你的XHTML明确了2个没有错的DOCTYPE,不然你的标记和CSS都不会生效。
在HTML中 doctype 有四个相当重要目标:

  • 对文书档案进行有效验证
  • 决定浏览器的显现情势

Doctype可注脚三种DTD类型,分别表示严峻版本、过渡版本以及基于框架的 HTML
文档。
当浏览器厂家初步创办与正式卓绝的浏览器时,他们愿意确定保证向后包容性。为了完成这点,他们创造了两种表现情势:正式格局和交集形式

  • 严格方式的排版和 JS 运作格局是以该浏览器帮助的最高标准运营;
  • 在混合格局中,页面以一种相比较宽松的向后拾叁分的章程体现,模拟老式浏览器的一言一行以堤防老站点无法职业。

形式触发

  • 浏览器依据DOCTYPE是不是存在以及利用的哪一类DTD来选取要采用的变现格局。纵然XHTML、HTML
    四.0一文书档案包括格局完全的DOCTYPE,那么它壹般以正规化格局表现。
  • 涵盖过渡DTD和UEnclaveI的DOCTYPE也导致页面以正规化格局表现,然而有连接DTD而从不U凯雷德I会导致页面以混合情势表现。
  • DOCTYPE不设有或款式不正确会促成HTML和XHTML文档以混合方式表现。

html5既然未有DTD,也就从未有过严俊情势与宽松格局的界别,html5有相对宽松的语法,达成时,已经竭尽大的兑现了向后格外。

参考资料

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

 

标签:, , , , , , ,

Your Comments

近期评论

    功能


    网站地图xml地图