制作EDM电子邮件页面小结

转自：http://my.oschina.net/lianyi/blog?disp=2&p=2

       EDM 是 Email Direct Marketing 的缩写，即电子邮件营销，简称为邮件营销。是利用电子邮件（Email）与受众客户进行商业交流的一种直销方式。同时也广泛的应用于网络营销领域。电子邮 件营销是网络营销手法中最古老的一种，可以说电子邮件营销比绝大部分网站推广和网络营销手法都要老。

　　说到EDM营销，就必 须有EDM软件对EDM内容进行发送，企业可以通过使用EDM软件向目标客户发送EDM邮件，建立同目标顾客的沟通渠道，向其直接传达相关信息，用来促进 销售。EDM软件有多种用途，可以发送电子广告、产品信息、销售信息、市场调查、市场推广活动信息等。

      作为最古老的一种网络营销方式，所以很多地方与我们平时按照W3C标准制作的网页是截然不同的，这几天为了制作一个EDM的页面，走了不少的弯路，所以写点东西记录下，下次记得不犯重复错误了。

1.页宽和图片大小

收发邮件的客户端各有不同，所以要注意用户体验，图片和页面设计不过过大或者过小，页面宽度推荐500px到800px左右，居中显示，注意背景与主题的搭配；

2、布局页面；

各种布局我都试过了，outlook连基本的css都很多不支持，尤其是用于布局的css属性：display、position、float；所以，不要犹豫了，必须的用table,此时，可能会遇到多层表格嵌套的问题， 如果不想邮件被转发后支离破碎，邮件最好不要用多个  table  拼装，而是要嵌套起来  。记得不要给table写height，其实这没什么用，t abel的高是td撑起来的 ，但是容易造成不乐观的影响。 永远都不要忘记给tabel加上 border="0" cellpadding="0" cellspacing="0" 的属性，当然，你还可以在style中重写一次，以防万一。

 

3.细节规范

所有css必须写在元素标记内，背景图必须切成图片，用img代替，不要使用css的background属性，不被支持，但是tabel和body背景色还是可以的，因为他们有bgcolor属性，这也是推荐用tabel布局的原因之一。

img必须设定宽、高、边 框及css属性style=”vertical-align: bottom;”（去除上下图片间的间隙），另外应该添加图片代替文本alt=”图片说明”。同时，你可能还会遇到一些图片间距的问题，这个时候有些属性 你可以试试是不是他们造成的：line-height\font-size\display\border\margin\padding；还有父级的一 些属性影响，如：height、width。这些可能没有定义，自动生成导致破坏你的页面布局。

 

    无图片背景或只是颜色填充的背景区域内的文本文字，如果可用系统默认字体代替的，不要切成img；

必须用a添加链接，不要使用热点map，a标签也是有那么些兼容问题的，如在office上面显示和在浏览器上显示就不一样，尤其用outlook发送，链接地址的不同，a链接可能转成span表情，所以url一定要规范。

 

    还有边框的问题，不要设计成圆角，然后切成图去拼接，事实上，outlook和各大浏览器对盒子模型解析是不一样的，你无法保证拼接的效果，就果断的放弃圆角吧。

注意td和tr的高度，容易产生空隙，影响布局。有时候会发生很怪异的高度在浏览器中变化事情，到现在我还没有找到特定出现的原因。

    把样式都写成style=""的形式，保证css不会被过滤、覆盖掉。不要简写颜色，比如#fff，要完整写成#ffffff。简写的颜色在IE怪异模式下会出些小问题。竟可能不要使用span，因为其在某些邮箱里会导致换行。

不能使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML；

页面字符集写成utf-8；<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

文件保存编码类型也必须为utf-8。