怎样书写一个邮件模版

  • 2019 年 12 月 4 日
  • 笔记

怎样书写一个邮件模版

背景

很多时候我们会收到一些银行或者酒店推送的广告,打开广告,可以看到一个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需要直接使用原图

文档或工具

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

参考