菜单

HTML Email Boilerplate 开发

2019年1月27日 - 金沙前端

在Email中防御性地拔取HTML5和CSS3的指南

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

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

“在Email中不可能运用HTML5或CSS3”。

鉴于它们“有限”的支撑,那已成为邮件设计行业的一个广泛共识。但是,大家后天得以说它是一个截然荒唐的布道。

即使支持还不是丰裕通用的,但许多主流电邮客户端已经得以支撑HTML5和CSS3了。实际上,电邮总体市场的50%都支持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)作为渲染引擎,那也是干什么最好就支持Web基特(Kit)的邮箱提供您的增强版。不过,使用媒体询问为Web基特(Kit)渲染引擎添加相同的效应就概括的多了,对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为引力的浏览器。

2014邮件设计大会以HTML5视频为背景的邮件

为了播报2014邮件设计大会,俺们决定认真地以HTML5视频为背景落成渐进式增强。即便那种专项技能只好在Apple邮箱和Outlook
2011(Mac版)上行事,但那二种客户端达到接收特定邮件的用户40%左右。

View the full email here

对此不襄助录像的电邮客户端,HTML5视频仅仅只是退化为一张静态背景图片。我们的结果却是令人奇怪的——而且回报也是震惊的!

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

这一年中最酷的邮件之一是B&Q的交互式旋转圆盘邮件。对于Web基特(Kit)客户端,该邮件包涵了一个筋斗热点,供用户点击查看差别的有些。

View the full email here

漫天邮件中最令人影像深刻的有些,可能是它为非WebKit邮箱使用的备用方案——一个美观的转动木马网格布局,没有藏匿也远非复制任何内容!

澳门金沙国际 1

您可以在 Firefox 或 Internet Explorer 浏览器中开辟该邮件查看备用设计。

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

为了引入大家的新邮件代码编辑器,Litmus
Builder,在那封邮件中显得了大气的可点击交互。同样,该技术也只可以在Apple邮箱和Outlook
2011(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,然后测试你新安顿的邮件。

透过邮件分析,你可以通晓订阅者日常在何地打开邮件,那样您就足以集中精力在渐进式增强(以及优雅降级!)上了。

测试设计也是付出进程中那么些主要的一步。在30个以上邮箱客户端和APP之间的包容性测试,能够有限支撑订阅者们无论用什么样邮箱打开邮件都能健康得到你的邮件。

 

赞 收藏 1
评论

1、HTML、XML、XHTML 有哪些界别

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

XML是可扩展标识语言(The Extensible 马克up
Language),主要用来存储数据和社团,重点是什么是多少,如何存放数据。XML
没有预订义的标签,是一种允许用户对团结的记号语言举办定义的源语言。

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

最首要的不比:

什么是 CSS hack?

  1. 特性前缀法(类内部Hack)。例如IE6能识别下划线 “”和星号“”;
    IE7能识别星号“”但是不可以分辨下划线
    ”;IE6~10都能鉴别“/9”,但firefox前述多少个都不可能辨识。

background-color:red; /* All browsers */  
background-color:blue !important;/* All browsers but IE6 */  
*background-color:black; /* IE6, IE7 */  
+background-color:yellow;/* IE6, IE7*/  
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
background-color:purple\0; /* IE8, IE9, IE10 */  
background-color:orange\9\0;/*IE9, IE10*/  
_background-color:green; /* Only works in IE6 */
  1. 选取器前缀法(拔取符Hack)。例如 IE6能识别html
    .class{},IE7能识别
    +html .class{}或者*:first-child+html .class{}。

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
等等
  1. IE条件注释法(HTML条件注释Hack)。针对富有IE(注意IE10+已经不再扶助标准注释)。

只在IE下生效
    <!--[if IE]>
    这段文字只在IE浏览器显示
    <![endif]-->

    只在IE6下生效
    <!--[if IE 6]>
    这段文字只在IE6浏览器显示
    <![endif]-->

    只在IE6以上版本生效
    <!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
    <![endif]-->

    只在IE8上不生效
    <!--[if ! IE 8]>
    这段文字在非IE8浏览器显示
    <![endif]-->

    非IE浏览器生效
    <!--[if !IE]>
    这段文字只在非IE浏览器显示
    <![endif]-->
这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

前言

在举行 HTML Email Boilerplate
开发时相遇的最普遍的题目就是体制渲染和资源引入问题,那些问题的发生往往是各大主流邮件客户端(手机、桌面或是网页版)对体制援救可能资源引入的界定。


有关小编:fzr

澳门金沙国际 2

微博:@fzr-fzr)
个人主页 ·
我的小说 ·
26

澳门金沙国际 3

2、怎么着精晓 HTML 语义化

据悉情节的结构化(内容语义化),选拔恰当的标签(代码语义化)便于开发者阅读和写出更优雅的代码,同时让浏览器的爬虫和机具很好地分析、读懂内容。简而言之是让代码更有利于通晓,更不难,脱离了CSS仍能看懂页面。

语义化的益处:

  1. 明晰的页面结构:去掉或样式丢失的时候,也能让页面突显清晰的布局,增强页面的可读性。
  2. 支撑越多的设施:显示器阅读器(假使访客有视障)会完全按照你的符号来“读”你的网页。
    借使你使用的含语义的号子,显示屏阅读器会根据你的价签来判定网页的情节,而不是一个字母一个字母的拼写出来。
  3. 便宜SEO:和寻找引擎建立优质关系,有助于爬虫抓取越来越多的管用音信,搜索引擎的爬虫也凭借于标记来确定上下文和顺序显要字的权重。
  4. 便利团队开发和掩护:在组织中我们都根据同一个标准,可以削减过多差距化的东西,方便开发和保证,提升开发成效,甚至已毕模块化开发。

谈一谈浏览器包容的思绪。

目录


3、如何领悟内容与体制分离的规范

Html指的是结构;CSS指的是体制;JavaScript指的是表现。

历数5种以上浏览器包容的写法。

  1. 规范注释 (conditional comment)

<!--[if IE 6]>
<link href="ie6only.css" rel="stylesheet">
<[endif]-->

注意非IE下条件注释的语法格式有所不同。
<--[if ! IE ]> .....................<!-->
  1. 特性前缀法

.box {
    color: red;
    _color: blue; /*IE6*/
    *color: pink; /*IE7*/
    color: yellow; /* IE/Edge 6~8 */    
}
.box {
      display: inline-block;
      *display: inline;
      *zoom: 1;
}
.clearfix {
*zoom:1;
}  
  1. 选取器前缀法
    慎选器前缀法是对准部分页面表现不雷同或者要求独特对待的浏览器,在CSS选用器前加上有的只有某些特定浏览器才能识别的前缀进行hack。
    时下最普遍的是:

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
等等
  1. 据悉包容要求接纳合适的技术框架
    比如 :
    Bootstrap >= ie8;
    jQuery1.xx >=ie6;
    jQuery2.xx >=ie9;
    vue >= ie9。
  2. 基于兼容须要拔取同盟工具: html5shiv.js , respond.js ,CSS reset ,
    normalize.CSS , modernizr

模板开发

第一,简明扼要提炼多少个邮件模板开发时的关怀点:

1. CSS 元素的点滴扶助
有的邮件客户端不扶助 <style> in <head> 或 <style> in
<link>;
2. 外部引入的资源只能是图形,不得以是 stylesheets, fonts 和 vedio

3. 惯常使用 table 进行页面布局

<!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 -->

澳门金沙国际 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

笔者一开端选择 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>

本意是想将第 2 个 tr
的增加率充满一行,结果上面代码导致出现意外的布局。

澳门金沙国际 8

table-layout-02

之所以在为每个 td 的肥瘦进行百分比赋值时,如若某一行的 td
唯有一个时,常常设置 tdcolspan 属性去完毕,colspan="x"的 x
值按照表格某行最多的 td 去确定。

另一种相比较统一的装置属性的艺术是:

  <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

澳门金沙国际 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去化解上述问题。


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:页面上的链接不得以被询问。

4.之下工具/名词是做什么的

工具推荐


相关文章

发表评论

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

网站地图xml地图