怎样书写一个邮件模版
- 2019 年 12 月 4 日
- 筆記
怎样书写一个邮件模版
背景
很多时候我们会收到一些银行或者酒店推送的广告，打开广告，可以看到一个html页面 本来以为是写一个静态页面可以实现出来的。后面刚好项目中用到，感觉就不是一回事了。
开始
看过几篇文章，谈到如何写一个邮件模版。其中有一句话比较认同 如果想要你的邮件模版有好的兼容性，那么用15年前开发网页的方式来开发html页面，准没错
当然也有一些邮件客户端，如firefox，qq邮箱，163邮箱比较好的支持了html和css样式
如果只考虑这些兼容性比较好的客户端，那么你可以在谷歌浏览器测试通过后即发送模板，然后你就可以下班了
但愿你可以这么好运。
而实际上，由于邮件客户端实现标准不一，很多时候需要兼容其他客户端场景 于是实现出来的方案是折中或者说是一个降级的方案。 在实现过程中碰到一些问题，总结出来。
兼容性问题
- 样式使用内联，outlook中会去掉模板头中style中的样式
- 布局使用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>
- 设置图片的alt属性，因为一些客户端安全限制并不会默认加载图片
- 优先使用标签的属性功能，其次使用style样式来控制
- 尽量使用padding来控制边距，padding尽量使用分开写的方式（padding-top:2px;），否则某些客户端可能无效，margin并不是总有效
- 邮件中不能隐藏了内容，所以有多余的内容时，需要在填入邮件前处理掉 比如显示一行文本，如果文本过多，导致的结果就是换行，可能会影响到整理的页面布局
- 转码问题 内容填充到邮件，不需要做html编码。因为邮件模版程序在生成内容时为防止xss会做一次转码。
特殊场景
特殊的图片展示问题
- 图片的协议链接需要补充完整，如带上http或者https
- 安平切图的图片在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/
