再手写table做EDM你就out啦

2016-05-18 4 min

工作期间，有接触过产品线发的 EDM(Email Direct Marketing 电子邮件营销)，也就是大家经常说的“垃圾邮件”，可能发 EDM 的账户会进部分邮箱的黑名单，有时候我自己测试发的邮件可能要到垃圾箱找 >3<

不过 EDM 对于用户召回确实有非常显著的效果，偶尔来一发，也不失为一个重新激活目标用户的好办法。

不小心扯远了，由于邮件浏览器可能会过滤掉对外部的 CSS 或者 JS 文件的引用，加上对很多 css 特性不支持（邮件商的兼容性也是个坑），所以很多时候我们会把整个 psd 垂直分成几张图片，采用table + inline CSS + img 的方式去弄。

好处：

简单方便，直接切图，塞进 img 的 src 就好了，切图 + 拼 html 一般不超过半小时；缺点：
没有所谓的样式，只是个写满 style 属性的 table，很凌乱不便维护；
纯图片拼接，对于一些默认屏蔽图片的邮件商，会白屏；图片太大，可能会加载比较久；
不符合响应式设计，没法做 pc 和移动页面自适应

前几天，项目评审时说要发 EDM，我上网搜了下，偶然看到一篇文章，介绍 Inky，一个号称支持响应式设计、兼容各个 email client 的邮件模板编译工具。

玩了一下下，发现还真的不错！看了下他们的 change log，2013 年 11 月的初版，今年 3 月都发了 2.0 啦，我是有多 out，现在才知道，所以有了本文，希望更多不知道的小伙伴也可以 enjoy 这个方便的工具。

零、Inky 简介

Inky 的技术栈：-> 传送门

Gulp
Sass
Inlining
Panini
BrowserSync
Image Compression 它能为我们带来什么？下面是自带的组件列表：
The Grid：栅格化
Global Styles：核心的框架样式和 Sass 变量
Alignment Classes：对齐的 CSS 类（文本对齐和块元素对齐）
Buttons：一些默认样式、大小的 button
Menu：菜单
Spacer：通过传入高度，自动生成定高的空白块
Wrapper：邮件正文 100% 宽的自定义背景块
Typography：默认排版（样式）
Visibility Classes：可以根据需求，设定在不同尺寸设备下（pc/wap）是否可见

一、初始化步骤：

传送门：官方教程

I. 安装 fundation 命令行工具

sudo npm install --global foundation-cli

II. 初始化 email 开发环境

进入你的项目目录内，执行初始化命令，如执行 cd my-project 后再执行：

foundation new --framework emails

III. 本地运行&调试

执行完后，会自动打开浏览器窗口：

npm start

IV. 编译产出

当你在本地调得差不多之后，就可以产出压缩、样式 inline 的 html 文件啦

npm run build

二、看个 demo

下面看个 demo，你就知道 inky 有多棒，不需要再手写 table 和 inline css 啦！

container 是大容器
row 代表一行，满宽栅格是 12
small 代表小屏，large 代表大屏，可以分别设置在不同屏幕下的栅格比例，达到响应式设计

---

subject: My Email Subject

---

<container class="marine-container">

    <row class="info-area">

        <columns small="12" large="9">

            <div class="info">

                <h3>View...</h3>

                <p>bala bala...</p>

            </div>

        </columns>

        <columns small="12" large="3">

            <a href="xxx" class="btn-guide">Click<br/>For Guide</a>

        </columns>

    </row>

    <row>

        <columns small="12" large="12">

            <div class="person-area">

                <a href="">Search...</a><br/>

                <p>

                    Kate Carter<br/>

                    Y...<br/>

                    mobile: xxxx<br/>

                    ...

                </p>

            </div>

        </columns>

    </row>

    <row>

        <columns small="12" large="12">

            <div class="footer">

                <a href="">xxxx</a>

                <span>|</span>

                <a href="">xxxx</a>

                <!-- 省略一万字 -->

            </div>

        </columns>

    </row>

</container>

小伍的部落格

记录、分享、学习