邮件模板——科普篇

Posted 2020-06-26 前端—郭瑞

　　我们平时都有过使用outlook的经历，outlook是微软office家族中的一员，通过outlook管理邮件可以说是非常方便高效的。其强大的邮件管理能力和编辑能力，都是非常出色的。下面我们简单看一下和邮件相关的前端技术。

　　一般我们编辑邮件，多数情况下会选择使用outlook内部集成的office编辑方式，我们可以像编辑word一样编写一封邮件，这种方式是比较适合编写文本为主的邮件的。这种邮件多以通知、叙述事情为主。格式多为纯文本或简单的图文混排为主。当然还有另外一种编辑方式——前端实现的邮件模板，这种方式展示效果多以复杂的图文混排、网页化的排版结构为主，并且具有较好的兼容性。

 

什么是邮件模板？

　　邮件模板是outlook等邮件系统支持html解析格式的条件下，利用前端技术通过编写HTML文件生成期望的邮件页面，从而辅助编写邮件的邮件编辑方式。简单来说，就是像写网页一样去写邮件。目前我们在163等邮箱中收到知乎等网站推送的订阅期刊 、京东等购物网站的流程通知、51JOB等招聘网站的职位推送、LinkedIn等社交网站的人脉拓展，这些都是通过邮件模板的方式实现的。当然邮件模板的使用分为手动改写（适用于固定内容群发）和后台系统自动编辑分发（适用于即使反馈、内容随不同用户而变化的）等多种方式。

 

邮件模板有哪些优势？　　

　　1、排版复杂：利用前端渲染处理复杂页面的优势，相比编写一个word文档利用前端技术编写排版复杂页面，可达到的效果要丰富许多；

　　2、可复用：因为前端的html文件是一种结构化文档，产生的页面是将文档解析而生成的。相比修改word这种可视化文档，修改一个结构化的文档，可以将更多的经历放在关注内容上，而不必去过度关注式样。因为式样就在我们的结构中，只要依照拓扑结构修改或增删代码块，就可以按照我们编写好的式样规则展现出来。而word编写好内容后还要去调整式样，这耗费了我们不少精力。由前端工程师实现了多组通用模板，使用者就可以将内容和模板按需进行简单的拼装，一封内容丰富的邮件就诞生了。

　　3、兼容性：利用office 编辑文档，往往会出现在office2010写的文档，在2007 或2003打开时（高版本编辑，低版本查看）格式错乱的不兼容现象，平时普通邮件中简单的文本格式还好些，但复杂些的文档问题就会比较明显，我们哪有精力去记着那些格式兼容，那些不兼容。但是利用html编辑就会跳过office版本的问题，因为html国际标准并不属于office，无论哪个office版本，对html的解析都应该遵循W3C的标准。

　　4、式样与内容分离：前端开发负责模板的式样和html结构定义，一旦定义好后，使用者在很大程度上不需要处理式样，填写内容就能实现编写。由于将一部分工作交给前端工程师，编写邮件的效率就会在一定程度上得到提升。但是在手动修改模板的前提下由于使用者需要在html模板的基础上进行二次编辑，所以必然要求使用者对html标签有简单的了解，不过也仅仅涉及到html中表格标签那部分的知识，至于一名没有前端基础的使用者需要学习那些知识呢？我会在后续文章中介绍。

 

如何使用邮件模板？

　　使用邮件模板分为手动编辑和后台程序渲染（需要后端支持）。后台的方式需要上TPL，当然还要调用发邮件相关的接口。我这次想说的是手动编辑，这种方式比较适合群发邮件（内容与用户无关）。下面简单说一下大体上的步骤。当然具体细节，会在后续的基础篇补充。

　　outlook同时支持office编辑和web格式。那么如何将改好的html移动到新建的邮件中呢？

　　1、修改邮件模板html文件，在浏览器中查看是否达到目标要求；

　　2、在浏览器页面中，Ctrl ＋ A 全选页面内容（注意是在“浏览器中的可视内容”，我一开始误以为复制源代码，半天没弄出来！），并复制选中的页面内容；

　　3、在outlook中新建一封邮件。在正文区粘贴（ctrl＋V），我们可以看到刚刚的页面已经出现在邮件中了。这是我们还可以在邮件中进行修改编辑。

　　4、注意，一旦先粘贴了页面，outlook的一些版本就会默认html格式而不能在当前邮件用office二次编辑。因此如果还想混入一些office，例如分列布局、希望横向或个页面、文本框控制页面位置等。可先用office布局，在在对应的文本框内粘贴页面内容。

 　  5、没什么问题，就添上主题和收件人发邮件吧。

 

设计邮件模板有哪些注意事项？

　　邮件模板的设计工作一定不是前端开发人员完成的。往往是使用者根据工作中的提炼总结、产品经理、设计师等。考虑到outlook对html标准的支持程度，那么作为需求方或设计人员在设计邮件模板的时候应该注意些什么呢。（前端开发人员的注意事项，将在后续的开发篇给出）

　　1、背景图：outlook中的html页面，对背景图有较大的限制，虽然官方文档中、或是网上一些文章有提到可以内联加入背景图，但是在实际开发中我们发现，outlook仅仅支持背景色，而不支持背景图（outlook认为背景图的渲染方式对性能损耗较大，因此会将背景图片屏蔽，但直接插入图片无此限制）。观察其他网站的邮件模板时我们发现，大家也都不会采取可编辑内容下方有背景图的形式，都是文字下方背景色的设计风格。因此我们建议尽可能的使用背景色，当背景图达到的效果不可替代时，建议将内容合成到图片中，再将图片以  <img>标签的方式插入到页面（邮件）中。即图片占图片的空间，文字占文字的空间。

　　2、表格化布局：由于outlook对html标准的支持并不完全，目前支持较好的是表格（  <table>、<td>、<tr>等标签）相关的标签，原因是outlook 对CSS的支持有限，但表格是带有丰富式样的语义化标签。利用表格布局会更可靠一些。

　　3、绝对定位：outlook对绝对布局的支持并不是很好，因此页面中尽量不要出现一个不规则定位的元素，同上一条建议表格化布局。

　　4、超链接：由于使用html语言，因此邮件模板是支持超链接的，但是插入链接的方式不同于office，而是通过<a href="url">点我</a>的形式完成。

　　5、字体：有很多东西我们按照浏览器的标准来。建议使用12px以上的字体大小。由于在浏览器调试的时候没有office的字体库丰富，建议使用网页常用的字体如，宋体、黑体、微软雅黑等常用字体。

 

总结：

　　以上是邮件模板科普篇，简单介绍了一下邮件模板，并简述了邮件模板在设计过程中的注意事项。如果想了解邮件模板的前端开发请关注后续的开发篇；如果想知道作为一个使用者，应该学习哪些前端知识请关注后续的基础篇。