Ink框架快速创建响应式EDM模板

发布于大漠

11 年前

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是最大的电子邮件客户端，以及图片不能自动适应大小。在继续之前先确定邮件是好的。

<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是个很棒的例子（使用正确的媒体查询），额外的着色，使用间距更加清晰。

Ink框架快速创建响应EDM模板

分类

网格系统中的主要元素，以及它们如何使用：

元素类型	类名	描述
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>

效果

Ink框架快速创建响应EDM模板

内容居中

列的内容居中，可以使用一个类名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>

效果

Ink框架快速创建响应EDM模板

扩展器(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>

效果

Ink框架快速创建响应EDM模板

兼容性

子网格在主流的电子邮件客户端都可以运行。

客户端	支持性	描述
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>

效果

Ink框架快速创建响应EDM模板

示例

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>

可视的内容

Ink框架快速创建响应EDM模板

分类

有效的可视类：

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

效果

Ink框架快速创建响应EDM模板

兼容性

在大多数主要的电子邮件客户端都可以运行。

客户端	支持性	描述
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网格中。

Ink框架快速创建响应EDM模板

兼容性

按钮在大多数主要的电子邮件客户端都可以工作，但没有: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>

效果

Ink框架快速创建响应EDM模板

兼容性

客户端	支持性	描述
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转换。

参考资料

结论

Ink是一款优秀的"EDM"模板框架，能帮大家快速制作出优秀的EDM。虽然Ink还存在很多不足之处，但随着社区的成长与加入的成员一起努力。Ink将会越来越强大。随后，我们将以Ink的框架为大家来点实例，通过实践来深入理解Ink。

如果大家对制作“EDM模板”有自己独特的见解，希望能在下面的评论中与我们一起分享。

如需转载，烦请注明出处：https://www.fedev.cn/css/introducing-ink-our-new-responsive-email.html

Nike Benassi Slide