邮件HTML(EDM)

《邮件HTML(EDM)制作要注意的几点》

前阵子做了一个EDM,第一次做也没什么参考的,公司倒是有一些标准,但也是从网上来的吧。简单地总结一下吧:最好用Table和CSS,这样兼容比较好。什么Div,Span就少用了,甚至不用。其他的也没有什么要注意的了:

  • A.针对公司邮箱:页面最好以文字内容为主;针对ISP邮箱:页面最好以图片为主;
  • B.不要使用“的CSS定位”的布局,因电子邮件不支持,尽量使用表的布局;
  • C.尽量避免优惠、免费、低价等敏感字眼;
  • D.页面设计上尽量不要使用Map功能,因为会使很多ISP厂商将邮件划分垃圾邮件;
  • E.发送前将所有常用的ISP邮箱最好进行测试,根据其接收情况进行相应的修改;
  • F.尽量少用background-images;
  • G.不要含有<span> </span> <div>…</div> 等会影响到邮件发送效果的内容;
  • H.不要含有非HTML的代码,如直接从WORD等软件中复制出的代码;
  • I.文件内容编码要是UTF-8 ;
  • J.文件本身编码也要是UTF-8.(记事本-另存为(设置为UTF-8)-保存) ;
  • K. flash/javascript不要有,如果页面中的图片一定要是动态的,请将FLASH文件转换成GIF动画使用(Outlook 2007限制GIF动画,在Outlook 2007里,GIF将不能正常显示);
  • L. 制作一份和邮件内容一样的web页面,然后在邮件顶部写一句话:如果您无法查看邮件内容,请点击这里查看, 链到放有同样内容的web页面,这样即使用户收到的邮件图片无法浏览,通过链接也能正常查看内容;
  • M. 设计上不要使用过多文字,尽量让版面清晰,让主题更加吸引阅读者,以达到更高点击率;
  • N. 使用Word类文件直接转化html格式不可做为EDM页面发送; 页面宽度推荐500px,最大不要超过600px;
  • O. 文字页面尽量在50KB以内;HTML页面尽量在15KB以内;
  • P、页面尽量不用背景图片,可以用背景颜色因为outlook是不支持背景图片的

说在最后的,这个里面的东西可以参考一下,也不要太死。毕竟知识都在更新中的,没有一条不变的规则。

制作HTML邮件注意事项——针对Outlook2007

最近做了一套河北手机证券邮箱版的页面。
问题出现了:要做到兼容几乎所有邮箱,Gmail,Yahoo mail,foxmail,outlook等,但邮箱对css,HTML标签的支持程度各不相同。

因为做之前参考了许多邮件,发现都是table的,就直接用table写了。火狐和IE还有foxmail下测试都是正常的,但到了outlook2007中,有一些问题。
1、图片全部没有显示
2、字体样式不对
3、位置会有偏移
等等......

总之就是问题一大堆,初次做HTML邮件的我也不知道是什么原因,多亏简叔儿帮忙。下面是针对以上问题的解决方案,记下来做个备忘,也给大家个参考。

1. 尽量用table写,不要用DIV,div+css很难保证在Outlook2007中正常显示。因为float、position这些style会被过滤。
2. 尽量不要使用 <style></style>,Outlook2007对class的支持太屎了,什么元素需要什么样式就用style写内联的css,比如<a style="color:#ff0000; text-decoration:none;">U&I</a>
3. 不要使用背景。只有body支持background,td等都不支持,所以直接在如图片好了。有文字的地方我都变成了纯底色,因为Outlook2007中还是支持bgcolor的。
4. 如果整个页面字体大小是12px,那么全局样式是body{font:12px Arial},而不是*{font:12px Arial}


----------------------------------------

我的经验:

1. 不要使用important! ,在OUTLOOK2010中会失效(其它outlook版本未测试)

2. 图片在outlook网页版中会有空隙。ff没有。chrome有。解决方法是定义图片为块元素。

3. 图片一定要写入alt ,tittle 如果在图片没有显示或无法显示的情况下可显示出文字内容;(图片外层可以定义字体,颜色,大小,当无法显示图片时会有一个良好的视觉效果)

4. 内容的间距不要使用style样式定义,尽量使用表格控制。

5. 不要对图片使用浮动 outlook 网页版会对图片下加空隙。(表格中的图片测试结果)

参考资料:

1. http://msdn.microsoft.com/zh-cn/library/aa338201.aspx

2. HTML Email 编写指南

3. 编写email邮件的HTML页面原则

4.2 Fixes for Image Spacing in Outlook Web App (OWA)

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值