EDM 邮件营销 html&css编写建议和规范整理

最近有个EDM项目页面，也就是由服务端推送给客户的邮件页面。其中outlook等软件解析CSS的能力有限，所以这类页面需要遵循一定的规则和限制。过程中刚开始不了解，造成了一点点麻烦，现在顺便把这方面的东西整理出来。

EDM设计要求

1、宽度保持在600到800px范围；
2、页面大小建议为600*800；
3、html布局请使用表格布局，居中排版
4、css样式表不要使用外联式，尽量写入代码行中，不要使用滤镜和任何js脚本
5、html文件大小大概控制在15k以内，不宜过大
6、html编码请使用gb2312简体中文，国外邮件可用utf—8
7、尽量不用alt，因为里面可能含有敏感文字
8、EDM图片切割后统一放在根目录的images文件夹下
9、不要在文件中包含flash/JavaScript
10、使用word类文件直接转换为html格式不可用作EDM发送
11、图片上的链接尽量不要使用地图功能（map），此功能会使邮件被多数邮箱划分为垃圾邮件！
12、文件中的链接的长度不能超过255个字符，会导致无法追踪或链接错误
13、链接地址或图片地址不要包含空格
14、设计上不要使用过多的文字，版面尽量清晰，让主体更加吸引阅读者，已达到更高的点击率

EDM HTML编写建议和规范

EDM，英文全称：Electronic Direct Mail，一般都是HTML的邮件，所以我们需要考虑兼容各主流邮箱。以下几点是编写EDM HTML的一些建议和规范，希望能给大家带来帮助。

HTML代码和图片尽量不要超过100kb；
页面宽度推荐500px，最大不要超过800px；
使用table布局页面；
所有css必须写在元素标记内，且不能使用用于布局的css属性：display、position、float；
td必须设定宽度和高度：可以在第1行第1列设定宽、高，后面几列只需设宽，最后一列不用设任何值，第2行开始只在第1列定高，不需要设宽度，后面几列不用设任何值；
背景图（背景色除外）必须切成图片，用img代替，不要使用css的background属性；style内容里面background可以设置 color，但是img会被过滤，但是有一个很有意思的元素属性，也叫background，里面可以定义一个图片路径，这是个不错的替代方案，虽然这样功能有限，比如无法定位背景图片了，有总比没有好。例如要给一个单元格加一个背景，必须这样写：<td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>
img必须设定宽、高、边框border=”0”及css属性style=”vertical-align: bottom;”（去除上下图片间的间隙），另外应该添加图片代替文本alt=”图片说明”；
body中不要设定背景色，不然在转发邮件的时候，转发人写的信息背景色都会变为被转发邮件的背景色，影响浏览。如果一定要给邮件模板设定整体背景色，请在模板文件最外面加一个table，设定此table的背景色。
模板尽量不要使用背景图片。背景图片在某些邮件客户端或或web界面(如Gmail)中默认不显示。

无图片背景或只是颜色填充的背景区域内的文本文字，如果可用系统默认字体代替的，不要切成img；
必须用a添加链接，不要使用热点map;
style内容里面background可以设置color，但是img会被过滤，
不能使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML；
页面字符集必须为utf-8；

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

在网站推广与用户维护的时候，我们经常会用到邮件这种形式，发邮件成了日常运营中必不可少的工作，在制作邮件及编写邮件代码的过程中，为了保证邮件在各种邮箱中显示的一致性，有一些CSS规则需要遵守：
邮件代码不可以使用<style>、<link>，样式应当直接在标签内写style，尽量避免使用低于html4.0标准的写法，不可以使用class或id属性，所有文本元素都应当单独定义行高、字体颜色。写在页面内<style></style>中引用，但缺点是在邮件转发过程中经过web编辑器或邮件客户端的编辑，<style></style>被去掉，导致此列表样式变形。这种页面内引用的方式却能节省大量代码，使代码与内容比降低，同时也缩减了模板文件大小，有利于模板评分。
以下邮箱对邮件样式有默认定义或其他限制：

雅虎邮箱不支持table的html属性border;定义了文本元素的行高
QQ邮箱定义了td内的文字大小为12px以及文字链接的颜色
hotmail邮箱定义了文字与文字链接的颜色，且不支持定义背景图片以及margin属性
gmail邮箱定义了文字大小为12px以及文字链接的颜色，且不支持定义背景图片，不支持height+overflow方式截字且对省略号截字有换行BUG
sohu邮箱定义了文字链接的颜色
以下样式属性不允许使用(当然CSS3新属性更不能使用)：

list-style-image
z-index
:link :active :hover
visibility
position
top,left,right,bottom
opacity
cursor
margin
background-repeat
background-position
background-image
background
border-spacing
empty-cells
caption-side
direction
clip

由于接受邮件的软件不同（如：Outlook2003、Outlook2007、Foxmail等），也需注意一下几点

1、最好将字体大小定义在每个table里的td里
2、对于<p></p>字体大小和颜色定义在p里
3、table里的子table如果样式里有margin：0 auto；这个样式不管用，建议写全margin：0px 15px；

第五部分经验总结

门户的规则总是不断更新，当我们无法掌握准确的规则信息时，可以通过每次发送经验中的问题，总结出解决的办法。以下是一些常见或不易发现的问题。

问题1：

正确写法<a href=”http://www.hyattonthebund.cn/”target=_blank>

一个<a>链接,被分硬回车分成三部分,用户往往会这样做,尤其是word用户

问题2：

一个链接对应两个<a>第二个<a>没有结束,IE不会报错,但积少成多,造成邮件体积大,服务器负担变重.

问题3：

Td里面只有图片,老系统会在</td>前加个空格,造成图片撑裂的问题,解决方法,在抓取模板后在代码部分手动清除空格

问题4：

mailto 的正确写法,

问题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>

posted @ 2021-09-29 13:57 collin-liu 阅读(437) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

lcx

EDM 邮件营销 html&css编写建议和规范整理