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

发布于 大漠

EDM是"Email Direct Marketing"的缩写,即电子邮件营销,简称为邮件营销。是利用电子邮件与受众客户进行商业交流的一种直销方式。

从字面上来说,EDM似乎和前端人员没有太大的关系,可要是说起"EDM模板",我想很多前端人员都知道,同时也很烦感制作这样的页面,原因大家都懂的。

"EDM模板"都是使用表格来制作,并且都是通过行内样式来控制页面的渲染风格,致使很多效果在"EDM模板"中有限制,而且在制作时有很多限制条件,同时还要兼容众多版本的客户端邮件系统。不比处理IE兼容简单。

通过以前那些制作"EDM模板"的技术制作出来的“EDM”页面无法满足目前客户所需的要求,比如说在移动智能设备上的访问,效果会严重影响用户的阅读。这两天看到Zurb公司推出的一款“EDM模板”制作的框架——Ink,觉得很有意思,特意学习了一下,现根据Ink官网文档与大家一起探讨Ink如何制作“EDM模板”。

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-gridblock-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>标签上指定widthheight,对应的是桌面版视图的尺寸(.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,将你的邮件内容放在这里,包括你的样式,链接必须是绝对路径。

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

为什么要使用行内样式?

  • 在很多受欢迎的电子邮件客户端,如Gmail会将<style>标记中的CSS删除
  • 这是最好的方法来保证你的邮件能兼容客户端正常工作

Email模板

每一个模板文件是一个单独的HTML文件,他们都是使用Ink创建的Email模板。你可以预览,查看代码,看看他们是怎么实现的,或者下载他们,并且尝试做一些改变。每个模板在文件的<header>标签内容都添加了ink.css

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

你可以看到每个模板的截图,在不同的电子邮件客户端都通过测试。请注意,如果你要发送或测试他们,你首先需要使用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