编写Email HTML的注意点

[lynnic26]

最近的工作是写一个邮件提醒，本来以为特别容易，
实际写起来有一些需要注意的地方，主要是战outlook

发送HTML邮件

常见的邮件客户端有Outlook,Foxmail,Gmail等，它们同时可以通过网页访问
我们可以通过Foxmail发送带html的邮件,用于测试

点击图中魔术棒，有插入HTML的选择项，就可以插入HTML代码片段了

各种邮件客户端对HTML的支持情况

可能是考虑了一些安全问题，我们插入的HTML中的所有CSS样式和脚本都会被邮件客户端过滤掉。
同时客户端会自己设置一些CSS样式，我们只能使用内联样式。
邮件客户端的CSS支持情况
从这个页面中可以看出，outlook客户端对一些常用css属性的支持非常差，甚至在非table标签内，连
padding和width都无法支持。

Email HTML书写的原则

为了兼容用户使用量十分大的outlook，我总结了一些书写原则，能够最大程度的不至于在outlook中样式一团糟。

• 使用table布局
  不要担心table嵌套table。事实上一些稍微复杂的layout，可能嵌套的好多层table
• 尽量使用内联样式，CSS不要使用简写
• 在td或table标签中使用padding和width
  由于其他标签，像div这种最常用的布局标签中的width和padding，在outlook中居然不生效，为了向这
  一可怕的事实拖鞋，只能把这两个属性写在td或者table中
  这里还有一个恐怖故事是，outlook会把设置在table中的一些属性一股脑的应用到其子标签上，所以尽 量写在td上
• 要发送的HTML片段最好经过压缩
• 图片是唯一可以引用的外部资源
• 在设计阶段就把一些过于酷炫的效果给剔除掉
  和设计师讲（chao）道(yi)理(jia)
• 参考一下微软系公司的邮件模板
  如Linkedin，它们肯定会考虑兼容东家的outlook。

Examples

虽然只能用table布局，EMAIL HTML依然可以呈现数据可视化的一些酷炫效果，下面是sentry发的日志报表邮件

不过在outlook客户端里还是一团糟，看来sentry团队是直接放弃了outlook客户端

参考

HTML Email 编写指南