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

在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的支持有限,使得邮件设计者们陷入了陈旧的设计状态。他倡导邮件设计者们优先为那些支持网络渲染引擎的客户端设计,进而推动邮件设计行业发展。

渐进式增强

以此类推,在2014年的邮箱设计大会上,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支持的很好的如iPhone和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的交互式旋转圆盘邮件。对于WebKit客户端,该邮件包含了一个旋转热点,供用户点击查看不同的部分。

View the full email here

整个邮件中最令人印象深刻的部分,可能是它为非WebKit邮箱使用的备用方案——一个美丽的旋转木马网格布局,没有隐藏也没有复制任何内容!

图片 1

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

在Email中防御性地使用HTML5和CSS3的指南。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 Markup
Language),是语法较为松散的、不严格的Web语言。比如大小写混写,编码不规范。

XML是可扩展标识语言(The Extensible Markup
Language),主要用于存储数据和结构,重点是什么是数据,如何存放数据。XML
没有预定义的标签,是一种允许用户对自己的标记语言进行定义的源语言。

XHTML是可扩展超文本标记语言(Extensible Hyper Text Markup
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来控制样式变化。

模板开发

首先,简明扼要提炼几个邮件模板开发时的关注点:

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>的兼容性就极差;

图片 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

  • 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

1.保持简洁

严禁复杂—尤其是在邮件上。始终避免使用复杂的结构,否则在小屏幕上渲染时一定会失败。请记住许多设备是不支持媒体查询的(例如谷歌邮件),所以我们不能指望成熟的内容重排技术。

一个线性简单的布局在大多情况下都能表现良好。

邮件的整体大小也非常重要,如果它超过了预设的大小(大概100KB),你的邮件将不能完全加载。我在所有的客户端上都没有测试出这个问题,但是谷歌邮件和IOS设备出现了这个问题。

下面这张截图里,你能够看到用户是如何通过点击一个链接查看整个信息:这使得用户不必阅读全部邮件。

图片 11

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

工具推荐

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

  • Gmail 的 Email Template 插件
    Gmail™ Email
    Templates

  • CSS Inliner
    putsmail

  • Email Boilerplate
    Email
    Boilerplate


  图片 12

2.注重邮件目标和折叠

虽然我不是“above the
fold”问题的粉丝,不过在移动设备上阅读邮件意味我们要把上半部分放在非常重要的位置。

让用户能够轻松地看到摘要目录,在大多数情况下都能快速浏览内容,从而引导读者深入阅读。

邮件顶部的小段落可以做到这些。

图片 13

这使得一些重要的客户端(如谷歌邮件,或者IOS和OSX上的邮件)工作更便利。

图片 14

5、文档声明的作用,严格模式和混杂模式指什么?<!doctype html>的作用?

网页的DOCTYPE声明的作用
DOCTYPE是document
type(文档类型)的简写,在Web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
在HTML中 doctype 有两个主要目的:

  • 对文档进行有效性验证
  • 决定浏览器的呈现模式

Doctype可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的 HTML
文档。
当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式

  • 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行;
  • 在混杂模式中,页面以一种比较宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止老站点无法工作。

模式触发

  • 浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML、HTML
    4.01文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。
  • 包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
  • 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

 

3.调整字体和图片

这个话题只适用那些支持媒体查询的设备。不幸的是,对于那些不支持的设备我们没有任何办法,他们会自己调整文本与图片。

目前,媒体查询能够被所有IOS设备支持,安卓原生邮件应用也支持(但是有一点问题并且Lollipop抛弃了这一特性支持谷歌邮件),还有最新的黑莓手机和少数的其它手机支持。

IOS设备在字体与图片尺寸上有两个主要问题:

小字体在默认情况下被放大

邮件宽度基于最大的单元

字体被放大通常不能说是一个严重的问题,但是在很多情况会导致文本超出你的布局被剪切。

在你的CSS代码中加入这一行能够轻松解决这一问题。

{-webkit-text-size-adjust:none;}

下面的截图你能够清楚地看到通过添加-webkit-text-size-adjus,红色区域的文本大小是如何改变的,左边的是添加后的,右边的是没添加。

图片 15

字体调整也影响移动设备上的用户体验。小字体在桌面设备上能够轻松阅读,但是小屏幕上就有完全不同的影响。

看下面这个例子,右边的文字被放大了能够轻松阅读,吸引用户的目光。

图片 16

一般来说,在移动设备上放大文本字体是一个非常好的做法,特别是对邮件来说。因为阅读的时间很紧张你需要快速抓住用户的关注。

6、浏览器乱码的原因是什么?如何解决

乱码产生的根本原因

  1. 保存的编码格式和浏览器解析时的解码格式不匹配导致
  2. 乱码一般是英文以外的字符才会出现

解决办法

  1. 设置<meta charset>标签声明文档使用的字符编码
  2. 设置正确的字符编码
  3. 设置浏览器显示正确的编码

如果浏览器浏览时候出现网页乱码,在浏览器中找到转换编码的菜单调整。

IE9浏览器:在需要转码的网页空白出右键鼠标,选择“编码”。
傲游浏览器:在需要转码的网页时,菜单“查看”-->“编码”即可选择转换编码。
谷歌浏览器:在需要转码的网页时,点击右上角“三横”图标选择“工具”-->“编码”即可选择切换网页编码。

  一、Trident内核(代表:Internet Explorer)

关于图片

你可以为那些支持媒体查询的设备加载针对性图片(可以看看这两篇文章A
Slick, New Image Swapping Technique for Responsive
Emails和Optimizing
images for
mobile)

7、常见的浏览器有哪些?什么内核?

图片 17

  说起Trident,很多人都会感到陌生,但提起IE(Internet
Explorer)则无人不知无人不晓,由于其被包含在全世界使用率最高的操作系统Windows中,得到了极高的市场占有率,所以我们又经常称其为IE内核。

4.自定义链接和按钮

移动设备上的邮件设计对于链接需要一点技巧。

首先考虑到将被手指点击,所以保持良好的间隔并严格限制数量。

确保他们很容易点击并可见。此外,永远记住在内联CSS样式表中为锚添加规则:Gmail应用程序链接的样式为蓝色,默认情况下强调他们。

一个潜在的小问题是,Gmail和IOS自动为电话号码,URL和电子邮件字符串(只是Gmail)添加链接。

为避免IOS自动生成电话链接,你可以在你的代码中添加meta标签。

1

Gmail的解决有一些狡猾:它通过加入一些不可见的字符,以确保字符串不会被识别为一个潜在链接。

我用HTML实体和“中性”span标签做了一系列测试。只有用span标记打破链接的每个部分,才能获得预期结果。

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

浏览器内核又可以分成两部分:渲染引擎(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实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用
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 标准脱节(2005年)
  • 二是 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 是一个由Google和Opera
Software开发的浏览器排版引擎,这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支。

Google 决定从 WebKit 衍生出自己的 Blink 引擎,将在 WebKit
代码的基础上研发更加快速和简约的渲染引擎,并逐步脱离 WebKit
的影响,创造一个完全独立的 Blink 引擎。

  Trident(又称为MSHTML),是微软开发的一种排版引擎。它在1997年10月与IE4一起诞生,一直在被不断地更新和完善。而且除IE外,许多产品都在使用Trident核心,比如Windows的Help程序、RealPlayer、Windows
Media Player、Windows Live Messenger、Outlook
Express等等都使用了Trident技术。

5.添加间距

对于邮件的设计我有一个最新的建议就是考虑增大文本内容的内边距,这能够显著提升邮件可读性。

参考文章

Campaign Monitor Guides: Responsive Email
Design

Email On Acid: 7 Tips on Designing and Developing Emails for the
iPhone

Litmus: Ditch the “Mobile Version” of Your
Email

Litmus: The How-To Guide to Responsive Email
Design

Litmus:https://litmus.com/blog/anatomy-mobile-email

Email On Acid:12 Things you MUST Know when Developing Emails for Gmail
and Gmail Mobile
Apps

Email On Acid: Viewport Metatag Rendered
Unusable

Email On Acid: How Android is Strangling Responsive
Design

Email On Acid:5 Easy Ways to Improve Your Mobile
Design

Litmus: Mobile Email is Here to Stay. What Comes
Next?

Litmus: Three Step Media Queries Imitate Fluid Resizing for Expedia
Emails

全球最新的设计资源,精彩实用设计技巧每天呈现。欢迎关注微信公众号:ienqoo

图片 18

让每一款产品体验更好:www.enqoo.com

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_媒体查询

  Trident实际上是一款开放的内核,Trident引擎被设计成一个软件模块,使得其他软件开发人员很容易将网页浏览功能加到他们自行开发的应用程序里,其接口内核设计相当成熟,因此涌现出许多采用IE内核而非IE的浏览器,但是Trident只能用于Windows平台。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Sleipnir、GOSURF、GreenBrowser和KKman等。

  二、Gecko内核(代表:Mozilla Firefox)

  Gecko是开放源代码、以C++编写的网页排版引擎,目前被Mozilla家族网页浏览器以及Netscape
6以后版本浏览器所使用。这款软件原本是由网景通讯公司开发的,现在则由Mozilla基金会维护。由于Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。因为这是个开源内核,因此受到许多人的青睐,采用Gecko内核的浏览器也很多,这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。

  Gecko排版引擎提供了一个丰富的程序界面以供与互联网相关的应用程序使用,例如网页浏览器、HTML编辑器、客户端/服务器等。虽然最初的主要对象是Mozilla的衍生产品,如Netscape和Mozilla
Firefox,但是现在已有很多其他软件利用这个排版引擎。此外Gecko也是一个跨平台内核,可以在Windows、BSD、Linux和Mac
OS X中使用。

  正在和曾经使用Gecko引擎的浏览器有Firefox、网景6~9、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。Google
Gadget引擎采用的就是Gecko浏览器引擎。

  三、WebKit内核(代表:Safari、Chrome)

  WebKit 是一个开放源代码的浏览器引擎(Web Browser
Engine),WebKit最初的代码来自KDE的KHTML和KJS(它们均为开放源代码,都是自由软件,在GPL协议下授权)。所以WebKit也是自由软件,同时开放源代码。它的特点在于源码结构清晰、渲染速度极快。主要代表产品有Safari和Google的浏览器Chrome。

  WebKit内核在手机上的应用也十分广泛,例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia
S60浏览器等所使用的浏览器内核引擎,都是基于WebKit引擎的。
WebKit内核也广泛应用于Widget引擎产品,包括中国移动的BAE、Apple的Dashboard以及Nokia
WRT在内采用的均为WebKit引擎。

  四、Presto内核(代表:Opera)

  Presto是由Opera Software开发的浏览器排版引擎,供Opera
7.0及以上使用。它取代了旧版Opera
4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto的特点就是渲染速度的优化达到了极致,它是目前公认的网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。

  Presto实际上是一个动态内核,与Trident、Gecko等内核的最大区别就在于脚本处理上,Presto有着天生的优势,页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行JavaScript时有着最快的速度,根据同等条件下的测试,Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。Presto是商业引擎,了Opera以外较少浏览器使用Presto内核,这在一定程度上限制了Presto的发展。

网站地图xml地图