HTML Email Boilerplate 开荒

作者:ca88

在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”的概念。在开口中,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协理的很好的如Nokia和AppleMail之类的顾客端吗?你可以行使Litmus’ Email Analytics测量检验工具检查评定出订阅者中最盛行的邮箱App。

基于所赚取的音信,你能够垄断(monopoly)是或不是渐进式巩固会对您的办事有支持。比如,如若你的受众中多方面运用Web基特,能够很好的帮助高档作用,那么恐怕尝试立异性的本领,举个例子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邮箱使用的备用方案——三个精粹的旋转木马网格布局,没有藏匿也绝非复制任何内容!

ca88 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,然后测验你新规划的邮件。

经过邮件深入分析,你能够掌握订阅者平日在哪个地方张开邮件,那样你就可以集中精力在渐进式巩固(以及高雅降级!)上了。

测量试验设计也是付出进度中非常主要的一步。在贰二十一个以上邮箱顾客端和APP之间的宽容性测量检验,能够有限支撑订阅者们无论用什么邮箱展开邮件都能健康获得你的邮件。

 

赞 收藏 1 评论

2.正视邮件指标和折叠

固然本身不是“above the fold”难点的观众,可是在移动设备上读书邮件意味大家要把上半有的放在极度首要的地点。

让客商能够轻便地看看摘要目录,在比很多气象下都能迅速浏览内容,进而引导读者长远阅读。

邮件顶上部分的小段落能够做到那几个。

ca88 2

那使得有个别首要的顾客端(如谷歌(Google)邮件,或许IOS和OSX上的邮件)职业更方便。

ca88 3

3、怎么样通晓内容与体制分离的规格

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

  • 写 HTML 的时候先不管样式, 入眼放在HTML的组织和语义化上,让 HTML 能反映页面结构依然内容。之后再去写样式。
  • HTML 内差别意出现属性样式,尽量不要出现行内样式。
  • 写 JS 的时候,尽量不要用 JS 去平素操作样式,而是通过给成分增加删减class来支配样式变化。

模板开拓

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

1. CSS 成分的一定量支持
有的邮件客商端不辅助 <style> in <head> 或 <style> in <link>;
2. 外界引进的财富只可以是图表,不得以是 stylesheets, fonts 和 vedio 等
3. 家常接纳 table 进行页面布局

  • doctype
    有部分邮件顾客端( 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>的宽容性就极差;

ca88 4

HTML5 support for email clients

除此以外,由于有的顾客端对 CSS 的片段布局样式的支持很差,例如 positionfloat 等,导致常用的 float position的布局方法失效;

ca88 5

CSS support for email clients

故而,HTML Email Boilerplate 常用的通用布局方法是利用 tables

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

ca88 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 的宽窄充满一行,结果下面代码导致出现意外的布局。

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

ca88 9

table-layout-03

【code link 】

  • style

ca88 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去化解上述难题。


关于我:fzr

ca88 11

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

ca88 12

让大家一齐来探究关于移动设备上的邮件设计供给思量的题目,这么些钻探并不意味能够解答手提式无线电话机邮件设计上的有着题目,但那是一个好的源点。

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 文书档案必得怀有根成分

ca88,工具推荐

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

  • Gmail 的 Email Template 插件
    Gmail™ Email Templates

  • CSS Inliner
    putsmail

  • Email Boilerplate
    Email Boilerplate


挪动器械上的邮件设计不独有是四个剧情填充列表,它事关好些个陈设因素。

8、列出大范围的竹签,并简单介绍那么些标签用在怎么样情况

标签 场景
head head标签是页面的“头部”, 一般来说,只有6个标签能放在<head>标签内:<title>、<meta>、<link>、<style>、<script>、<base>
body body标签是页面的“身体”
h1~h6标签 设置不同的标题
p标签 使用p标签来标记一段文字

换行
<div> 主要用来为HTML文档内大块的内容提供结构和背景
ul 无序列表
ol 有序列表
<form> 设置一个表单
img 设置一个图像
a 连接

HTML5_CSS3_传播媒介询问

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

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

本文由ca88发布,转载请注明来源

关键词: ca88网址 程序员 CSS 前端学习