web前端 杭州-小白 EDM邮件制作【原创】
EDM邮件制作小记录。
网上也有很多的制作邮件的方法。那么我这里介绍下.我这里的邮件制作,我做邮件的心得把。
要求兼容hotmail,雅虎,谷歌,还有一个aol邮箱,均是国外的邮箱。
真的是真心兼容这么多邮箱是个痛苦滴事情,上面的兼容性可以了。真心说国内的邮箱都可以了,对与不对大家可以自己去测试哈。
So步骤开始
1.编码统一UTF-8, 用table布局
2.Talbe的宽度我这里规定的是650px(网上说的是600-800左右大家自己拿捏)。邮件文件总大小不能超过50K,邮件里面的 每一张图片大小不能超过50K,邮件里面的内容能不用图片就不用图片,尽量用文字表示,总之文件的大小是越小越好。
3.图片方面:高度,宽度,alt属性,tilte属性可以都加上。
4.兼容性方面。
<table cellpadding="0" cellspacing="0" style="width:650px; margin:0 auto;color:#676767; font-family:宋体; font-size:12px;" width="650" align="center" > <tr><td ></td></tr> </table>
上面的代码中
style要直接写在元素的上面。
一个大table里面套很多小talbe记住 高度和宽度在td上面一般情况下都是要给的。
如果td里面有文字。这个文字的样式很有可能在各个邮箱中的表现是不能继承外面大table的字体样式,那么这里你也要写上。
例如这里是描述一个文字的,表示间距的时候最好用padding不用用margin
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fee6e6" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#2b2b2b;"> <tr> <td width="610" height="20" style="padding-left:32px;font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#2b2b2b;">newsletter, or the only mail special for you.</td> </tr> </table>
5.关于img图片的兼容性
一般这么写
<img alt="Leopard style fashion forever" title="[Leopard style fashion forever]" src="images/ad_01.jpg" width="650" height="260" border="0" style="display:block;" />
Borde=0防止有链接的时候在IE6里面有边框。
style=”display:block;”防止在有些邮箱在某些浏览器里面出现间隙。。
6.对了这个发邮件的时候。所有的路径要使用绝对地址,这个就不解释了。想想就明白咯。
总结:国外的邮箱很多是默认是屏蔽图片的状态,上面所有的注意主要是为了防止邮件在邮箱里面看起来很乱,影响用户阅读的心情.
ps:邮箱测试是在不同的浏览器下面看一个邮箱的邮件也不是表现不一样的。如果真要做到全兼容。。。很困难,不过可以做到95%以上的兼容就可以咯。。
关于邮件的制作其实蛮多的注意事项的哈【结合下面的demo和上面的总结,多做几封邮件就知道了。还是要多练,哈哈。】。一时也想不到其他的了。。。太久不整忘记了。。。想到了就记录下。。这个总结的不是很好。。望指正。。
同时附上一个网友总结的可以结合这看看。
这里还附上一个小demo我之前制作的邮件.
请看demo
😛 腰细,不错哦! 😮