最近有个机会,研究了一下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 3. GMail mobile webmail 4. Google Inbox Android/iOS app 5. Outlook Android/iOS app 6. Windows Phone 8 Mail(可以无视了……) 7. 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电子邮件应该知道的一些事 上面这篇的原文