编写邮件模板的注意事项

事情的原由是运营须要给用户推送各种活动邮件，产品便把实现邮件模板的需求交由我来完成，得，有需求咱实现即是了。一开始想的确实挺好，不就是个静态页面嘛，刷的一下就搞定了，而后邮件发送出去各类兼容性问题，所幸只是测试邮件，否则就炸锅了。果真事情没有想象中的简单，网上查了一下发现HTML邮件模板的编写仍是有点学问在的（文末附有「HTML邮件相关资源推荐」）

编写前提

HTML邮件模板的编写，先排出如下前提条件

1. 「邮件内容展现于第三方平台」
2. 「邮件的解析器比较老旧」 以上两点前提是咱们在编写HTML邮件时须要认识到的，根据这两点前提加网上的总结，我有如下注意点：

1. 采用table布局方式

根据前提条件2，在不知道邮件最终会在哪一个第三方邮件平台上展现时，确保布局不能乱的状况下只能用最保守的布局方式，就是table布局。这个布局方法是早期的网页比较流行的方式，优势很明显，兼容性无敌

2. 注意兼容性，尽可能有替代方案

仍是前提条件2，尽可能避免使用css3的语法，很大可能性会失效，那么要如何肯定兼容性呢，文末有附上鉴别工具。在某些状况下，在与设计和产品反馈说兼容性不太好的状况下仍要采用当前设计（没错，这种状况也有不少），这时候就要尽可能采用一些备用方案了。好比如下所示：

/* 失效状况下的补救方案 */
background: #00A9BA;
/* 渐变背景，有可能会失效 */
background: linear-gradient(90deg, #52D6CE 0%, #00A9BA 100%);
复制代码

4. 行内样式优先

为何说行内样式优先，是由于第三方邮件平台展现邮件内容的时候，有可能会去除邮件模板的head,style等标签，若是样式是统一存放与style标签内的，则模板也就乱了。因此，在编写邮件模板时，尽可能使用行内样式实现。若是存在一些特殊的状况如须要处理响应式邮件时，就不得不用到style标签来作class的处理，这时候也得要有备用的兼容方案，好比移动端样式优先显示，经过媒体查询再显示PC端的内容。固然了，最好在设计前和设计师沟通一下（大雾

5. 不要存在定位

经过兼容性的查询可知，position属性基本不被主流邮件客户端支持，这东西最好不用就是了。具体的缘由是什么没查到，这里能够猜想的是，若是开放position，那么有可能会将邮件客户端的内容给遮挡住，这也是很尴尬的

6. No JavaScript！

这个自没必要说了，全部的邮件没法执行Javascript代码，为了安全性。因此若是产品有要求对邮件进行一些脚本操做，最好的办法就是跳转至自用的网站下再进行相应地操做。

7. 将元素放置于body中

将布局的内容及样式放置于body标签中，是为了防止第三方客户端删除头部、只保留body标签的状况出现。这里要注意的一点是，若是存在特殊状况下的style标签，那么留在body中存在的几率会大一些。

End

存手工编写是最靠谱也是最麻烦的方法，看实际状况而定，邮件的实现必要时也须要和产品以及设计沟通，切忌让设计天马行空的去搞，否则麻烦的仍是前端（扯皮麻烦）。 如下是一些邮件资源，这里须要说明的是，这一类的框架优势是比较省事，不用写太多，那缺点也很明显，就是得学多一门几乎是新的语言

• MJML:  mjml.io/
• emailframe  emailframe.work/
• Foundation for Emails 2: [ foundation.zurb.com/e...]()
• responsive HTML email template:  github.com/leemunroe/r…
• campaignmonitor： www.campaignmonitor.com/a/

本文使用 mdnice 排版