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 文件

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>