如何进行EDM邮件制作
2017-12-15 00:00
225 查看
问题:我怎么才能收到你们公众号平台的推送文章呢?答案:只需要点击标题下面的蓝色字【web前端开发】关注即可。
首先,制作EDM邮件的一个准则就是使用table布局和inline style,因为很多样式和标签邮件客户端是不识别的,再一个外部资源引入的CSS/JS和写在<style>标签里的CSS很多时候都会被邮件客户端干掉。这两点是我们开篇的基础知识。
我们一开始认为,那一定是IE浏览器的锅,于是用浏览器打开页面一看,表现也是有白边,加各种样式也去不掉,后来发现是代码间的换行导致的,于是很简单,我们随便弄个在线的html压缩工具把代码一压缩就行了,IE下的白边果然就没有了。然后再看,发现链接有默认样式(白边存在时不出现,很神奇),一个很难看的蓝框框,这个也简单,把图片和链接的
切图时注意不要有高度值太小的,切片高度应大于40px为佳
使用table布局和inline style
需要对html代码进行压缩,规避IE下空格和换行符的影响
使用juice将style标签里的样式自动变成inline style
<map>标签在Mac邮件客户端里无法识别
对于链接和图片,需要设置
邮件制作看似简单,要做好也需要一个构建环境,目前我用的是gulp+juice+htmlmin
来源:http://eux.baidu.com/blog/2017/12
关注我们
首先,制作EDM邮件的一个准则就是使用table布局和inline style,因为很多样式和标签邮件客户端是不识别的,再一个外部资源引入的CSS/JS和写在<style>标签里的CSS很多时候都会被邮件客户端干掉。这两点是我们开篇的基础知识。
A Sad Story
一开始,我们使用了网页三剑客之DreamWaver,在一整张图片上使用<map>标签增加链接,网页和outlook里测试都非常perfect,但是放到Mac客户端里,链接无法被识别出来。然后我们又使用了网页三剑客之Photoshop,对整张图进行了切片,并给切片附上了链接,然后直接导出为html,出来直接就是table布局,一些常用的样式,比如:
border=0cellpadding=0cellspacing=0这些都已经以inline的形式加入到table里了,看起来很完美了,可是发出去以后windows下的outlook显示有白边:效果是这样的:
我们一开始认为,那一定是IE浏览器的锅,于是用浏览器打开页面一看,表现也是有白边,加各种样式也去不掉,后来发现是代码间的换行导致的,于是很简单,我们随便弄个在线的html压缩工具把代码一压缩就行了,IE下的白边果然就没有了。然后再看,发现链接有默认样式(白边存在时不出现,很神奇),一个很难看的蓝框框,这个也简单,把图片和链接的
border和
outline、
text-decoration统统设为none就行。但是茫茫多的图片和链接,都要到inline里面一个一个设置显然工作量很大,没关系,我们可以使用juice这个工具,可以很方便的帮我们把style放到inline里面去。写个gulp任务还是很容易的。再看IE浏览器的效果,OK了,但是回头看windows outlook客户端,还是老样子,时间太晚,决定回家再说,家里装的最新的windows10自带的新式邮件客户端,估计高级货应该没问题,结果回去一看还是一样的问题。微软太令我失望了。不过新的客户端可以很容易的把邮件另存为eml格式,这样我用编辑器打开就可以查看源码了,于是我就去找别人写好的案例,自己写不行,抄还不会么?发现人家有的是把链接和图片包在
<p>标签里,没关系,可以用cheerio这个
node端的jQuey库,找到文本里所有的
<td>下的
<img>或
<a>,只需要用iQuery一样的wrap语法外面包一层就行:
var cheerio = require('cheerio');var $ = cheerio.load(content);var p = $('<p style="margin:0; padding:0"></p>') $('td > a').wrap(p); $('td > img').wrap(p);心里刚刚为自己的机智点赞,但是实验的效果依然跟之前一样。看来不是这个原因。最后只得一张图片一张图片的check,希望能通过归纳法找到规律,结果还真找到了,之前切图的同学有一些图片高度上切的比较窄,而outlook对应浏览器的渲染对tr有个内置的最小高度,当图片高度小于这个最小高度的话,白边就出现了,于是乎只能重新切图。切完图以后再retry,效果比之前好很多,但还是有细细的白边,于是继续另存以后check代码,发现我们之前因为safari浏览器可以很方便的直接将网页以邮件发送,都是用的这种形式进行发送,但是代码里显示,用这种方式发的话,它会在你的代码外面包一些额外的标签
<base class=3D""><div class=3D"Apple-Mail-URLShareUserContentTopClass"><br class=3D""></div><div class=3D"Apple-Mail-URLShareWrapperClass" style=3D"position:relative!i=mportant"><blockquote type=3D"cite" class=3D"" style=3D"border-left-style:none; color=:inherit; padding:inherit; margin:inherit"><br class=3D"">外部包了这一堆都是源码中没有的,然后我尝试去掉了
<blockquote>标签,效果就OK了,但是怎么把这个邮件发出去就是问题了。最后尝试了一下,发现可以先用safari发送给自己,收到以后再全选以后复制粘贴用邮件客户端发送,就不会有这些额外的标签了。
Tips
使用photoshop的切片工具可以无需编写代码就方便的生成页面切图时注意不要有高度值太小的,切片高度应大于40px为佳
使用table布局和inline style
需要对html代码进行压缩,规避IE下空格和换行符的影响
使用juice将style标签里的样式自动变成inline style
<map>标签在Mac邮件客户端里无法识别
对于链接和图片,需要设置
border、
outline、
text-decoration为none
邮件制作看似简单,要做好也需要一个构建环境,目前我用的是gulp+juice+htmlmin
来源:http://eux.baidu.com/blog/2017/12
关注我们
相关文章推荐
- 如何使用报表制作工具软件进行二次开发
- 如何进行flash制作
- 用vs制作安装程序的时候 如何获取用户输入的序列号,并进行判定
- Basic INFO - InstallShield制作的安装包如何进行平台过滤
- 如何进行制作消音视频(视频配音)
- 如何对直播系统制作进行选择
- 如何借助七牛云对图片进行简单处理,制作图片水印以及缩略图
- 如何在c#中进行调用vc制作的dll中的类
- 【ROM制作工具】小白如何进行ROM解包,精简,修改,授权,打包详细图文教程
- 如何利用SD-WAN进行安全的远程媒体制作
- 制作分页显示时用paginate()函数获取对象后如何将获取到的某一键值进行修改
- 素材透明通道如何通过EDIUS进行制作
- B2B行业网站如何制作“电子书”进行病毒营销
- 素材透明通道如何通过EDIUS进行制作
- 如何进行简单的功能仿制(网页制作)
- SolidEdge 如何由装配图快速进行标注和零件序号编写 制作BOM表
- 用flex如何制作不规则的表格,进行打印预览。而且可以打印。譬如制作如下表单:
- 如何制作一个动态的时间每隔一秒进行跳转
- 我是如何来进行项目管理-范围管理的
- 如何快速制作EDIUS中的黑场过渡