菜单

在Email中防御性地行使HTML5和CSS3的指南

2019年1月24日 - JavaScript

在Email中防御性地使用HTML5和CSS3的指南

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

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

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

出于它们“有限”的支撑,那已改成邮件设计行业的一个广泛共识。可是,大家前些天得以说它是一个全然荒唐的传道。

固然接济还不是足够通用的,但过多主流电邮客户端已经得以协助HTML5和CSS3了。实际上,电邮总体市场的50%都帮忙HTML5和CSS。前五大电邮客户端中也有3家开端扶助它们了。对于特定顾客,可支撑的始末恐怕会更多。

但是,那个还不可以支撑那几个高级成效的客户端会如何呢?你的邮件在这么的订阅者的邮箱中该怎么浮现?当那么些关乎到邮箱,就归纳为一个:为订阅者提供杰出的心得。不过,那也不意味你的邮件必须在每一家客户端中都显示的一致——只必要让你的具备订阅者都能易得易取。

自我欣赏的两位邮件设计师——乔纳森(Jonathan)(Jonathan) Kim 和 Brian
Graves——就至极强调应用区其他主意完成:防御性邮件设计和渐进式增强。

防御性邮箱设计

差不多两年前, Jonathan
Kim
在咱们的 Mobile
Master 小说展上提议了“Pushing the Limits of
Email
”的定义。在谈话中,Jonathan发明了一个新词来证实当前的电邮设计景况,即防御性邮件设计。

他表达说,由于有些信箱客户端对CSS的支持有限,使得邮件设计者们陷入了破旧的筹划情状。他倡导邮件设计者们事先为那一个协理网络渲染引擎的客户端设计,进而推动邮件设计行业进步。

渐进式增强

以此类推,在二零一四年的邮箱设计大会上,DEG的UI设计师,
manbetx2.0手机版,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基特的邮箱提供您的增强版。然而,使用媒体询问为Web基特渲染引擎添加相同的机能就大约的多了,对Thunderbird之类的客户端而言。

除外那些措施,还有此外在电邮中已毕HTML5和CSS3的法子呢?有。但我们相信那一个方法是开发的最便捷的办法——也是最安全的。它裁减了为特殊邮箱客户端支付外观之类必要的工作量,而且集中于按照浏览器的测试。

总括:渐进式增强的提出

问询您的受众

订阅者在哪个地方打开你的邮件?他们会动用对HTML和CSS帮助的很好的如黑莓和AppleMail之类的客户端吗?你可以行使Litmus’
Email
Analytics
测试工具检测出订阅者中最风靡的邮箱App。

据悉所得到的新闻,你可以控制是还是不是渐进式增强会对您的干活有援助。例如,借使你的受众中多方面行使Web基特(Kit),能够很好的支撑高级功效,那么可能尝试立异性的技术,比如HTML5
视频,会是一个不利的想法!

建立一个焦点经验

用对HTML和CSS协理少数的信箱App——如Outlook和Gmail,在您为其余客户端优化邮件以前,为订阅者建立一个中央经验。渐进式增强不应该让其余用户发生次优体验。

尽量优化

要是您早已确立一个为主经验,就从头为其余用户优化体验。你可以拔取CSS3,视频,交互,可缩放向量图形(SVG),以及web字体。记住,即便是对HTML和CSS协理的可比好的Email客户端也有它们分其余优秀之处,依旧要求测试哪些才是行得通的。

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

咱们先看看一些在邮件中行使渐进式增强的开创性例子。为了浮现对那个邮件的优化,你不可能不选拔一个如Chrome或Safari一样以Web基特为引力的浏览器。

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

一体邮件中最令人印象深入的部分,可能是它为非Web基特(Kit)邮箱使用的备用方案——一个美观的团团转木马网格布局,没有藏匿也从未复制任何内容!

manbetx2.0手机版 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
评论

HTML 邮件内容固然也是 HTML,不过和我们在网页上利用的 HTML
不一致,因为安全原因,各大邮箱服务商及邮件客户端都会对邮件内容展开自然程度上的拍卖,不会按照你写的原来
HTML 呈现。

至于小编:fzr

manbetx2.0手机版 2

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

manbetx2.0手机版 3

在桌面和运动端渲染电子邮件大概有上百万种分裂的构成格局。

更为是鼎鼎大名的 OutLook,从 OutLook2007 开头便选用 Word HTML
引擎举行渲染,为了它的安全性从而使得整个邮件倒退回了 2000
年前,为了邮件的包容性你只可以动用过多屏弃的标签、属性,并且这一现象将会维持无数个
开春,因为即使总体终有尽头,但 OutLook 始终存在。

因为微软一贯地特立独行,使得 OutLook 成为了最难啃的骨头。因为 OutLook
扶助的竹签和性质少得极度,所以要是兼容了
OutLook,其他邮箱客户端基本都不会有何问题。

使用tableb布局

那差不离是 HTML 邮件与常见 HTML 页面最大的分别,因为各种邮箱对 div + css
这一套布局的解析问题很大(如 float / position 等 CSS 都会被过滤,甚至
margin: 0 auto; 都不起作用),基本各大邮箱都会分析混乱,所以老式的 table
布局是优等之选。那就代表 HTML 邮件中大约只有那多少个因素——table / tr /
td / span / img / a,尽量防止使用 div / p 或是其余标签。

并且并不是有着邮箱都协理 colspan / rowspan 属性,所以具有布局都亟需运用
table 嵌套解决。

1.Doctype

近期,包容性最好的Doctype是XHTML 1.0
Strict,事实上Gmail和Hotmail会删掉你的Doctype,换上这几个Doctype。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>HTML Email编写指南</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

 </head>

</html>

接纳这些Doctype,也就表示,不可能运用HTML5的语法。

2.布局

网页的布局(layout)必须拔取表格(table)。首先,放置一个最外层的大表格,用来安装背景。

基本html
<body style="margin: 0; padding: 0;">
  <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="border-collapse: collapse; width: 100%; max-width: 750px; margin: 0 auto; text-align:center; font-size:0;">
    <tr>
      <td style="padding: 0;">
        <a href="" target="_blank">
          <img border="0" src="" alt="tuya smart" title="tuya smart" style="width:100%; display: block;"
          />
        </a>
      </td>
    </tr>
    <tr>
      <td style="padding: 0;">
        <img border="0"  src="" alt="tuya smart" title="tuya smart" style="width:100%; display: block;"
        />
      </td>
    </tr>
  </table>
</body>

3.图片

图片是绝无仅有可以引用的外部资源。其余的外部资源,比如样式表文件、字体文件、录像文件等,一概不可以引用。

稍稍客户端会给图片链接加上面框,要刨除边框。

img {
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
}

a img {
    border:none;
}

<img border="0" style="display:block;">

需求小心的是,不少客户端默许不显得图片(比如Gmail),所以要力保固然没有图片,主要内容也能被阅读。

4.行内样式

具备的CSS规则,最好都使用行内样式。因为放置在网页底部的样式,很可能会被客户端删除。客户端对CSS规则的支撑处境,请看那里。

其余,不要使用CSS的简写形式,有些客户端不支持。比如,不要写成下边那样:

style="font: 8px/14px Arial, sans-serif;"

借使想发挥

<p style="margin: 1em 0;">

要写成上边那样:

<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">

相关小说

HTML
邮件包容问题与解决方案

相关文章

发表评论

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

网站地图xml地图