EDM邮件营销，你需要知道

kok的笔记本

macOS 里神秘的 kernel_task ，为什么一直在写入硬盘？产品 node_modules 为什么总是这么大：一次从原理到实践的瘦身记录谁来救救我的Mac存储空间-清理工具横评：付费vs免费，从界面到命令行 2023 读书推荐写给播客嘉宾的录制说明书在 Electron 中使用 Vue Devtools 几何原本中勾股定理的证明 Mac 安装软件时提示已损坏，无法打开应该怎么办 PegBoard 你的数字白板少数派读者与作者的 NewsLetter 闲棋冷子-2-2021年我读过哪些很棒的书闲棋冷子-1-相信你的身体，它不会骗你修复 macOS 中 Cisco Anyconnect 报的奇怪Bug 我的 NAS 使用记录 Omniplan 入门教程 Hugo升级0.74记录一年级产品经理需要掌握什么知识？无籍之谈-3-和盖盖聊聊尼尔·盖曼与中外科幻露营笔记-装备篇无籍之谈-2-和鹏仔聊华尔街兴盛史，给小白投资者的一些建议介绍一下《无籍之谈》无籍之谈-1-和不土聊佛学，谈谈《一心走路》《僧侣与哲学家》高达模型入门 - 工具整理 5 分钟了解 Sketch 的新特性 Tint - 色调 Hugo 主题移动端开发的一些心得修复 macbook 键盘连击问题在 Hugo 中使用 Open Graph 提升分享效果选小米10 还是小米10 Pro？利用 Python 批量合并 Excel 文件为什么家国梦不好玩？高雄85大楼 Mac优秀软件推荐-Itsycal 找到并和正确使用无版权资源 Excel 常用函数一无线吸尘器挑选指南钢铁、蒸汽与 19 世纪聊聊《铁道之旅》如何挑选一个电脑电源？有用的正则表达式给psd瘦身 2019第二季度读书总结组装 ITX 黑苹果主机 Intel CPU 挑选指南常用的 Markdown 工具 2019第一季度读书总结怎么用尺规作图画75°角？在 Hugo 中使用 Sass 真正的换位思考-《爱的沟通》读书笔记 Hugo 中使用思维导图反叛公司中的治理者和顾问玩法如何搭配成为一个盐系男生？反叛公司 Rebel Inc. 入门指南如何评估需求，预估开发成本？小米8、小米8SE、小米8青春版参数对比微信外部链接内容管理规范分析在售 iPhone 参数对比给Hugo blog中增加一些插件微信 MacOS 多开的一些实践矩阵与线性变换的概念理解尺规作图小习题用 hugo 和 netlify 搭建blog 介绍我自己瓜摊老板 Really? 果子沟大桥喀赞其的马车清晨的木梨硡 hexo 主题开发青龙寺的狮子用一个特殊方法解决同位词问题语义化 html 标签数模的基本思路和写作攻略 hexo blog 搭建 0.1，0.1^0.1，为什么数值是波动的？智能手机之旅老师和学生的博弈这些使用抗生素的方式，你做的对吗？炼金术与钢之炼金术师 kok的笔记本 kok的笔记本中国长征运载火箭家族-PegBoard

EDM邮件营销，你需要知道

kokdemo · 2018-02-13 · via kok的笔记本

最近有个机会，研究了一下EDM，也就是Email Direct Marketing。

这是一项有着很久历史的营销方式了，主要的展现形式是在邮件中插入html页面。

于是坑就来了……

一、html5？别想太多了

作为一个20年前的技术，到如今最大的问题是兼容性。

首先是__桌面客户端__：

Apple Mail
Thunderbird
Outlook（Outlook自己的不同版本之间的兼容性也是不一样的……）
Windows Live Mail

还有__网页客户端__：

Gmail/G Suite/Inbox
Outlook.com
Yahoo!Mail
AOL Mail

当然还有各种__移动端客户端__：

Android Mail
BlackBerry
GMail Android/iOS app
GMail mobile webmail
Google Inbox Android/iOS app
Outlook Android/iOS app
Windows Phone 8 Mail(可以无视了……)
Yahoo! Android/iOS app

是不是感觉要疯了，我就想知道为什么邮件标准这块为什么碎片化这么严重。

为了安全，你的页面头部应该是这样的：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

基本上可以认为html这10年发展的一切技术都可以扔到一边了。

二、table布局

table布局是EDM中__唯一__可以使用的布局方式，所有的内容都需要写在tr和td标签中。

当然，宽度、边框、背景色的控制也要写到table的属性中。

table单列布局是这样的：

    <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
        <tr>
            <td align="center" valign="top">
                <你的内容>         
            </td>
        </tr>
    </table>

多列布局呢？

    <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
        <tr>
            <td width="50%" align="center" valign="top" style="padding:10px;">
                <列1>
            </td>
            <td width="50%" align="center" valign="top" style="padding:10px;">
                <列2>
            </td>
        </tr>
    </table>

布局部分也就只能做到这样了，想象中的弹性布局，流式布局基本都用不了。

布局部分限制的另外一个原因是宽度，EDM因为历史原因，展示设备的原因，可用宽度很窄。

所以宽度通常设置为640px。

三、CSS的梦魇

相比于只能用十几年前的table布局来说，不知道哪个CSS属性可用才是最要命的。这里提供一个查询页面，可以看看不同的属性在不同平台的支持情况。

我总结一下坑比较大的几个情况：

flex：基本不可用。
transition：基本不可用。
transforms：基本不可用。
animations：Android和iOS邮箱支持，其他平台和Gmail邮箱不支持。
list-style：除了list-style-image，其他基本都支持。
cursor：不可用。
left,right等：G家，雅虎不可用。
z-index：G家不可用。
background-attachment：基本不可用
background-image：Windows 10 Mail，Windows Live Mail，Yahoo! Android app不可用
webfont：G家，Windows Mail，Yahoo! 邮箱不可用。
@media查询：Windows 10 Mail，Outlook.com不可用。
选择器：Gmail Android app IMAP，Gmail mobile webmail不可用（很奇怪……）
<link>：基本不可用。
<style>：桌面端都支持写在head中，写在body中兼容性比较差。

考虑到上面的__第16条__中的情况，建议大家将css写成内联属性。

对于能使用属性的就尽量不要写CSS，以下这些属性都建议都写上，以避免不同客户端中产生的兼容性问题：

table:
- bgcolor
- align
- width
- cellpadding
- cellspacing
- border
td:
- align
- valign
- bgcolor
- height
- width
img:
- width
- height
- alt

颜色不要简写成三位。一些`pading`和`margin`的简写也需要分开。

四、常见的元素

下面提供了一些常见的元素，建议直接复制到你需要写的页面中。

空行：请注意td标签中还写了一个空格进去。

    <tr>
        <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
    </tr>

链接：

    <a href="#" target="_blank" style="color:#66cccc; text-decoration:underline;">Link</a>

按钮：

    <table width="200" height="44" cellpadding="0" cellspacing="0" border="0" bgcolor="#2b3a63" style="border-radius:4px;">
        <tr>
            <td align="center" valign="middle" height="44" style="font-family: Arial, sans-serif; font-size:14px; font-weight:bold;">
    	        <a href="#" target="_blank" style="font-family: Arial, sans-serif; color:#ffffff; display: inline-block; text-decoration: none; line-height:44px; width:200px; font-weight:bold;">Button</a>
            </td>
        </tr>
    </table>

图片：一定要写好宽和高度，不然会出现各种神奇的事情。

    <img src="" width="" height="" style="margin:0; padding:0; border:none; display:block;" border="0" alt="" />

五、避免成为垃圾邮件

控制图文比例，尽量不要做那种图特别多的页面，以免影响邮箱加载。图片本身也需要压缩好。
标题和内容中不要出现一些特殊关键词，比如发票，免费，促销，交友，支付等，还有要避免一些敏感词，你懂的。
图片地址，链接用尽量短的url。
尽量不要包括附件和js代码。
标题不要全部大写（对英文来说），连续好几个感叹号等。

六、靠谱的邮件模板

这里直接贴上 emailframe 推荐的框架：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">

            <title></title>

            <style type="text/css">
            </style>    
        </head>
        <body style="margin:0; padding:0; background-color:#F2F2F2;">
            <center>
                <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
                    <tr>
                        <td align="center" valign="top">
                            <这里填写基本的table块>    
                        </td>
                    </tr>
                </table>
            </center>
        </body>
    </html>