关于HTML Email的实践

本文分享了在设计邮件模板时需要注意的几个关键点,包括使用div作为根节点、内联样式、图片尺寸及alt属性的重要性、line-height的影响以及布局方式的选择。
 前几天的时候,小师傅给安排了一个任务就是做一个邮件里展示的证书末班,就给了一个psd的图,看完之后按照之前的理解做了一个简单的样式出来,当然就是所有css的东西都是写在了顶部,后来看了之后才知道,在HTML Email这里面也有一个比较大的学问,个人的理解就是说白了在邮件里要考虑到安全性,所以很多的功能都不支持,貌似js之类的都会被一些邮件的客户端所过滤掉。


在看了几篇博文之后大致结合了自己实践过程中的问题总结了一下有如下几点感觉需要注意的:
1.邮件的模板需要写成一个以div为根节点的html[邮件模板不知道是在什么浏览器下面展示的也不知道是在什么第三方的邮件客户端下展示的,他有可能是一个iframe把你的邮件内容包含进去的,也有可能是简单的用一个div包含]
2.所有的样式需要写成内联[不知道加载你邮件模板的客户端写了什么默认的样式,由于css的一些继承属性会给最后的显示带来一些不便]
3.对于那些图片什么的必须指定它的高度宽度以及alt[因为貌似好多邮件客户端一开始的加载都不会加载,需要用户自己手动点击同意,没有这些的话,样式会乱而且不知道是什么内容];
4.line-height!!!会影响到你的一些布局的间距,之前做的时候就被坑了一会,最好自己设置一个数值来覆盖;
5.还有就是布局上,一些类似什么绝对定位什么的都不能用,因为在很多地方不支持,我看几个博文上说,用table来布局,不过这样的话会对整体的可维护性有点不好,在后续需要调整的话,修改不是很方便++!我在实际中,用的是div,一些间距的话用了margin




1.http://www.maildesign.cn/archives/1380

2.http://swordair.com/principles-on-good-compatibility-html-mail-edm/

3.http://www.campaignmonitor.com/css/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值