关于EDM邮件我们依然要踩的坑

作者: SeasonDe | 来源:发表于2017-08-13 10:09 被阅读327次

本文基于工作使用学习，做的整理笔记
当我们要给用户推送EDM邮件的时候，我们发现邮件这里有很多坑，这里有好多限制，实现起来真的有点麻烦。很久之前在手机还不普及的时候，我们仅仅关注PC打开邮箱查看邮件的效果。
但是如今，我们同样可以在手机上完成这些操作，比如QQ内查看邮件，微信内，企业微信内，各种邮箱APP内。手机上都可以查看邮件，如果兼容不好，各个APP内查看的效果就有差异了，同时还受到手机尺寸、安卓苹果不同系统的影响。具体原因呢，又查不清，说不明，心好累。只能一步步测试。

前提条件：
本文就是简单的讨论在写EDM邮件时候遇到的坑，大概会写静态页面的都可以了解下。

编码环境：
系统：OS X EI Capitan
版本：10.12.5

Email Direct Marketing.jpg

目录
| - 1.分析观察
| - 2.编码细节
| - 3.常见问题
| - 4.结束

1.分析观察

最近，我在其他工作穿插的情况下，差不多有2周的时间在写三个EDM的邮件模版。其中，多数时间都在测试、修改，以便兼容各种APP内查看邮件。当然过程中也不断的优化代码。N次(>=50)的测试后，我发现凭借我过往做网站、后台系统写页面的经验，似乎不太够用，这方面经验的不足直接暴露无疑。怎么写，都还是会遇到EDM邮件在QQ、微信、企业微信、邮箱APP中预览显示的效果有问题，有些字体大小不受控。我指的这些问题是不太可以接受的那种，不是说其实可以管也可以不管，精益求精的那种。

编码暂时停下来，开始反思，该如何优化才能比较好的实现各种需求的EDM？

之后，我开始去浏览自己Gmail邮箱，去找各公司推送的EDM邮件，把他们的邮件内容html复制出来，粘贴在邮箱里（即：编辑邮件使用HTML方式）给自己的邮箱发送邮件。此时，我有以下3个邮箱可供使用：

qq邮箱，可以在QQ内预览邮件，QQ邮箱APP内预览邮件
infinite公司邮箱，可以在微信内预览邮件
fusio公司邮箱，可以在企业微信内预览邮件

这3个邮箱，分别绑定了某些APP，基本可以满足我的测试需要。

通过对比不同公司的EDM推送，先看一下对比结果：

EDM所属公司	QQ	微信	企业微信	邮箱APP
AWS	正常	超宽，看全需左右滑动	有BUG	正常
Apple	正常	超宽，看全需左右滑动	正常	正常
Facebook	正常	超宽，看全需左右滑动	正常	正常
Twitter	正常	超宽，看全需左右滑动	有BUG	正常
招行	正常	超宽，看全需左右滑动	正常	正常
高德	正常	正常	正常	正常

注意：
这里只是各取了1-2封EDM邮件进行测试，并非大量测试得出的准确结果，所以不具备特别准确的参考性。但是阅读它们的EDM源码，还是可以学到很多东西的。
（再次强调：表中的测试结果并不具备普遍性，非大量测试得出的结果，仅供参考）

可以发现一个普遍性的问题：就是在微信中，固定宽度的页面无法缩放到手机屏幕大小，无法一屏看完，需要左右滑动。如果可以避免，最好还是解决这个问题，毕竟现在微信普遍使用，人们查看邮件也会在这里进行。

可以每个EDM都看看，毕竟也能够取长补短，学到一些。我这里就仔细看了一下高德的EDM源码，代码如下：

<!-- 来源：高德地图某EDM源码 -->
<div>
    <br>
</div>
<div>
    <includetail>
      <!-- 邮件正文 -->
      <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;-webkit-text-size-adjust: 100%;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
          <tbody>
              <tr>
                  <td colspan="3" style="text-align: right;padding: 0;line-height: 0px;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"><span style="visibility:hidden; opacity:0; color:#eeeeee; height:0; width:0;font-size:0;display: inline-block;text-indent: -99999px;">高德开放平台为开发者送福利，限时免费报名2017未来交通峰会！                                                                                                                                    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</span>
                  </td>
              </tr>
              <tr>
                  <td style="width: 0.4%;max-width: 4px;padding: 0;background: #eeeeee;"> </td>
                  <td style="min-width: 99.2%;background: #eeeeee;text-align: center;">
                      <div style="width: 100%;display: inline-block;">
                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                              <tbody>
                                  <tr>
                                      <td style="text-align: right;padding: 0;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <a href="http://lbs.amap.com/dev/room?id=60&sa=18c7d1212a3f8d67cf5758933f8aae85" target="_blank" style="font-size: 12px;color: #808080;text-decoration: underline;line-height: 30px;">在浏览器中查看此邮件</a>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td style="background: #fff;text-align: center;padding: 0;">
                                          ![](https://img.haomeiwen.com/i3746916/568376d33ef590c7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                      </td>
                                  </tr>
                              </tbody>
                          </table>
                          <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;max-width: 680px;margin: 0 auto;">
                              <tbody>
                                  <tr>
                                      <td style="background: #fff;">
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"></td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="padding: 0;margin: 0;line-height: 30px;"> 
                                                              <br>
                                                          </p>
                                                          <p style="margin: 0 auto;display: block;font-size: 20px;color: #4d4d4d;text-align: center;font-weight: normal;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <span style="display: inline-block;text-align: center;">2017未来交通峰会高德开发者参会邀请(限时免费)</span> 
                                                          </p>
                                                          <table cellpadding="0" cellspacing="0" style="width: 100%;">
                                                              <tbody>
                                                                  <tr>
                                                                      <td style="width: 47%;line-height: 0;"></td>
                                                                      <td style="width: 6%;text-align: center;line-height: 1px;">
                                                                          <p style="width: 100%;display: inline-block;padding: 0;margin: 0;line-height: 0;border-top: 10px solid #fff;border-bottom: 1px solid #00a4f5;"> </p>
                                                                      </td>
                                                                      <td style="width: 47%;line-height: 0;"> </td>
                                                                  </tr>
                                                              </tbody>
                                                          </table>
                                                          <p style="padding: 0;margin: 0;line-height: 30px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="color: #a0a0a0;font-size: 14px;line-height: 20px;margin: 0;text-align: left;display: block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <span style="color: #686868;font-size: 16px;text-align: left;font-weight: normal;display: inline-block;">会议内容</span> 
                                                          </p>
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">未来交通，奇点已至！出行行业基础设施逐渐完善，智能交通出行体系正在搭建，下一代交通工具已经横空出世，未来出行方式即将发生改变……</p>
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">本次大会是一场全球出行服务领域的创新者盛宴。立足于现实出行，聚焦于未来交通，未来出行平台、飞行汽车、无人驾驶、共享汽车、共享单车、旅游出行等行业的全球顶尖企业和领导者将共聚一堂，共同探讨未来交通和出行服务领域的前沿趋势。</p>
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          ![](https://img.haomeiwen.com/i3746916/931f323eaa47f29b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                          <p style="padding: 0;margin: 0;line-height: 20px;font-size: 18px;text-align: left;"> <span style="color: red;">高德开放平台为高德开发者送福利，限时免费！</span> 
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                          <p style="color: #a0a0a0;font-size: 14px;line-height: 20px;margin: 0;text-align: left;display: block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <span style="color: #686868;font-size: 16px;text-align: left;font-weight: normal;display: inline-block;">会议详情</span> 
                                                          </p>
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">时间：7月26-27日</p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">规模：约2000人次</p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">地点：北京新云南皇冠假日酒店</p>
                                                          <p style="padding: 0;margin: 0;line-height: 40px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="color: #a0a0a0;font-size: 14px;line-height: 20px;margin: 0;text-align: left;display: block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <span style="color: #686868;font-size: 16px;text-align: left;font-weight: normal;display: inline-block;">会议票价</span> 
                                                          </p>
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">VIP通票    原价：3000元   </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">单场票      原价：1000元 </p>
                                                          <p style="padding: 0;margin: 0;line-height: 40px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="padding: 0;margin: 0;line-height: 20px;font-size: 18px;">赶快点击  <a style="color: #42a5f5;" href="http://www.huodongxing.com/event/reg_submit?id=2396096562000" target="_blank">我要报名</a> 进行活动报名吧</p>
                                                          <p style="padding: 0;margin: 0;line-height: 30px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="color: #a0a0a0;font-size: 14px;line-height: 20px;margin: 0;text-align: left;display: block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <span style="color: #686868;font-size: 16px;text-align: left;font-weight: normal;display: inline-block;">会议议程</span> 
                                                          </p>
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <strong>主题：开启通往未来之门（NO WAY BUT TO THE FUTURE）——未来交通峰会</strong> 
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <strong>时间：7月27日上午</strong> 
                                                          </p>
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          ![](https://img.haomeiwen.com/i3746916/ccb7ced67e294ba1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                                          <p style="padding: 0;margin: 0;line-height: 40px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <strong>主题：变量·进化（VARIABLE & EVOLVING）——出行服务创新论坛</strong> 
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <strong>时间：7月27日下午</strong> 
                                                          </p>
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          ![](https://img.haomeiwen.com/i3746916/8df3978536bc7b7d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                                          <p style="padding: 0;margin: 0;line-height: 40px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <strong>主题：超越驾驶（BEYOND DRIVING）——智能汽车新技术论坛</strong> 
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          <p style="width: 100%;color: #a0a0a0;font-size: 13px;line-height: 20px;margin: 0;text-align: left;display: inline-block;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;"> <strong>时间：7月27日下午</strong> 
                                                          </p>
                                                          <p style="padding: 0;margin: 0;line-height: 20px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                              <tbody>
                                                  <tr>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                      <td style="width: 600px;text-align: center;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                                                          ![](https://img.haomeiwen.com/i3746916/45275258bf75c005.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                                          <p style="padding: 0;margin: 0;line-height: 30px;"> 
                                                              <br>
                                                          </p>
                                                      </td>
                                                      <td style="width: 5.9%;max-width: 40px;"> </td>
                                                  </tr>
                                              </tbody>
                                          </table>
                                      </td>
                                  </tr>
                                  <tr></tr>
                              </tbody>
                          </table>
                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                              <tbody>
                                  <tr>
                                      <td style="padding: 0;">
                                          ![](https://img.haomeiwen.com/i3746916/879375f0dd2c3ed1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                      </td>
                                  </tr>
                              </tbody>
                          </table>
                          <table cellpadding="0" cellspacing="0" border="0" style="max-width: 680px;margin: 0 auto;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
                              <tbody>
                                  <tr>
                                      <td style="color: #bbbbbb;font-size: 12px;padding: 5px 0;text-align: center;border-bottom: 1px solid #dedede;font-family: 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',  Arial, sans-serif;"><span style="display: block;">© 2002-2017 Amap.com 版权所有 | <a href="http://lbs.amap.com/dev/register/unsubscribe/" target="_blank" style="color: #bbbbbb;font-size: 12px;text-decoration: none;">取消订阅</a></span> 
                                          ![](http://lbs.amap.com/dev/room/img?q=eyJpZCI6IjYxNyIsInRpbWUiOjE1MDAzNjc4MjIsInNyYyI6ImxicyIsImVtYWlsIjoieXV4aW4wNzIxQHFxLmNvbSIsInVybCI6Imh0dHA6XC9cL2EuYW1hcC5jb21cL2xic1wvc3RhdGljXC9pbWdcL2VkbV9zdGEucG5nIiwidXVpZCI6IjY0MGRjZDU0ZmI2NzljZWEzNTM0NDI5NGM2NmNiZjZmIn0=)
                                      </td>
                                  </tr>
                                  <tr>
                                      <td style="color: #bbbbbb;font-size: 12px;padding: 5px 0;text-align: center;font-family: 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',  Arial, sans-serif;"><a href="http://lbs.amap.com/api/javascript-api/example/map/map-show/?demo" target="_blank" style="color: #bbbbbb;font-size: 12px;text-decoration: none;">功能体验</a> | <a href="http://lbs.amap.com/cooperation/poi/" target="_blank" style="color: #bbbbbb;font-size: 12px;text-decoration: none;">数据标注</a> |
                                          <a href="http://lbs.amap.com/home/terms/" target="_blank" style="color: #bbbbbb;font-size: 12px;text-decoration: none;">法律条款</a>| <a href="http://lbs.amap.com/faq/top/hot-questions" target="_blank" style="color: #bbbbbb;font-size: 12px;text-decoration: none;">常见问题</a> | <a href="http://lbs.amap.com/cooperation/about/contact/" target="_blank" style="color: #bbbbbb;font-size: 12px;text-decoration: none;">联系我们</a> |
                                              <a href="http://lbs.amap.com/cooperation/about/us/" target="_blank" style="color: #bbbbbb;font-size: 12px;text-decoration: none;">关于我们</a>| <a href="http://i.amap.com/" target="_blank" style="color: #bbbbbb;font-size: 12px;text-decoration: none;">高德指数</a>
                                      </td>
                                  </tr>
                              </tbody>
                          </table>
                      </div>
                  </td>
                  <td style="width: 0.4%;max-width: 4px;padding: 0;background: #eeeeee;"> </td>
              </tr>
          </tbody>
      </table>
      <!-- 邮件正文 End -->
    </includetail>
</div>

2.编码细节

从邮件需求、设计稿效果出发，首先考虑的问题是页面在各个终端尺寸上到底是自适应，还是viewport的缩放。然而，微信在固定宽度页面的自动缩放展示不太理想，所以是否要做成自适应？这个问题之后，才是编码细节上的处理。

1）自适应

也就是说，不能给最外层div设置一个固定宽度，比如width: 640px;或width: 700px;，不能这样做。只能去设置width: 100%; max-width: 640px;，用以兼容手机端和PC端达到理想效果。

<div>
    <br>
</div>
<div>
    <includetail>
      <!-- 邮件正文 -->
      <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;-webkit-text-size-adjust: 100%;max-width: 640px;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
        <!-- balabala 内容 -->
      </table>
    </includetail>
</div>

2）多个table

当内容包含多种列布局的时候，比如第一区域内容分2列，第二区域内容分3列，这个时候我们需要使用“多个table”，而不是去使用colspan="2"，应该尽量避免这种列合并、行合并的使用，减少不必要的兼容问题。

即使都是2列布局的两块区域内容，我们也可以使用“多个table”。只要他们的内容关联度没那么紧密，最好的方式就是使用多个。使用“多个table”，我感觉在修改、维护上，是很灵活的，对我们还是很有利。

...
<table  cellpadding="0" cellspacing="0" border="0" >
    <tr>
       <td></td>
       <td></td>
    </tr>
</table>
<table  cellpadding="0" cellspacing="0" border="0" >
    <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
    </tr>
</table>
...

3）间距表示

描述表示间距时，用的最多的就是margin: 10px;或padding: 10px 20px;这些。然而在EDM中，对待不一样的间距，我们应该用不一样的灵活方法，比如：

表格列与列之间的间隔，我们用带有样式width: 0.4%;max-width: 4px;的空列<td></td>去表示
内容之间上下的间隔，我们用带有样式padding: 0;margin: 0;line-height: 18px;的<p><br></p>去表示

# 表格列与列之间的间隔
<tr>
    <td style="width: 3.3%;max-width: 20px;"> </td>
    <td style="width: 440.4px;> </td>
    <td style="width: 20%;max-width: 120px;"> </td>
    <td style="width: 3.3%;max-width: 20px;"> </td>
</td>

# 内容之间上下的间隔
<td>
    <p style="padding: 0;margin: 0;line-height: 18px;"> 
        <br>
    </p>
    <p style="padding: 0;margin: 0;text-align: right;">
        <span style="padding: 4px 8px;border: 1px solid #fff;border-radius: 4px;color: #fff;font-size: 10px; ">精选</span>
    </p>
    <p style="padding: 0;margin: 0;line-height: 18px;"> 
        <br>
    </p>
</td>

为什么要这样做？因为这样做在设计稿变更的时候，细节调整的时候，维护起来真的方便。

4）图片or背景

我们经常会遇到这样一个问题，就是展示图片的时候，是直接用图片，还是用背景方式展现图片。

直接用图片，在自适应的时候能够让高随着宽自动变化。前提是这是一个专门的EDM设计稿，不通用，相当于定制开发。
用背景方式展现图片，这个在什么时候会遇到？比如说我们每周给用户推送一个感兴趣的文章列表，这是一个通用EDM，里面调用到的图片来自站点服务器，可能尺寸不一，这个时候图片需要用背景，对不对？

直接用图片，一般不会遇到什么问题，最多就是某种安卓机在微信打开的时候不显示，等下见下面“常见问题”里的描述。

而用背景方式展现图片时，在自适应展示时就需要考虑多一点点。

# 用背景方式展现图片（图片地址来源于bing，只为举例而用）
...
<a href="http://cn.bing.com/az/hprichbg/rb/HulunbuirPrairie_ZH-CN11677344846_1920x1080.jpg" target="_blank" style="display: block; padding:0;margin: 0;width:80px; height: 54px; ">
   <p style="padding:0;margin: 0;display: block;width:80px; height: 54px; background-image: url(http://cn.bing.com/az/hprichbg/rb/HulunbuirPrairie_ZH-CN11677344846_1920x1080.jpg); background-size: cover; background-position: 50%;"></p>
</a>
...

3.常见问题

这里的常见问题，是指有可能遇到的问题，并不是一定。比如说微信遇到，QQ等不会遇到；比如说安卓机遇到，苹果机不会遇到。所以，还是根据实际测试去修复问题。大部分问题都是出现在手机端，PC端这边一般不会有很大问题，即使遇到也相对很好解决。

由于EDM没有什么交互，只是展示，这里就列举2个曾经遇到的奇葩问题：

1）字号不受控制

场景：在某些手机APP内预览邮件EDM
原因：可能由于使用colspan="2"合并列导致，或者是嵌套table
解决：尽量避免原因中描述的那些

2）图片看不见

场景：在某些手机APP内预览邮件EDM
原因：未知
解决：在EDM的开头埋一个display:none;的图片

4.结束

总的来说，针对EDM邮件，前端小伙伴普遍的第一反应就是坑，什么时候这个东西才能本质上被优化提升。只能辛苦一点，反复测试，通过测试去找问题，去找解决问题的方法，去总结经验以便下一次能够高效并且少踩坑。总之，给用户一个最好的展示效果和体验效果，才能最大化的实现EDM的价值。所以要尽力做到最好，不是么？

关于EDM的各种细节、问题解决、手机APP适配，
欢迎大家留言，给与我一些指导，在这方面我也是摸着石头过河中，实在是新手，谢谢。

到这里，就先结束了。

学习是一条漫漫长路，每天不求一大步，进步一点点就是好的。

关于EDM邮件我们依然要踩的坑

1.分析观察

2.编码细节

1）自适应

2）多个table

3）间距表示

4）图片or背景

3.常见问题

1）字号不受控制

2）图片看不见

4.结束

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读