Ink框架快速创建响应式EDM模板
2013-11-12 00:00
1671 查看
EDM是"Email Direct Marketing"的缩写,即电子邮件营销,简称为邮件营销。是利用电子邮件与受众客户进行商业交流的一种直销方式。
从字面上来说,EDM似乎和前端人员没有太大的关系,可要是说起"EDM模板",我想很多前端人员都知道,同时也很烦感***这样的页面,原因大家都懂的。
"EDM模板"都是使用表格来***,并且都是通过行内样式来控制页面的渲染风格,致使很多效果在"EDM模板"中有限制,而且在***时有很多限制条件,同时还要兼容众多版本的客户端邮件系统。不比处理IE兼容简单。
通过以前那些***"EDM模板"的技术***出来的“EDM”页面无法满足目前客户所需的要求,比如说在移动智能设备上的访问,效果会严重影响用户的阅读。这两天看到Zurb公司推出的一款“EDM模板”***的框架——Ink,觉得很有意思,特意学习了一下,现根据Ink官网文档与大家一起探讨Ink如何***“EDM模板”。
介绍
随着移动智能设备市场份额的增加,超过40%的邮件都在移动设备上打开,确保在任何设备上浏览邮件正常是势在必行的。最近在实际的工个时也时常碰到产品经理提来的需求,需要“EDM”在移动设备上能显示正常。促使我们不得不考虑这个新需求,我们也在一直寻找适合的解决方案。幸运的是,新的解决文案来了——Ink,一个全新的***响应式EDM模板的框架。
Ink是由Zurb团队开发的一款快速创建响应式的HTML邮件模板(EDM模板)的框架。使用Ink框架创建的"EDM模板"可以在任何设备和客户端上运行,包括Outlook。
我们将学到什么
学习Ink框架,我们将获得什么?
灵活性是关键
Ink是一个框架,而不是一个模板。实现向应式电子邮件,模板是最受欢迎的方法,但他们不是非常灵活,具有很多局限性。我们不希望有这些约束。我们需要灵活性和用一个框架来提供这些。Ink使用了最具可分性的12列网格——你可以将网格划分成一列、两列、三列或四列。原本考虑使用一个四列的网格,但发现它阻碍了我们的灵活性。给人们更多的灵活性,包括设计师经常使用到的UI元素、按钮和面板。但他们是完全可以根据适合的设计需求进行任何的定制。
Ink不仅是一个框架。这是一个过程,开发者采取了一致性的约定,用于创建电子邮件。
Outlook仍然很重要
Outhlook仍占有很大的市场份额。从技术上讲,Outlook是最具限制的电子邮件客户端——例如,他不支持max-width:100%。所以在设计的早期,我们就得考虑这些难题。设计首先要考虑Outlook下通过Media Queries来增强用户在移动端的体验。Ink充先你使用固定宽度,而不是流体布局来支持Outlook。
Media Queries是未来趋势
我们使用最好的方法来支持移动端的Gmail。尽管媒体查询方法是首选,我们最终提供一个非媒体查询解决文案,例如block-grid,即块网格。这样就很头痛,所以我们建立了我们自己的行内样式,用来更好的兼容Gmail。
***过程
可以通过以下五个步骤让你的邮件看起来非常的完美。
在Outlook中测试
Outlook是最大的电子邮件客户端,以及图片不能自动适应大小。在继续之前先确定邮件是好的。
添加响应式样式
加入你想要的响应式样式,这些样式通过<style>标记放在文档的<head>中:
附上你的行内样式
一旦你的电子在Outlook中看上去没有问题和载入了响应式样式,你可以附上行内样式,这样你可以实现各种各样的服务。
我们建议使用Inky的Inliner去做这样的事情。
测试你的邮件
先不要把邮件发送出去。确保你在尽可能多的平台上测试是好的。我使用Litmus测试一个数量的设备。您也应该如此。
发送出去
你邮件已经准备好了!可以发送出去了。
Ink文档
我想大家最为关心的是如何使用Ink来创建"EDM模板"。接下来,根据Ink文档简单的介绍如何使用Ink如何深入创建您的响应式电子邮件。
开始
Boilerplate
开始一个新的Ink项目是非常简单的。如果您没有使用我们的模板,使用Boilerplate代码做为使用的起点。虽然你可以使用<link>标签链接ink.css文件测试,通过inliner运行你的邮件之前,你需要先删除<link rel="stylesheet" href="ink.css",并把ink.css文件中的样式代码粘贴到<style>标签内。
Boilerplate.html
如果你要给整个邮件设置一个背景色,一定要给表格添加一个body类名,就像是实际的<body>标签一样,因为很多客户端默认情况下会删除这个标签。
行内样式
CSS
网格
快速、简单创建适合多设备的强大布局。
结构
Ink在580px容器上使用12列网格。在移动设备上(580px宽度下),列变成全屏宽度并垂直排列。
Ink的网格有三个组件组成:
容器(container)
Ink容器包裹了内容和保持一个固定的宽度,在大显示器上使用的是580px布局。低于580px,容器占用了屏幕95%的宽度,确认你的内容不挨着用户设备屏幕的边缘。
行(row)
行主要用于内容垂直排列的单独块。除了垂直分离外,.row表格设置了.wrapper的<td>可以用来设置列之间的间距。注意:一行中最后一个td.wrapper必须加上类名.last。哪怕整行只有一个td.wrapper也得加上(例如,一行一个12列宽度的内容区域)。
列(column)
基于12列网格系统,列表示内容宽度。假如一行中的列数加起来等于12,里面的内容会扩展到n列。
网格的三个组
网格三个主件创建的基本例子。
网格的视觉说明
下图是基本网格布局。而Ink是个很棒的例子(使用正确的媒体查询),额外的着色,使用间距更加清晰。
分类
网格系统中的主要元素,以及它们如何使用:
元素类型
类名
描述
table
container
在大屏幕中限制内容在580px的容器中(小屏幕为整个屏幕的95%)和在body中水平居中。
table
row
分离每一行的内容。
td
wrapper
.wrapper表格使用table.columns实现列与列之间的间距,并且在小屏幕上迫使宽度为全屏。
td
last
给每行中最后一个td.wrapper添加类名.last,让间距能正常工作。如果一行中只有一个table.columns(也就是td.wrapper只有一个),那么在td.wrapper上也需要添加类名td.last
table
{number}
可以是1到12之间的任何数。用于确定table.columns列宽,列的数量在每一行之和等于12,包括offset columns。
table
columns
在宽屏的时候,指table.container容器580px的n/12(其中n是指1-12之间的任意数);小屏的时候,宽度扩展到table.container的整体宽度(屏幕的95%)。
td
expander
放在table.columns中的一个宽元素,他迫使td内容在小屏幕上扩展到全屏,而不是td上内容的宽度。
示例
偶数列
Ink的12列网格是创建偶数列布局的前提。一列.twelve.columns,两列.six.columns,三列.four.columns或四列.three.columns类名来创建你的布局。在宽屏的时候使用多类名,而在小屏(移动端)使用单个类名。
偶数列布局代码
效果
内容居中
列的内容居中,可以使用一个类名center给包含内容的<td>。如果你想让图片居中,你需要给图片自身添加类名center。在大多数客户端,你希望内容居中,我们可以使用<center>标记包含所要居中的内容。
居中模板
效果
扩展器(Expanders)
当Ink网格在小屏幕上显示时,table.columns中的td.expander可以扩展整个宽度全屏显示,并且垂直排列。但在一些客户端,列的宽度不需要扩展到与屏幕一样的宽。虽然这可能不是很糟糕,但是会损坏你的布局,特别是table.columns设置了背景色和内容居中的时候。
为了解决这个问题,使用一个空的td标签放在table.columns表格中包含实际内容<td>后面。这个额外的<td>不会显示,但它迫使内容<td>扩大到全屏。
td扩展器
兼容性
跟预期想的一样,网格在大多数主要的电子邮件客户端,除Gmail(Mobile,iOS,Android)之外可以工作。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✘
因为Gmail不支持媒体查询,用户将看到Desktop版本效果。如果移动版本的Gmail占有较大的份额,我们建议使用一个基于block-grid的网格布局。
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
请确认使用<center>标签实现与类名.center等同效果,让内容居中。
子网格
一个更多才多艺非叠加网格布局。
网格中的网格
Ink中网格不能像Foundation网格那样嵌套。当一个网格不够用的时候,Ink提供了一个嵌套的子网格。通过类名.sub-columns添加到table.columns下的<td>标签中。
同样在.columns的<table>下中最后一个.sub-columns的<td>中也要加上类名.last用来控制适应的间距。
基本子网格示例
效果
兼容性
子网格在主流的电子邮件客户端都可以运行。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✔
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
块网格
不使用媒体查询,元素实际宽度的网格。
描述
有些情况之下,无论Ink的网格和子网格是否合适,块网格通常都是非常有用的。不使用媒体查询,块网格元素自动左对齐,在小屏幕下时,放不下会推到下一行单独放置。
模板
块网格表示的是<table>元素应用了block-grid类名,并且为了描述每一行有多少网格元素,连同设置类似于number-up这样的类名(如,.two-up,.three-up等等)。需要特别注意的是,确保<td>之间没有任何的空各或换行符号,因为有一些客户端会呈现空白,作为元素之间的间距。
块网格基本模板
效果
示例
Gmail中的多列布局
一个主要的块网格示例,不依靠媒体查询,在Gmail中创建多列布局。最简单的方式就是在你的块网格元素上添加一个.two-up类名。增加一个渐进增强效果,添加一个媒体查询,当用户在移动端下阅读,让列宽占据整个屏幕宽度。
Gmail两列布局
块网格的渐进增强(可选)
兼容性
块网格在大多数主要的电子邮件客户端都可以运行。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
确保<td>之间没有任何空白符和断行行,否则Thunderbird下会块网格元素之间会添加一个间距。
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✔
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
可视类
在不同屏幕大小中有选择性的显示内容。
通过给一个元素添加一个能见度的类,您可以根据屏幕大小来显示或隐藏这个元素。能见度类可以用于任何元素。
注意,如果你使用一个能见度的类在图像上,一定要将它应用到图像的父元素上,而不是图像自身上。
使用可视类
可视的内容
分类
有效的可视类:
兼容性
可视类目前除了不支持Gmail之外,其他大多数的主要电子邮件客户端都支持。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✘
目前不支持,将可能会支持。
Gmail(Mobile,iOS,Android)
✘
目前不支持,将可能会支持。
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
面板(panels)
快速突出重要内容。
给table.columns中的<td>标签添加类名panel,可以给元素添加默认的边框和背景色。
面板示例
效果
兼容性
在大多数主要的电子邮件客户端都可以运行。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✔
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
按钮
结构
在大多数客户端创建一个好看的按钮,我们可以给一个<a>标签添加一个button类名,并且在这个标签中添加一个表格。默认情况下,按钮会扩大到容器的整个宽度,所以,如果你不想让他们扩大,考虑在里面使用sub-grid或block-grid元素。
一个基本按钮
样式类名
几个用于样式的类可以运用到任何.button元素上,用来调整按钮的外观。
尺寸
尺寸的类是用来影响按钮垂直的padding。可用的尺寸类有:
.button(.small-button一样)
.tiny-button
.small-button
.medium-button
.large-button
颜色
颜色类表示目的的按钮,是用来改变背景色。可用的颜色类:
无(.primary一样)
.primary
.secondary
.alert
.success
圆角
让支持border-radius属性的客户端显示有圆角的按钮:
无(没有圆角)
radius
round
案例
按钮的默认宽度是和容器宽度一样,所以建议您包含在一个或一个相对较小的子网格中。
按钮示例
所有按钮修饰过。前两行按钮放在.four.columns网格中,后两行按钮放在.six.columns网格中。
兼容性
按钮在大多数主要的电子邮件客户端都可以工作,但没有:hover效果。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✔
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
Retian图像
电子邮件中包含丰富的,高分辨率的图像。
模板
这些天我们一直在选择支持Outlook或视网膜设备,才刚结束。使用高分辨率图像,然后在<img>标签上指定width和height,对应的是桌面版视图的尺寸(.columns容器宽度).在小的屏幕设备上,Ink会让图像扩大到全屏宽度。
图像模板
列的尺寸
下面是一个图像与网格对应的尺寸。高度和宽度应该在<img>标签中显示设置
First Header
Second Header
1
30
2
80
3
130
4
180
5
230
6
280
7
330
8
380
9
430
10
480
11
530
12
580
示例
一个常见的电子邮件模式是一个图像在左边,然后描述内容在图像旁边。我们在电子邮件中经常使用这种布局。我们来看一个示例:
效果
兼容性
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✔
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
使用Ink发送响应邮件
Ink是一个开源的框架,而且将会成为一个最佳的社区发展它。我们的响应式邮件框架将给你一个非常强大的测试基地,并且能兼容主要的客户端和平台。
Inliner
使用Inliner在EDM模板中生成行内样式。
打开在线的Inliner,将你的邮件内容放在这里,包括你的样式,链接必须是绝对路径。
为什么要使用行内样式?
在很多受欢迎的电子邮件客户端,如Gmail会将<style>标记中的CSS删除
这是最好的方法来保证你的邮件能兼容客户端正常工作
Email模板
每一个模板文件是一个单独的HTML文件,他们都是使用Ink创建的Email模板。你可以预览,查看代码,看看他们是怎么实现的,或者下载他们,并且尝试做一些改变。每个模板在文件的<header>标签内容都添加了ink.css。
你可以看到每个模板的截图,在不同的电子邮件客户端都通过测试。请注意,如果你要发送或测试他们,你首先需要使用Ink Inliner转换。
参考资料
Introducing Ink: Our New Responsive Email Framework
Ink官网
GitHub
Ink模板
结论
Ink是一款优秀的"EDM"模板框架,能帮大家快速***出优秀的EDM。虽然Ink还存在很多不足之处,但随着社区的成长与加入的成员一起努力。Ink将会越来越强大。随后,我们将以Ink的框架为大家来点实例,通过实践来深入理解Ink。
如果大家对***“EDM模板”有自己独特的见解,希望能在下面的评论中与我们一起分享。
-
从字面上来说,EDM似乎和前端人员没有太大的关系,可要是说起"EDM模板",我想很多前端人员都知道,同时也很烦感***这样的页面,原因大家都懂的。
"EDM模板"都是使用表格来***,并且都是通过行内样式来控制页面的渲染风格,致使很多效果在"EDM模板"中有限制,而且在***时有很多限制条件,同时还要兼容众多版本的客户端邮件系统。不比处理IE兼容简单。
通过以前那些***"EDM模板"的技术***出来的“EDM”页面无法满足目前客户所需的要求,比如说在移动智能设备上的访问,效果会严重影响用户的阅读。这两天看到Zurb公司推出的一款“EDM模板”***的框架——Ink,觉得很有意思,特意学习了一下,现根据Ink官网文档与大家一起探讨Ink如何***“EDM模板”。
介绍
随着移动智能设备市场份额的增加,超过40%的邮件都在移动设备上打开,确保在任何设备上浏览邮件正常是势在必行的。最近在实际的工个时也时常碰到产品经理提来的需求,需要“EDM”在移动设备上能显示正常。促使我们不得不考虑这个新需求,我们也在一直寻找适合的解决方案。幸运的是,新的解决文案来了——Ink,一个全新的***响应式EDM模板的框架。
Ink是由Zurb团队开发的一款快速创建响应式的HTML邮件模板(EDM模板)的框架。使用Ink框架创建的"EDM模板"可以在任何设备和客户端上运行,包括Outlook。
我们将学到什么
学习Ink框架,我们将获得什么?
灵活性是关键
Ink是一个框架,而不是一个模板。实现向应式电子邮件,模板是最受欢迎的方法,但他们不是非常灵活,具有很多局限性。我们不希望有这些约束。我们需要灵活性和用一个框架来提供这些。Ink使用了最具可分性的12列网格——你可以将网格划分成一列、两列、三列或四列。原本考虑使用一个四列的网格,但发现它阻碍了我们的灵活性。给人们更多的灵活性,包括设计师经常使用到的UI元素、按钮和面板。但他们是完全可以根据适合的设计需求进行任何的定制。
Ink不仅是一个框架。这是一个过程,开发者采取了一致性的约定,用于创建电子邮件。
Outlook仍然很重要
Outhlook仍占有很大的市场份额。从技术上讲,Outlook是最具限制的电子邮件客户端——例如,他不支持max-width:100%。所以在设计的早期,我们就得考虑这些难题。设计首先要考虑Outlook下通过Media Queries来增强用户在移动端的体验。Ink充先你使用固定宽度,而不是流体布局来支持Outlook。
Media Queries是未来趋势
我们使用最好的方法来支持移动端的Gmail。尽管媒体查询方法是首选,我们最终提供一个非媒体查询解决文案,例如block-grid,即块网格。这样就很头痛,所以我们建立了我们自己的行内样式,用来更好的兼容Gmail。
***过程
可以通过以下五个步骤让你的邮件看起来非常的完美。
在Outlook中测试
Outlook是最大的电子邮件客户端,以及图片不能自动适应大小。在继续之前先确定邮件是好的。
<body class="outlook"> <table class="body" style="background:#f0f1eb;"> <tr> <td>....
添加响应式样式
加入你想要的响应式样式,这些样式通过<style>标记放在文档的<head>中:
<style type="text/css"> #outlook a { padding:0; ...
附上你的行内样式
一旦你的电子在Outlook中看上去没有问题和载入了响应式样式,你可以附上行内样式,这样你可以实现各种各样的服务。
我们建议使用Inky的Inliner去做这样的事情。
测试你的邮件
先不要把邮件发送出去。确保你在尽可能多的平台上测试是好的。我使用Litmus测试一个数量的设备。您也应该如此。
发送出去
你邮件已经准备好了!可以发送出去了。
Ink文档
我想大家最为关心的是如何使用Ink来创建"EDM模板"。接下来,根据Ink文档简单的介绍如何使用Ink如何深入创建您的响应式电子邮件。
开始
Boilerplate
开始一个新的Ink项目是非常简单的。如果您没有使用我们的模板,使用Boilerplate代码做为使用的起点。虽然你可以使用<link>标签链接ink.css文件测试,通过inliner运行你的邮件之前,你需要先删除<link rel="stylesheet" href="ink.css",并把ink.css文件中的样式代码粘贴到<style>标签内。
Boilerplate.html
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width"/> <link rel="stylesheet" href="ink.css"> <!-- 仅用来测试 --> <style type="text/css"> /* 在项目中Ink样式放在这 */ </style> <style type="text/css"> /* 你自定义的样式放在这 */ </style> </head> <body> <table class="body"> <tr> <td class="center" align="center" valign="top"> <center> <!-- 邮件内容 --> </center> </td> </tr> </table> </body> </html>
如果你要给整个邮件设置一个背景色,一定要给表格添加一个body类名,就像是实际的<body>标签一样,因为很多客户端默认情况下会删除这个标签。
行内样式
<html> ... <body style="background:#ddd"> <table class="body" style="background:#ddd"> <!-- Background goes here too --> ... </table> </body>
CSS
body, .body { background: #ddd; }
网格
快速、简单创建适合多设备的强大布局。
结构
Ink在580px容器上使用12列网格。在移动设备上(580px宽度下),列变成全屏宽度并垂直排列。
Ink的网格有三个组件组成:
容器(container)
Ink容器包裹了内容和保持一个固定的宽度,在大显示器上使用的是580px布局。低于580px,容器占用了屏幕95%的宽度,确认你的内容不挨着用户设备屏幕的边缘。
行(row)
行主要用于内容垂直排列的单独块。除了垂直分离外,.row表格设置了.wrapper的<td>可以用来设置列之间的间距。注意:一行中最后一个td.wrapper必须加上类名.last。哪怕整行只有一个td.wrapper也得加上(例如,一行一个12列宽度的内容区域)。
列(column)
基于12列网格系统,列表示内容宽度。假如一行中的列数加起来等于12,里面的内容会扩展到n列。
网格的三个组
网格三个主件创建的基本例子。
<table class="container"> <tr> <td> <table class="row"> <tr> <td class="wrapper"> <table class="eight columns"> <tr> <td> Eight Columns </td> <td class="expander"></td> </tr> </table> </td> <td class="wrapper last"> <table class="four columns"> <tr> <td> Four Columns </td> <td class="expander"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table>
网格的视觉说明
下图是基本网格布局。而Ink是个很棒的例子(使用正确的媒体查询),额外的着色,使用间距更加清晰。
分类
网格系统中的主要元素,以及它们如何使用:
元素类型
类名
描述
table
container
在大屏幕中限制内容在580px的容器中(小屏幕为整个屏幕的95%)和在body中水平居中。
table
row
分离每一行的内容。
td
wrapper
.wrapper表格使用table.columns实现列与列之间的间距,并且在小屏幕上迫使宽度为全屏。
td
last
给每行中最后一个td.wrapper添加类名.last,让间距能正常工作。如果一行中只有一个table.columns(也就是td.wrapper只有一个),那么在td.wrapper上也需要添加类名td.last
table
{number}
可以是1到12之间的任何数。用于确定table.columns列宽,列的数量在每一行之和等于12,包括offset columns。
table
columns
在宽屏的时候,指table.container容器580px的n/12(其中n是指1-12之间的任意数);小屏的时候,宽度扩展到table.container的整体宽度(屏幕的95%)。
td
expander
放在table.columns中的一个宽元素,他迫使td内容在小屏幕上扩展到全屏,而不是td上内容的宽度。
示例
偶数列
Ink的12列网格是创建偶数列布局的前提。一列.twelve.columns,两列.six.columns,三列.four.columns或四列.three.columns类名来创建你的布局。在宽屏的时候使用多类名,而在小屏(移动端)使用单个类名。
偶数列布局代码
<table class="container"> <tr> <td> <table class="row"> <tr> <td class="wrapper last"> <table class="twelve columns"> <tr> <td class="panel"> twelve.columns </td> <td class="expander"></td> </tr> </table> </td> </tr> </table> <table class="row"> <tr> <td class="wrapper"> <table class="six columns"> <tr> <td class="panel"> .six.columns </td> <td class="expander"></td> </tr> </table> </td> <td class="wrapper last"> <table class="six columns"> <tr> <td class="panel"> .six.columns </td> <td class="expander"></td> </tr> </table> </td> </tr> </table> ... </td> </tr> </table>
效果
内容居中
列的内容居中,可以使用一个类名center给包含内容的<td>。如果你想让图片居中,你需要给图片自身添加类名center。在大多数客户端,你希望内容居中,我们可以使用<center>标记包含所要居中的内容。
居中模板
<table class="row"> <tr> <td class="wrapper"> <table class="six columns"> <tr> <td class="center panel"> <center> Centered content </center> </td> <td class="expander"></td> </tr> </table> </td> <td class="wrapper last"> <table class="six columns"> <tr> <td class="center panel"> <center> <!-- Centered image --> <img class="center" src="http://placehold.it/125x125&text=Centered%20Image"> </center> </td> <td class="expander"></td> </tr> </table> </td> </tr> </table>
效果
扩展器(Expanders)
当Ink网格在小屏幕上显示时,table.columns中的td.expander可以扩展整个宽度全屏显示,并且垂直排列。但在一些客户端,列的宽度不需要扩展到与屏幕一样的宽。虽然这可能不是很糟糕,但是会损坏你的布局,特别是table.columns设置了背景色和内容居中的时候。
为了解决这个问题,使用一个空的td标签放在table.columns表格中包含实际内容<td>后面。这个额外的<td>不会显示,但它迫使内容<td>扩大到全屏。
td扩展器
<table class="twelve columns"> <tr> <td> <!-- Content not large enough to "prop" the container open all the way --> </td> <td class="expander"></td> <!-- Used to fix columns on small screens --> </tr> </table>
兼容性
跟预期想的一样,网格在大多数主要的电子邮件客户端,除Gmail(Mobile,iOS,Android)之外可以工作。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✘
因为Gmail不支持媒体查询,用户将看到Desktop版本效果。如果移动版本的Gmail占有较大的份额,我们建议使用一个基于block-grid的网格布局。
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
请确认使用<center>标签实现与类名.center等同效果,让内容居中。
子网格
一个更多才多艺非叠加网格布局。
网格中的网格
Ink中网格不能像Foundation网格那样嵌套。当一个网格不够用的时候,Ink提供了一个嵌套的子网格。通过类名.sub-columns添加到table.columns下的<td>标签中。
同样在.columns的<table>下中最后一个.sub-columns的<td>中也要加上类名.last用来控制适应的间距。
基本子网格示例
<table class="row"> <tr> <td class="wrapper"> <table class="eight columns"> <tr> <td class="eight sub-columns"> .eight.sub-columns </td> <td class="four sub-columns last"> .four.sub-columns </td> <td class="expander"></td> </tr> </table> </td> <td class="wrapper last"> <table class="four columns"> <tr> <td> .four columns </td> <td class="expander"></td> </tr> </table> </td> </tr> </table>
效果
兼容性
子网格在主流的电子邮件客户端都可以运行。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✔
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
块网格
不使用媒体查询,元素实际宽度的网格。
描述
有些情况之下,无论Ink的网格和子网格是否合适,块网格通常都是非常有用的。不使用媒体查询,块网格元素自动左对齐,在小屏幕下时,放不下会推到下一行单独放置。
模板
块网格表示的是<table>元素应用了block-grid类名,并且为了描述每一行有多少网格元素,连同设置类似于number-up这样的类名(如,.two-up,.three-up等等)。需要特别注意的是,确保<td>之间没有任何的空各或换行符号,因为有一些客户端会呈现空白,作为元素之间的间距。
块网格基本模板
<table class="container"> <tr> <td> <table class="block-grid two-up"> <tr> <td> Column #1 </td><td> <!-- Make sure the tags are directly next to each other --> Column #2 </td> </tr> </table> </td> </tr> </table>
效果
示例
Gmail中的多列布局
一个主要的块网格示例,不依靠媒体查询,在Gmail中创建多列布局。最简单的方式就是在你的块网格元素上添加一个.two-up类名。增加一个渐进增强效果,添加一个媒体查询,当用户在移动端下阅读,让列宽占据整个屏幕宽度。
Gmail两列布局
<table class="container"> <tr> <td> <table class="block-grid two-up"> <tr> <td> Main Content </td><td> Right Sidebar </td> </tr> </table> </td> </tr> </table>
块网格的渐进增强(可选)
@media only screen and (max-width: 600px) { table[class="container"] .block-grid td { width: 100% !important; } }
兼容性
块网格在大多数主要的电子邮件客户端都可以运行。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
确保<td>之间没有任何空白符和断行行,否则Thunderbird下会块网格元素之间会添加一个间距。
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✔
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
可视类
在不同屏幕大小中有选择性的显示内容。
通过给一个元素添加一个能见度的类,您可以根据屏幕大小来显示或隐藏这个元素。能见度类可以用于任何元素。
注意,如果你使用一个能见度的类在图像上,一定要将它应用到图像的父元素上,而不是图像自身上。
使用可视类
<table class="row"> <tr> <td class="wrapper last"> <table class="twelve columns show-for-small"> <tr> <td class="panel"> .show-for-small </td> <td class="expander"></td> </tr> </table> <table class="twelve columns hide-for-small"> <tr> <td class="panel"> .hide-for-small </td> <td class="expander"></td> </tr> </table> </td> </tr> </table>
可视的内容
分类
有效的可视类:
.hide-for-small .show-for-small
兼容性
可视类目前除了不支持Gmail之外,其他大多数的主要电子邮件客户端都支持。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✘
目前不支持,将可能会支持。
Gmail(Mobile,iOS,Android)
✘
目前不支持,将可能会支持。
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
面板(panels)
快速突出重要内容。
给table.columns中的<td>标签添加类名panel,可以给元素添加默认的边框和背景色。
面板示例
<table class="row"> <tr> <td class="wrapper"> <table class="eight columns"> <tr> <td> Main content </td> <td class="expander"></td> </tr> </table> </td> <td class="wrapper last"> <table class="four columns"> <tr> <td class="panel"> Panel content </td> <td class="expander"></td> </tr> </table> </td> </tr> </table>
效果
兼容性
在大多数主要的电子邮件客户端都可以运行。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✔
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
按钮
结构
在大多数客户端创建一个好看的按钮,我们可以给一个<a>标签添加一个button类名,并且在这个标签中添加一个表格。默认情况下,按钮会扩大到容器的整个宽度,所以,如果你不想让他们扩大,考虑在里面使用sub-grid或block-grid元素。
一个基本按钮
<a class="button" href="#"> <table> <tr> <td> Button Label </td> </tr> </table> </a>
样式类名
几个用于样式的类可以运用到任何.button元素上,用来调整按钮的外观。
尺寸
尺寸的类是用来影响按钮垂直的padding。可用的尺寸类有:
.button(.small-button一样)
.tiny-button
.small-button
.medium-button
.large-button
颜色
颜色类表示目的的按钮,是用来改变背景色。可用的颜色类:
无(.primary一样)
.primary
.secondary
.alert
.success
圆角
让支持border-radius属性的客户端显示有圆角的按钮:
无(没有圆角)
radius
round
案例
按钮的默认宽度是和容器宽度一样,所以建议您包含在一个或一个相对较小的子网格中。
按钮示例
所有按钮修饰过。前两行按钮放在.four.columns网格中,后两行按钮放在.six.columns网格中。
兼容性
按钮在大多数主要的电子邮件客户端都可以工作,但没有:hover效果。
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✔
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
Retian图像
电子邮件中包含丰富的,高分辨率的图像。
模板
这些天我们一直在选择支持Outlook或视网膜设备,才刚结束。使用高分辨率图像,然后在<img>标签上指定width和height,对应的是桌面版视图的尺寸(.columns容器宽度).在小的屏幕设备上,Ink会让图像扩大到全屏宽度。
图像模板
<table class="three columns"> <tr> <td> <img height="130" width="130" src="http://placehold.it/600x600&text=Retina"> </td> <td class="expander"></td> </tr> </table>
列的尺寸
下面是一个图像与网格对应的尺寸。高度和宽度应该在<img>标签中显示设置
First Header
Second Header
1
30
2
80
3
130
4
180
5
230
6
280
7
330
8
380
9
430
10
480
11
530
12
580
示例
一个常见的电子邮件模式是一个图像在左边,然后描述内容在图像旁边。我们在电子邮件中经常使用这种布局。我们来看一个示例:
<table class="row"> <tr> <td class="wrapper"> <table class="three columns"> <tr> <td> <img height="130" width="130" src="http://placehold.it/600x600&text=Retina%20Image"> </td> <td class="expander"></td> </tr> </table> </td> <td class="wrapper last"> <table class="nine columns"> <tr> <td> Text Content </td> <td class="expander"></td> </tr> </table> </td> </tr> </table>
效果
兼容性
客户端
支持性
描述
Apple Mail(Desktop)
✔
Apple Mail(iOS)
✔
Outlook(2000,2002,2003)
✔
Outlook(2007,2010,2013)
✔
Outlook(2011)
✔
Thunderbird
✔
Android
✔
Gmail(Desktop)
✔
Gmail(Mobile,iOS,Android)
✔
Outlook 2011 for Mac
✔
AOL Mail
✔
Hotmail
✔
Outlook.com
✔
使用Ink发送响应邮件
Ink是一个开源的框架,而且将会成为一个最佳的社区发展它。我们的响应式邮件框架将给你一个非常强大的测试基地,并且能兼容主要的客户端和平台。
Inliner
使用Inliner在EDM模板中生成行内样式。
打开在线的Inliner,将你的邮件内容放在这里,包括你的样式,链接必须是绝对路径。
为什么要使用行内样式?
在很多受欢迎的电子邮件客户端,如Gmail会将<style>标记中的CSS删除
这是最好的方法来保证你的邮件能兼容客户端正常工作
Email模板
每一个模板文件是一个单独的HTML文件,他们都是使用Ink创建的Email模板。你可以预览,查看代码,看看他们是怎么实现的,或者下载他们,并且尝试做一些改变。每个模板在文件的<header>标签内容都添加了ink.css。
你可以看到每个模板的截图,在不同的电子邮件客户端都通过测试。请注意,如果你要发送或测试他们,你首先需要使用Ink Inliner转换。
参考资料
Introducing Ink: Our New Responsive Email Framework
Ink官网
GitHub
Ink模板
结论
Ink是一款优秀的"EDM"模板框架,能帮大家快速***出优秀的EDM。虽然Ink还存在很多不足之处,但随着社区的成长与加入的成员一起努力。Ink将会越来越强大。随后,我们将以Ink的框架为大家来点实例,通过实践来深入理解Ink。
如果大家对***“EDM模板”有自己独特的见解,希望能在下面的评论中与我们一起分享。
-
相关文章推荐
- Ink – 帮助你快速创建响应式邮件(Email)的框架
- 快速创建精彩的Flash游戏之一:Flash游戏引擎及框架介绍
- MFC框架创建过程--一个颇为标准的模板
- 教你用响应式设计的H5网站模板,快速实现自适应
- Foundation框架 - 快速创建跨平台的网站页面原型
- easyui框架快速布局模板
- 【特别推荐】创建响应式页面框架开发的最佳JQUERY插件
- windows azure虚拟机创建――快速创建,库模板创建
- 如何快速创建模板目录
- 2016/5/6 thinkphp ①框架 ② 框架项目部署 ③MVC模式 ④控制器访问及路由解析 ⑤开发和生产模式 ⑥控制器和对应方法创建 ⑦视图模板文件创建 ⑧url地址大小写设置 ⑨空操作空控制器 ⑩项目分组
- Android Studio开发快速创建MVP框架插件AndroidMVP
- 创建子分区模板及使用subpartitions 方法快速添加子分区
- YII Framework框架教程之使用YIIC快速创建YII应用详解
- Symfony2框架创建项目与模板设置实例详解
- CI框架,用自定义类库快速前端模板
- Linux下使用Shell脚本快速创建项目目录模板
- 【原创】Zend Framework快速开发(一)zend框架的配置和项目创建(原创)
- 《HiWind企业快速开发框架实战》(3)使用HiWind创建和管理菜单
- MS CRM 2011 插件(plugin)的快速开发 -- 创建模板
- sublime3 快速创建html模板