EDM HTML编写建议和规范.docx

EDM HTML编写建议和规范.docx

《EDM HTML编写建议和规范.docx》由会员分享，可在线阅读，更多相关《EDM HTML编写建议和规范.docx（19页珍藏版）》请在冰豆网上搜索。

EDMHTML编写建议和规范

关于系统邮件的设计

2011-03-1423:

25

本文主要表达的意思是：

邮件的设计与网页的设计有着巨大的差别。

如果能用文字千万不要用图片；如果要用图片也千万记得把内容加入图片的Alt属性中；如果有可能给一个明确的退订链接。

       写这篇文章的直接诱因是今天下午那个巨崩溃的淘宝注册体验（注意，我说的是给我的体验巨差，没有说用户体验！

）。

电子商务产品的设计中，我们会最频繁的面对的一个模块就是EDM，在这个过程中积累了一些想法，一并记录下来。

      系统邮件可以简单分为2类：

提醒类（注册提醒、订阅提醒、生日或节日提醒）、EDM（电子邮件营销）。

     一、作为提醒类的系统邮件，我个人觉得比较简单，只要把握住：

简洁、直接2个要素就足够了。

提醒类邮件不需要花哨的修饰，不需要夸张的表达，因为对用户而言他唯一需要的就是知晓邮件的内容同时点击那个他需要的链接就足够了，建议使用文本形式制作。

      >>对于发信人：

表明身份即可，可以直接使用网站名称。

如：

Twitter、FlickrMail

      >>对于标题：

表明邮件的来处+需要处理的信息类型就足够了。

如：

kentzhuisnowfollowingyouontwitter！

      >>对于邮件头部：

需要有一个固定的头部，一般直接使用网站的LOGO就够了。

当然，也看到部分EDM放的是LOGO+网站导航。

建议不放，因为提醒邮件的作用在于让用户快速的完成任务，不是推广，区别与EDM邮件。

      >>对于邮件内容需要注意：

          1）千万不要使用图片！

这点我觉得是跟网页设计最大的区别，网页上设计师都会使用大且带颜色的按钮来吸引用户的视觉注意，但是在邮件设计中恰恰是个巨大的错误！

因为，几乎所有的邮件系统在接受邮件的时候都默认不加载图片的。

所以，在邮件中最有力的吸引视觉的手法是文字！

比如，淘宝的注册提醒邮件，使用了2个巨大的登录按钮，但是，默认的时候图片被屏蔽，于是整个邮件一片空白….

          2）链接地址千万使用明文的！

目前主流的提醒邮件链接是一个文字链同时附加一个明文链接地址的做法，也是可以的。

因为有的邮件系统可能会过滤文字超链接，所以设置成超链接和明文链接的地址一致的做法可以避免这一点。

         3）如果，你真的要使用图片，那么，请在这个图片上加注"Alt"属性。

这样即使图片被屏蔽了也能知道这个图片代表是嘛玩意。

比如，Flickr的提醒邮件在这点上就很棒。

      >>对于正文：

请千万简洁，表述一下这个是什么动作，用户该怎么做就OK了，其他的啰嗦的不要！

因为在这个模块里，用户的目标任务是单一的，你需要的是用更单纯的页面来让用户快速的完成这个任务，这就OK了。

      >>其他：

如果可以请告诉用户如何退订类似的邮件（别学流氓卓越亚马逊！

）；可以善意的告诉用户请勿直接回复该邮件。

      二、EDM邮件对用户而言，用户可能会更关注其内容的丰富性和视觉效果。

因此EDM邮件必然无法纯文字，且EDM邮件的主要目的是吸引用户去网站乃至与去购买，所以会更复杂一些。

      >>对于标题：

务必吸引人。

但是前提是要表述清楚内容同时不要过长。

      >>对于页面的宽度：

建议控制在650px以下。

个人比较倾向于使用650px，因为这个宽度不管是对于2栏还是3栏的设计都比较容易布局（刨除10px的间隙，然后再整除一下，很明显这个数字比较容易搞定）。

      >>对于页面内容：

因为使用图片无可避免，但是，重要的内容请务必使用文字，哪怕是使用了图片也务必给出文字标识！

这点上有啊的EDM做的很棒，有啊的EDM页头是LOGO+主导航的模式，LOGO使用了Alt属性，同时主导航是直接实用的文字链接的形式。

这样就算整个邮件图片被屏蔽了重要的信息还是可以显示出来。

      >>对于图片的使用：

建议给每个图片一个固定的宽度和高度及Alt属性标识，同时，注意不要使用背景图片。

      >>对于引导：

一般的EDM都会在web端留一个源地址，所以，请在你的EDM的明显位置给出一个超链接，“如果图片无法显示请点击这里查看”，这样就算被屏蔽了也能引导部分用户。

      >>关于一致性：

如果您会定期发送EDM（这句好似废话啊），请注意使用统一的风格，主要是页头和页尾的风格统一。

如果，你是有期刊号的请将期刊号和时间也一并加入！

      >>关于提醒：

请将如何退订、如何联系等必要的内容不吝的放在页面的底部，做个彬彬有礼的推广者。

同时，如果您愿意提供退订按钮，请务必试着实现一键退订….

      >>一些补充：

系统邮件的制作应该随时注意按照邮件的玩法来走，打开速度要快；页面不要过长，建议在2屏内。

关于具体内的排版与设计且听下回分解。

奉上有啊EDM一枚（故意屏蔽图片）

EDM设计要求

2011-03-1423:

31

前一段时间做了一些EDM，现在将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、设计上不要使用过多的文字，版面尽量清晰，让主体更加吸引阅读者，已达到更高的点击率

EDMHTML编写建议和规范

2011-03-1511:

02

EDM，英文全称：

ElectronicDirectMail，一般都是HTML的邮件，所以我们需要考虑兼容各主流邮箱。

以下几点是编写EDMHTML的一些建议和规范，希望能给大家带来帮助。

∙HTML代码和图片尽量不要超过100kb；

∙页面宽度推荐500px，最大不要超过800px；

∙使用table布局页面；

∙所有css必须写在元素标记内，且不能使用用于布局的css属性：

display、position、float；

∙td必须设定宽度和高度：

可以在第1行第1列设定宽、高，后面几列只需设宽，最后一列不用设任何值，第2行开始只在第1列定高，不需要设宽度，后面几列不用设任何值；

∙背景图（背景色除外）必须切成图片，用img代替，不要使用css的background属性；

∙img必须设定宽、高、边框border=”0”及css属性style=”vertical-align:

bottom;”（去除上下图片间的间隙），另外应该添加图片代替文本alt=”图片说明”；

bottom;"/>

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

∙必须用a添加链接，不要使用热点map;

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

∙页面字符集必须为utf-8；

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

我们的电子邮件设计标准，有做邮件推广打算的可以看下噢

2011-03-1423:

27

这个是我们公司的邮件设计标准，假如有人自己打算设计内容做邮件推广的可以看下，免得辛苦做的东西在别人眼里看的很别扭（企业考虑万级别的发送可以直接找我们做哦）

                                                               Edm邮件设计规范

1.设计文件提供要求：

（1）       邮件设计稿的Photoshop,Flash,Illustrator,CorelDraw等未合层文件；

（2）       使用的特殊字体文件――.ttf文件；

（3）       其他需要使用到的图片文件――.gif文件，.jpg文件或.tif文件。

2.设计要求：

（1）       邮件的宽度：

邮件的标准宽度为600像素，最宽不宜超过700像素，否则应经过修改。

（2）       邮件的高度：

邮件的高度没有具体要求，应以邮件内容多少而定，建议页面高度不宜过长而影响浏览，最长不要超过1200像素，即2.5屏，否则必须经过修改。

（3）       邮件的大小：

Ø      email正文的html文件大小（不包含图片或者flash）控制在20k以内；

Ø      内含图片的邮件包括图片在内文件大小应控制在300k以内；

（4）       禁止使用脚本

Ø      邮件中不支持任何脚本语言：

多数邮件客户端软件和webmail中默认不支持任何脚本语言；

Ø      邮件中不能使用分帧页面和I-frame。

（5）      客户应取得邮件当中所需使用的声音、图像以及其他内容的版权。

（6）     禁止使用外联样式表。

3.设计建议：

（1）       对于页面中的图片，应将超过30k的图片分割成小图片，以保证下载图片过程的顺畅；

（2）       图片个数不宜过多，建议在15个以内，Gif动画文件个数控制在2个以内；

（3）      不使用背景图片，复杂的背景图片不利于文字内容的浏览；

（4）       能够使用系统文字应尽量避免使用图片文字以减少文件大小；

（5）       网页上使用的中文系统文字的最小字号应保证在9像素，并且使用系统默认的宋体或黑体，避免使用其它的中文字体；

（6）       邮件的设计重点在上半部，以吸引阅读者的注意力；

（7）       邮件当中的所有点击应使用弹出新窗口。

（8）       邮件带有的链接数量建议在10个以内。

EDM邮件代码编写规范

2011-03-1511:

04

在网站推广与用户维护的时候，我们经常会用到邮件这种形式，发邮件成了日常运营中必不可少的工作，在制作邮件及编写邮件代码的过程中，为了保证邮件在各种邮箱中显示的一致性，有一些CSS规则需要遵守：

邮件代码不可以使用中引用，但缺点是在邮件转发过程中经过web编辑器或邮件客户端的编辑，被去掉，导致此列表样式变形。

这种页面内引用的方式却能节省大量代码，使代码与内容比降低，同时也缩减了模板文件大小，有利于模板评分。

5,图片样式与背景图片颜色使用

∙模板尽量不要使用背景图片。

背景图片在某些邮件客户端或或web界面（如Gmail）中默认不显示。

∙模板中每张图的地址都一定要用绝对地址，否则会不显示；每张图都要指定alt属性，可以在图片被拦截的时候显示图片的内容；每张图都要指定width宽度、height高度，在图片被拦截的时候，不会因图片大小无法读取而被打乱布局。

∙body中不要设定背景色，不然在转发邮件的时候，转发人写的信息背景色都会变为被转发邮件的背景色，影响浏览。

如果一定要给邮件模板设定整体背景色，请在模板文件最外面加一个table，设定此table的背景色。

cellpadding=”0″>

#520000;”> 

∙在切割模板的时候，要注意限制图片的大小和数量，不要为了效果使图片过大，会使邮件接收者打开过于缓慢，甚至直接关闭邮件。

∙更不要完全把模板切为图片形式，那样会在图片被拦截的时候使用户看不到内容，并且很可能会直接被邮件运营商或邮件客户端认定为垃圾邮件。

6,模板html标签规则

∙尽量不要使用提交表单；

∙padding和margin标签：

table中，某些邮件客户端或web界面（如Gmail），对浮动的标签（padding、margin等）支持很差，所以尽量不要使用；

∙float浮动标签：

某些邮件客户端不支持浮动属性，尽量避免使用。

∙在页面内调用的情况下，尽量不要使用

、

、
• 、

  、

  等有默认样式的标签，防止被隔离时页面布局混乱。

  7,动画与互动元素的处理

  ∙可以使用简单的gif动画来表达某些需要明显突出的要素，但要控制gif文件的大小，不要影响整封邮件的下载浏览速度；

  ∙不要使用flash动画或JavaScriptActive等，前些年邮件病毒泛滥，大部分邮件运营商都已经屏蔽了这些元素。

  8,使用所见即所得工具，在制作完成后手动优化代码

  ∙使用主流所见即所得工具可以节省大量时间、提高工作效率，但所见即所得工具生成的代码会有许多垃圾代码掺杂其中，最好在制作完成后手动优化。

  9,邮件附件夹带

  ∙邮件一定不要夹带附件，发送大量附件会占用大量珍贵的网络带宽，切大部分附件用户根本不会打开，这部分占用的带宽基本都是浪费的。

  ∙带有附件的邮件有很大可能被用户认为是病毒，对品牌产生不良影响。

  ∙在模板上设置下载按钮，链接到网站上下载页面，还可以给网站带来一部分流量，何乐而不为。

  发送EDM编写HTML需要注意的事项

  2011-03-1515:

  39

  1、全局规则之一，不要写