EDM是Email Direct Marketing的缩写，虽然也是html，但是和我们在网页上使用的html不同，因为安全原因，各大邮箱服务商级邮件客户端都会对邮件内容进行一定程度上的处理，不会按照你写的原本的html展示
避免垃圾邮件
即使邮件做的再精美，被邮箱自动识别为垃圾邮件也白费，每个邮箱都有自己的垃圾邮件识别规则，了解一下可以避免EDM被当作垃圾邮件，关于这点知乎上哟个经典的问题怎么样才能让自己服务器发出的邮件不被 Gmail、Hotmail、163、QQ 等邮箱放入垃圾箱？
绝大多数是服务器设置、发送频率等，前端需要注意的主要是邮件内容部分
- 图文比例，图片比例过大或者只是简单切图组成的邮件称为垃圾邮件的概率很大，多数邮箱对图片大小也有限制，一般图片超过150k后几乎所有邮箱都不会默认加载邮件中的图片，这也是需要注意的地方
- 标题，标题中带有链接或者明显是推销字眼如发票、促销、免费等关键字也容易被判断为垃圾邮件
- 内容中出现大面积黄色、红色强调的文字，或者字号超大的文字也是判断垃圾邮件的依据之一
- 链接、图片地址尽量使用短而有意义的字符
- 邮件中包含附件或者js代码也会加大被识别为垃圾邮件的概率
- 标题字符全部大写，带有过多感叹号等也是垃圾邮件的标志
常见的垃圾关键词包含：发票、发财、致富、代开、薪水、交友、支付、商机、法宝、宝典等，还有政治敏感词汇
基本准则
在编写EDM的时候有几个不同于页面的基本准则
控制宽度
由于Outlook仍然是邮件客户端的霸主，默认界面邮件的科室宽度对于一般屏幕在800px左右，所以不要把邮件内容设置的过宽，700px是个不错的选择
table布局
这几乎是EDM与普通页面html最大的区别，因为各个邮箱对div＋css这一套布局的解析问题很大，基本各大邮箱都会解析混乱，所以老式的table布局时上乘之选
这就意味着EDM中几乎只有这几个元素table、tr、td、span、img、a，计量避免使用div、p或是其他标签
使用table布局需要注意的一点是并不是所有邮箱很支持colspan、rowspan属性，尽量使用table嵌套解决
body之外的内容几乎没用
我们知道完整的html包括DOCTYPE声明、html标签、head标签及其内容、body标签，对于在一个iframe中显示邮件内容的邮箱 还好，会保留上述结构，但是有些邮件（Gmail）都是在div中直接包含EDM，这就对安全要求极为苛刻，后续讲的几个要点基本原因这是安全
安全原因邮箱会默认把上述结构做删除处理，所以在有些情况下写了几乎没有作用，不要试图以来head标签内的meta或者其他内容（如果真多海外用 户，Gmail会删除），在可能的情况下尽量把内容写到body内，甚至很多EDM的建议是从table开写，直接放弃DOCTYPE、html、 head、body标签
尽量使用內联样式
写html就离不开css，EDM并不支持外部的style文件，上面讲到head标签极有可能被删除，所以不要试图在head标签内写style标签。
在body内写style标签是不是就保险了呢？ 也不是，典型的就是Gmail邮箱，会把EDM内所有style标签删除，这就意味着只有內联的style属性内的CSS是唯一可靠的样式信息
能使用属性就不用样式
并不是使用style属性就保险了，很多邮箱会对特定标签的属性做强制改造，比如把所有td的line-height设成1.2等，使用style属性并不是保险的，所以在有属性能够实现样式的时候尽量使用属性，常见的属性有
table
- width
- bgcolor
- align
td
- align
- valign
- bgcolor
- height
- width
img
- width
- height
对于加粗字体我们可以使用b标签而不是css的font-weight
样式书写
EDM的样式书写也有很多让人吃惊的地方
属性的支持
EDM对CSS支持的匮乏是令人震惊的，普遍支持的几乎就剩支持文字、背景颜色相关的属性，我们可以在The Ultimate Guide to CSS看到具体支持情况
- Gmail对所有的style标签都不支持
- 稍微高级的选择器Yahoo和Gmail普遍不支持，这个对于针对国内市场的同学还能接受国际市场的就悲剧了
- 文字相关的CSS2的基本都支持，但是
font-size、font-family基本各个客户端都有默认值，保险起见，写上自己的；text-indent只对块元素生效，基本使用td的padding可以解决 - background支持比较好的就是color，不要为EDM添加背景图片，多数邮箱不支持
- box相关的border的支持不错，height和width也基本可以，padding和margin的支持并不尽如人意，一个好的建议是不使用margin，主要靠空的、有width和height的td与其padding解决间距问题
- 位置、显示相关的基本EDM很少设计，不要使用float、position属性即可
如果想写出在各个邮箱上看起来都不错的邮件，能用的CSS极其有限，也许看到这里就能明白为什么很多EDM的代码看起来很挫，但是这还没完，套用美剧中常出现的“It’s just the beginning”
继承与简写
在写页面的时候利用CSS的继承和简写会为我们带来很多便利，但是到了EDM，一切都要NO！
首先是继承，其实继承规则依旧有效，但是多数邮箱都会有一套自己的规则，比如line-height，如果我们的元素没有设置，它会以內联样式的形式自动添加，这就造成我们不能轻易依赖继承规则，所有几乎有问题的td都要写
style="color:#333;font-size:12px;font-family:Arial;line-height:1.5;"然后是简写问题
padding:4px;
border:solid 1px #999;类似的代码很常见，但是鉴于EDM的特殊性，建议大家不要这么写，color的代码也要写成六位，而不是简写为3位
padding-top:4px;
padding-...
...
border-width:1px;
border-style:style;
border-color:#999999;元素的特殊性
table
- 上面有提到
colspan、rowspan属性并不能很好的得到支持，所以尽量使用table嵌套解决此类问题 - 所有的table一定要写的几个属性
cellpadding、cellspacing、border，不同的浏览器、邮箱对此的默认值不同，写成我们希望的 - table使用border的时候添加border-collapse的属性值为collapse
- 使用
bgcolor定义table的背景颜色 - td的内容默认是水平左对齐、垂直居中对齐
- td的属性十分丰富，对其、尺寸、背景
img
- 做好图片默认不被加载的预期，Gmail非通讯录邮箱的邮件图片默认都不加载，所以要写上width、height与alt属性
- 仅包含图片的td把
line-height设置为0，否则会有间隙，在图片并列的时候尤为明显，很多人也建议设置样式display:block，虽然一样能实现，但是不推荐 - 很多时候邮箱会为图片默认加上边框，确认不需要的话将其
border属性设置为0
p
少用p标签，hotmail会先过滤掉p标签的margin然后再加上hotmail系统默认设置的值；qqmail会给p设定一个line-height值
DOCTYPE
如果一定要使用完整的html（其实这是有用的，尤其是对于响应式的EDM），尽量使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">原创文章，作者：产品大法师，如若转载，请注明出处：https://www.pmtemple.com/fengsaitao/159/
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
:wink: :wink: :wink: