最近在做一些活动项目，时不时会有邮件发送页面（简称EDM）的制作，做好的页面，经过无数次的测试，总结出下面的EDM制作标准，现与大家分享下，希望对大家有帮助。
第一部分 邮件模板概括
1、邮件类型：
1) 新闻订阅；一般文字内容居多，每段文字具有相应的链接可供点击，同时加入少量图片进行点缀，模板顶部带有显著的公司logo和邮件发送内容标示，模板底部具有公司的联系方式，免责申明等栏目，邮件通常大于50K。
2) 产品订阅；一般图片内容为主，图片带有相应的链接可供点击，目的是有针对性的介绍最新的产品或活动信息，由于采用图片为主的形式，邮件大小通常在20k以内。
注：以上类型的模板制作均采用标准的html语言，并插入具有绝对地址链接的图片和链接。
2、邮件模板显示尺寸：
考虑到现在显示器不同分辩率的问题，一般建议邮件模板的显示宽度为800px至1024px之间；模板高度在1280px左右（即用户之需要一次滚动屏幕就可浏览全部内容）。
模板最佳尺寸：显示宽度400px-800px，模板高度控制在一屏以内。
3、标准邮件模板中需包括以下内容：
1) 标准页眉页脚应用
必须含有邮件无法正常显示的引导入口，如下的类似文字，如：
如果无法浏览此邮件，请点击这里；
另外，最好建议用户将发件人加入联系人列表。
必须含有明显的退订链接标示（退订链接可直接由发送系统提供或链接到用户自己提供的退订链接）；
2) 其他页眉页脚应用：
表明邮件的主要目的
邮件退订
选择订阅内容
修改订阅邮箱
隐私保护说明
企业服务标准等
注：目前网民使用的主流的浏览器有：
微软IE6 / IE7 / IE8 / IE9、以IE为核心的遨游/Green、Google Chrome及FireFox，使用覆盖率超过90%；经过模板制作规范的建议修改后，以上浏览器均能正常显示模板。
第二部分 静态页面的制作
一、内容比例
邮件模板中，图片及文字应具有平衡的比例，从门户的判断机制上来看，邮件正文中文本的比例越合理，被判断为垃圾邮件的可能性越小，尤其是网易。通常我们建议根据邮件的内容将非效果性文字都以文本的形式呈现。
二、 切图方式
1、页面制作方式目前分为table与div两种方式
要确保邮件模板在不同的邮件客户端中显示效果保持一致，需采用table格式的切割；而div格式由于有些属性不被邮件客户端完全支持，这种方式不适合在EDM邮件模板切割中使用，不同邮件客户端或在线浏览器对css模型解释不尽相同，会造成错位或布局混乱等问题，所以建议避免使用。同时也不要使用单一table重复多次colspan，可能会被邮件客户端判断为结构过于复杂，归类为垃圾邮件；同时也容易被打乱布局而影响用户浏览。
2、切割图片时，在不影响图片失真的情况下，所切割图片应尽可能的优化
图片优化后，容量减小，保证了用户打开邮件时，在最短时间内看到感兴趣的图片，提高邮件模板的阅读率；另外，当遇到页面中有动画时，可将动画导出为gif图片；对于页面中的flash动画，目前大部分邮件客户端暂不支持正常的显示。
3、插入的图片要定义高和宽
通常图片的高和宽都使用width和height进行定义，但在qq邮箱中会清除页面里所有图片的高和宽，导致页面显示变形；所以图片的高和宽建议采用style中定义的方式，如： style=”width:xxx;height:xxx”。
4、不使用背景图片
在outlook中，背景图片将无法显示，其他邮件客户端可正确显示背景图片。
5、图片的地址链接
不采用map标记形式，因为map标记在outlook中无法进行正常的点击，即无法打不开该链接指向的网址。
6、不使用word转换的html文件作为模板
由于word转换后会在html中插入大量无用代码，导致邮件出现显示错乱和易被拦截等问题。同时，建议对word文档手工转换成html网页后，加入相关图片，以更好的吸引客户眼球。
三、CSS样式定义
1、CSS样式的添加可分为两种方式：
1) 外部调用样式；
2) 内部调用样式；
3) HTML Tag中直接定义样式。
2、对以上内容分别进行相关阐述
1) 外部调用样式，指在网页的<head>中写出样式表文件的名称和路径，例如：
<head>
<link href=”all.css” rel=”stylesheet”/>
</head>
2) 内部调用样式，指在页面的头部，以<style>开头，以</style>结尾的样式定义。例如：
<head>
<style>
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0 auto;
padding:0px;
color:#000000;
}
</style>
</head>
3) HTML Tag中直接定义样式，指直接在html tag标记中写style定义。例如：
<span style=”font-family:Arial;font-size:12px;color:#6F6E6E”>文字信息</span>
第一种和第二种方式为制作网页的常用方式，但这两种方式在邮件客户端中某些定义将无法生效。第三种方式在邮件客户端中显示兼容性最高，但手工制作繁琐，所以系统集成了“网页抓取”功能，抓取功能将自动把第一种和第二种网页转换成第三种网页的样式定义模式，从而确保了模板显示的最大兼容性。
3、其他
Alt值——在主要的图片中定义Alt，标注上图片中的文字内容，在图片无法正常显示时，用户仍然可以看到图片所要传达的主题内容。
在页面内调用<style></style>的情况下，尽量不要使用<h2>、<ul>、<li>、<p>、<ol>等有默认样式的标签，防止<style></style>被隔离时页面布局混乱。
模板中所有链接，都必须使用绝对路径；EDM邮件营销发送的邮件链接长度不能超过255个字符，不能存在空格，也不能有中文字符，否则可能会导致连接无法追踪；图片链接不要使用标签，否则可能被邮件客户端判定为垃圾邮件，甚至被邮件运营商直接屏蔽。模板中文本文字不能使用过大的字体，否则可能会被邮件客户端判定为垃圾邮件.
第三部分 页面的测试
页面制作完毕以后，需上传到web专用服务器
测试时页面抓取分为：
⑴、url抓取（url抓取是系统专为提供模板显示兼容性而设计的功能，建议使用）
⑵、html代码复制，使用代码复制要求网页中的链接或引用都使用绝对地址，否则网页中的图片将无法在邮件中正常显示；）
第四部分 查看邮箱
邮件模板的发送有可能发生的三种情况
1、邮件进入收件箱；
2、邮件进入垃圾箱；
3、邮件被拒收；
出现以上情况后，建议对邮件做如下调整：
1、适当更换邮件主题；
2、删除模板中可能为国家规定的政治敏感词汇或色情、推销等词汇；
3、模板内容采用文字和图片混合排列的方式；
4、删除模板中不必要的链接，邮件中的链接不易过多，建议少于10个；
第五部分 经验总结
门户的规则总是不断更新，当我们无法掌握准确的规则信息时，可以通过每次发送经验中的问题，总结出解决的办法。以下是一些常见或不易发现的问题。
问题1：
正确写法<a href=”http://www.hyattonthebund.cn/”target=_blank>
一个<a>链接,被分硬回车分成三部分,用户往往会这样做,尤其是word用户
问题2：
<td width=”127″><a href=”http://www.hyatt.com/hyatt/reservations/flow1/corpCheckAvailability.jsp” target=”_blank”><img src=”images/index_13.jpg” alt=”link1″ width=”165″ height=”22″ border=”0″ /></a><a href=”http://www.hyatt.com/hyatt/reservations/flow1/corpCheckAvailability.jsp” target=”_blank”>
一个链接对应两个<a>第二个<a>没有结束,IE不会报错,但积少成多,造成邮件体积大,服务器负担变重.
问题3：
<td width=”147″><img src=”images/index_14.jpg” alt=”link2″ width=”127″ height=”22″ border=”0″ /> </td>
Td里面只有图片,老系统会在</td>前加个空格,造成图片撑裂的问题,解决方法,在抓取模板后在代码部分手动清除空格
问题4：
mailto 的正确写法,
<a href=”mailto:joe55@sogou.com”>joe55@sogou.com</a>
问题5：
对于纯英文邮件，发送时必须使用utf-8字符集进行发送，减少因字符集问题带来的无法阅读问题。
其他经验总结：
1-模板制作尽量用色块,做成类似插画的效果,少用过度,切图时用gif减少容量,减轻发送负担
2-打开模板时要检查里面的js,尽量去掉js,因为有的客户端会报错,尤其是outlook
3 -应该尽量在dw里重做客户模板,不要用ps直接生成的html
4-遇到图片裂痕问题,要在dw里面重新手动画table,手动添加图片解决
5-一个<td></td>里面只能有一个img,有三个的话就容易出现上面4提到的问题,如果有三个图在一个td里面解决方法,新建一个三列一行的表格吧三个图分别放在单独的列里面
6-特殊符号●,Á,Ë,等等 用•等标准的xhtml替代
7-尽量不用背景图outlook里面显示有问题
8-系统抓取模板的时候也会出错,尽量从代码模式中找到问题
9-链接打开方式为_blank
10-不用map方式制作链接
11-css就近书写
<p style=”COLOR: #718685; FONT-FAMILY: Arial, Helvetica, >
文字文字文字文字文字文字</p>
备注：邮件模板的制作将随着门户规则的更新而有所变动，请注意。
【个人补充】
由于接受邮件的软件不同（如：Outlook2003、Outlook2007、Foxmail等），也需注意一下几点
1、最好将字体大小定义在每个table里的td里
2、对于<p></p>字体大小和颜色定义在p里
3、table里的子table如果样式里有margin：0 auto；这个样式不管用，建议写全margin：0px 15px；
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
