EDM（Email Direct Marketing）HTML制作要点

我们打开邮箱邮件，经常发现类似这样的网页：

上图为京东发送的商用邮件，我们即称之为EDM，中文名电子邮箱营销。在邮件中嵌入的京东推荐网页中，我们点击商品链接或者图片就可实现跳转等功能。

我们可以思考一下，右侧为京东制作的营销网页，主站则为腾讯的QQ邮箱网站，QQ邮箱网页嵌入了京东的网页，那么腾讯会任京东的网页为所欲为么？肯定不会，例如，京东在网页中用fixed布局设置了一个跳转到京东主页的按钮放在屏幕右下角，QQ邮箱会让他这么做？肯定不会。腾讯和京东虽然是合作关系，也不会允许朋友做的这么过分吧。

但是对于一个邮件推销者而言，单凭文字往往表达不全面发送者的意愿，所以邮件中放上精美的商品图片或者有吸引力的磁力链接就尤为重要，而这些有吸引力的内容正要通过网页的形式展示出来。

但是邮箱主站中嵌入外来的不明网页，就一定要对其进行限制，防止不明网页的过分渲染。

借用一张图片，简单看一下不同邮箱网页中对嵌入不明网页的部分样式限制：

不同的邮箱对于HTML和CSS的限制有所不同，所以要考虑大多数主流邮箱的兼容性，有以下需要注意：

1. 由于CSS可能被过滤，必须使用 table 布局。设置table的cellpadding和cellspacing属性值，控制table中内容的间距。如果需要邮件居中显示，在table里设定align="center"。往往<table cellpadding="0" cellspacing="0" align="center" border="0" style="margin: 0 auto;width: 700px;border: none;" >为table的标配，table的宽度不要超过700px，一般宽度在550px到700px最佳。在很多无奈的情况下经常会遇到多层 table 的嵌套，对此不必过分在意。不要使用div，其在大多数邮箱中不被支持。
2. 不要使用背景，因为很多情况下都不被支持，即便有些邮箱确实支持背景图片，最后的结果往往也并不好。这一点使得设计出来的页面如果太花哨的话，直接都成了切图。
3. 所有的图片必须指定高宽和 alt 属性。这点很容易理解，因为很多邮箱里，图片不是默认加载的，往往加载前需要用户的许可。那么高宽的指定可以使邮件在没有图片撑出样子前也能保持良好的大小结构，alt 更可以明确告知图片的内容让用户选择是否下载它们。另外，很多不好渲染的文字，比如文字需要浮动在最右侧，文字很花哨，这时完全可以使用图片。
4. 样式全部改成行内，直接加在对应的HTML标签上。一些邮箱对于块级元素的支持不好，可能会打乱排版。这点很有必要，因为大部分邮件无法完整的继承样式，并且邮箱的默认样式也会对邮件产生一些头疼的干扰。所以如果你想让邮件在所有邮箱里看起来都一致，那么，所有的样式最好都单独指定，特别是IE的怪异模式下，单独设置字体和对其是必须的。
5. css样式不能使用嵌入和外联方式，一定要使用内联方式。无论是float属性还是清除浮动的clear都不能使用，也不要使用position定位。因为在Outlook 2007/2013下，不支持clear、float、left、right、top、bottom等标签。所以像：float:left、clear:both都不能使用。能用table、tr和td解决的就用table、tr和td。
   
6. 出于兼容性的考虑，经常需要使用到废弃