EDM 电子邮件营销的模板制作规范
最近在搞EDM，这种页面做起来比较搞，刚开始以为EBAY在故意为难人呢，原来这些规范真的是有用。大家分享下吧
1,模板编码语言选择
模板编码设定与使用的发送软件有关，一般来说，utf-8为较常用的选择，错误的编码会造成用户浏览的时候出现乱码；
2,不要使用div，使用最简单的嵌套table定位
Div+css是近几年新兴的web2.0定位方式，这种方式不适合在邮件模板切割中使用，不同邮件客户端或在线浏览器对css模型解释不尽相同，会造成错位或布局混乱等问题。
同时也不要使用单一table重复多次colspan，可能会被邮件客户端判断为结构过于复杂，归类为垃圾邮件；同时也容易被打乱布局而影响用户浏览。
3,图片与文本链接规则
模板中所有链接，都必须使用绝对路径；
链接长度不能超过255个字符，不能存在空格，也不能有中文字符，否则可能会导致连接无法追踪；
图片链接不要使用
标签，否则可能被邮件客户端判定为垃圾邮件，甚至被邮件运营商直接屏蔽。
模板中文本文字不能使用过大的字体，否则可能会被邮件客户端判定为垃圾邮件。
4,css样式编写
不要使用外部样式表引用，将样式表写入模板内部，如：
<td style=”padding:6px”>
<a href=”#” style=”font-size: 14px;color:#0c6485″>
<b>邮件模板</b>
</a>
</td>
如果模板有完全相同样式的列表型文本（如新闻列表等），可以吧样式表写在页面内<style></style>中引用，但缺点是在邮件转发过程中经过web编辑器或邮件客户端的编辑，<style></style>被去掉，导致此列表样式变形。这种页面内引用的方式却能节省大量代码，使代码与内容比降低，同时也缩减了模板文件大小，有利于模板评分。
5,图片样式与背景图片颜色使用
模板尽量不要使用背景图片。背景图片在某些邮件客户端或或web界面(如Gmail)中默认不显示。
模板中每张图的地址都一定要用绝对地址，否则会不显示；每张图都要指定alt属性，可以在图片被拦截的时候显示图片的内容；每张图都要指定width宽度、height高度，在图片被拦截的时候，不会因图片大小无法读取而被打乱布局。
body中不要设定背景色，不然在转发邮件的时候，转发人写的信息背景色都会变为被转发邮件的背景色，影响浏览。如果一定要给邮件模板设定整体背景色，请在模板文件最外面加一个table，设定此table的背景色。
<body>
<table width=”100%” border=”0″ cellspacing=”0″
cellpadding=”0″>
<tr>
<td style=”background-color: #520000;”> </td>
</tr>
</table>
</body>
在切割模板的时候，要注意限制图片的大小和数量，不要为了效果使图片过大，会使邮件接收者打开过于缓慢，甚至直接关闭邮件。
更不要完全把模板切为图片形式，那样会在图片被拦截的时候使用户看不到内容，并且很可能会直接被邮件运营商或邮件客户端认定为垃圾邮件。
6,模板html标签规则
尽量不要使用提交表单；
padding和margin标签：table中，某些邮件客户端或web界面（如Gmail），对浮动的标签(padding、margin等)支持很差，所以尽量不要使用；
float浮动标签：某些邮件客户端不支持浮动属性，尽量避免使用。
在页面内调用<style></style>的情况下，尽量不要使用<h2>、<ul>、<li>、<p>、<ol>等有默认样式的标签，防止<style></style>被隔离时页面布局混乱。
7,动画与互动元素的处理
可以使用简单的gif动画来表达某些需要明显突出的要素，但要控制gif文件的大小，不要影响整封邮件的下载浏览速度；
不要使用flash动画或JavaScript Active等，前些年邮件病毒泛滥，大部分邮件运营商都已经屏蔽了这些元素。
8,使用所见即所得工具，在制作完成后手动优化代码
使用主流所见即所得工具可以节省大量时间、提高工作效率，但所见即所得工具生成的代码会有许多垃圾代码掺杂其中，最好在制作完成后手动优化。
9,邮件附件夹带
邮件一定不要夹带附件，发送大量附件会占用大量珍贵的网络带宽，切大部分附件用户根本不会打开，这部分占用的带宽基本都是浪费的。
带有附件的邮件有很大可能被用户认为是病毒，对品牌产生不良影响。
在模板上设置下载按钮，链接到网站上下载页面，还可以给网站带来一部分流量，何乐而不为。
CSS之标签导致我的字体全变成斜体了
这几天在调整UCHOME的SPACE的页面，无意中调了一个东西，导致页面很多地方成了斜体。我用FONT-STYLE进行强制限制也不行，搞了我很长时间。到最后找到规律了，发现所有斜体的地方都是<em></em>标签中，难道是这个问题。
网上查了资料才知道，在HTML中，EM强调文本，通常用斜体显示。这个我还真没注意过。
在我的这个情况下，主要的作用是用来调用CLASS做显示的。解决办法就是，不想用斜体来显示的话，把EM改成SPAN。不过这样的话，我的工作量有点大，于是我在CSS中对这个标签做了重新定义，呵呵用的就是FONT-STYLE，这下起作用了。
具体这么些的，大家来COPY吧
em{font-style:normal}
什么是css框架
框架就是一个你可以用于你的网站项目的基本的概念上的结构体。
css框架通常只是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如：
typography.css?基本排版规则
grid.css?基于网格的布局
layout.css?通常的布局
form.css?for 表单样式
general.css?更多通用规则
下面一起来了解一下各种不同的CSS框架吧:
1.960 Grid System
960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。
2.WYMstyle CSS Framework
这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。
3.YAML CSS Framework
Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。
4.YUI Grids CSS
基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。
有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法:
负Margin技术
使用度量单位em
清除布局的浮动
5.Logicss?Framework
Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset 文件或是用“*”)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局网格利用css代码生成工具。
6.CleverCSS
CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比 CSS2整洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。
7.Elements CSS Frameworks
Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读?概述了解更多。
8.Blueprint CSS
Blueprint?是一个?CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。
9.Schema Web Design Framework
Schema是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。
10.Emastic CSS Framework
Emastic?是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化，在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。
11.That Standards Guy CSS Framework
* 只能调用单个样式文件
* 主样式需要取得CSS认证(WCAG 1.0)；
* [...]
css文件后面为什么有参数
客户端会缓存这些css或js文件，因此每次升级了js或css文件后，改变版本号，客户端浏览器就会重新下载新的js或css文件
举例来说:
可以看成是css的一个版本号，如果css改动过，担心浏览器本地css文件没有及时更新而导致页面没有出现相应效果时，就可以通过修改这个？后面的号码来达到使浏览器重新下载最新的css文档！
