制作方法
直接在网上搜索“拖拽生成邮件”即可制作HTML邮件格式的精美邮件。推荐国内的一款应用:拉易网。
邮件格式
邮件发展多年,一直是很多人沟通联系和推广业务的主要工具,很多大公司都会发HTML邮件,因为HTML邮件比普通文本邮件更吸引人,震撼力更强。
但作为一名普通员工,我们如果自己制作一封这样的HTML邮件,实在是费事费力不讨好。但好可惜我不是公司的普通员工,作为公司唯一的前端,这个麻烦事情就落在我身上,所以把我的经验和解决方案写出来大家作为参考。
所有文档声明无效,不能用给邮件声明doctype,邮件服务商会自动为你生成。
所有样式做好写在行内,因为有些邮件服务商会去除声明的style标签(我印象中是微信手机邮箱就会)。
所有布局使用table布局,如果页面元素不多,最好是每个元素外都使用一个table包裹,保证最好的邮件兼容性。
宽度适当限制,因为邮件的内容可视区比较小,最好邮件宽度限制在600-800之间。
最好给文字的元素加上font-size,因为有些邮件服务商会给P标签默认加上font-size为14px
图片元素必须设置行内属性width,最好style同时设置,否则如果图片大于你父级元素,outlook下会溢出。
outlook下图片间隔不能使用padding和margin,如果要设置图片间隔,我的做法是外面包裹一层table,然后设置td的padding
图片最后不要使用背景的形式,而是直接使用img标签,不然outlook和一些国内的邮件服务商都显示不了。
不要给图片加边框,因为box-sizing每个邮件服务商都不同,加边框后所需要做的兼容性的工作量大量增加。
阿里云邮箱背景不要使用rgba,因为不能识别,它默认转换为hex。
每个table最好都设置宽度,已达到最好的兼容性。
思想不要太前卫,思想必须保守,最好退回到2000年前,因为绝大部分现在流行的CSS3样式都不能很好的兼容。
我作为一个公司唯一的小前端,做一封公司的HTML邮件,耗了我大半生的功力,总算是勉强完成了任务,发现这样的事情不是我想需要的。新技术用不上,想使用css3装装逼都不行,兼容性要求大。