怎样书写一个邮件模版

怎样书写一个邮件模版

背景

很多时候我们会收到一些银行或者酒店推送的广告，打开广告，可以看到一个html页面 本来以为是写一个静态页面可以实现出来的。后面刚好项目中用到，感觉就不是一回事了。

开始

看过几篇文章，谈到如何写一个邮件模版。其中有一句话比较认同 如果想要你的邮件模版有好的兼容性，那么用15年前开发网页的方式来开发html页面，准没错

当然也有一些邮件客户端，如firefox，qq邮箱，163邮箱比较好的支持了html和css样式

如果只考虑这些兼容性比较好的客户端，那么你可以在谷歌浏览器测试通过后即发送模板，然后你就可以下班了

但愿你可以这么好运。

而实际上，由于邮件客户端实现标准不一，很多时候需要兼容其他客户端场景 于是实现出来的方案是折中或者说是一个降级的方案。 在实现过程中碰到一些问题，总结出来。

兼容性问题

1. 样式使用内联，outlook中会去掉模板头中style中的样式
2. 布局使用table，因为outlook中会将div转换为内联样式

比如要实现一块内容居中的效果，需要外层套一个宽度100%的table，里面放一个固定宽度的table，居中展示

<table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
  <td>
  <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
  <tr>
  　　<td> Row 1 </td>
  　</tr>
  　<tr>
  　　<td> Row 2 </td>
  　</tr>
  　<tr>
  　　<td> Row 3 </td>
  　</tr>
  </table>
  </td>
　</tr>
</table>

1. 设置图片的alt属性，因为一些客户端安全限制并不会默认加载图片
2. 优先使用标签的属性功能，其次使用style样式来控制
3. 尽量使用padding来控制边距，padding尽量使用分开写的方式（padding-top:2px;），否则某些客户端可能无效，margin并不是总有效
4. 邮件中不能隐藏了内容，所以有多余的内容时，需要在填入邮件前处理掉 比如显示一行文本，如果文本过多，导致的结果就是换行，可能会影响到整理的页面布局
5. 转码问题 内容填充到邮件，不需要做html编码。因为邮件模版程序在生成内容时为防止xss会做一次转码。

特殊场景

特殊的图片展示问题

1. 图片的协议链接需要补充完整，如带上http或者https
2. 安平切图的图片在outlook2007上展示异常，要兼容outlook2007需要直接使用原图

文档或工具

可以使用一些辅助的工具帮助我们更快更有效的开发邮件模版

• 邮箱模版中属性兼容性：https://www.campaignmonitor.com/css/
• 代码兼容性验证：http://validator.w3.org/
• 邮箱功能：outlook中自带查看源文件功能，可以看到经过outlook解析后的模版内容
• 本地浏览器测试：使用chrome，IE8来测试兼容性
• 本地客户端测试：使用notepad++，自带插件，可以调用本地outlook客户端发送模版(菜单路径：run -> send via Outlook)
• web页面测试：收费的 https://mailchimp.com/features/inbox-preview/ https://litmus.com/

参考

• http://www.ruanyifeng.com/blog/2013/06/html_email.html
• https://www.w3cplus.com/css/build-an-html-email-template-from-scratch.html