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

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

于是坑就来了……

一、html5？别想太多了

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

首先是__桌面客户端__：

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

还有__网页客户端__：

  1. Gmail/G Suite/Inbox
  2. Outlook.com
  3. Yahoo!Mail
  4. AOL Mail

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

  1. Android Mail
  2. BlackBerry
  3. GMail Android/iOS app
  4. GMail mobile webmail
  5. Google Inbox Android/iOS app
  6. Outlook Android/iOS app
  7. Windows Phone 8 Mail(可以无视了……)
  8. 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属性可用才是最要命的。 这里提供一个查询页面，可以看看不同的属性在不同平台的支持情况。

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

  1. flex：基本不可用。
  2. transition：基本不可用。
  3. transforms：基本不可用。
  4. animations：Android和iOS邮箱支持，其他平台和Gmail邮箱不支持。
  5. list-style：除了list-style-image，其他基本都支持。
  6. cursor：不可用。
  7. left,right等：G家，雅虎不可用。
  8. z-index：G家不可用。
  9. background-attachment：基本不可用
  10. background-image：Windows 10 Mail，Windows Live Mail，Yahoo! Android app不可用
  11. webfont：G家，Windows Mail，Yahoo! 邮箱不可用。
  12. @media查询：Windows 10 Mail，Outlook.com不可用。
  13. 选择器：Gmail Android app IMAP，Gmail mobile webmail不可用（很奇怪……）
  14. <link>：基本不可用。
  15. <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>

这两个都是不错的框架选择： Emailframe EmailBoilerplate

七、有用的工具

内部测试： Premailer

我在测试邮件的时候，使用Safari的分享页面功能，将EDM发给自己。

邮件测试： Email on Acid 7天免费，$44一月 Litmus 7天免费，$79一月

页面检查： Markup Validation Service

html转内联样式： https://templates.mailchimp.com/resources/inline-css/ https://inlinestyler.torchbox.com/

邮件发送： Mailchimp 2000订阅以下免费 Campaign Monitor 最低$9一月

八、参考文章

在研究过程中，主要参考了以下几篇文章，十分感谢。

EDM制作要点

HTML电子邮件应该知道的一些事 上面这篇的原文