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把页面变灰,寄托我们的哀思
方法有很多种,这里做个总结
第一:
最快速度把自己网站变灰,只支持IE~
在CSS文件或style中加入
*{filter:gray; color:gray;}
第二:
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
这个比 filter:gray; 好,可解决与 position: relative; 的冲突,加在 css 第一行即可
第三:
指定flash层样式,加入:*{filter: Gray;}
有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的 和 之间插入:
什么是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文档!
多浏览器的css实现半透明div
很好用的多浏览器透明代码
<style>
.filter
{
border:1px solid #C79810;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)*/
width:200px;height:200px;
}
</style>
<div class=”filter”>测试代码</div>?
清除DIV浮动元素-clear
clear 属性定义了元素的哪边上不允许出现浮动元素(出现在其他元素中的图形和文本元素称为浮动元素(floating element))。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
left
在左侧不允许浮动元素
right
在右侧不允许浮动元素
both
在左右两侧均不允许浮动元素
none
默认。允许浮动元素出现在两侧。
h2{clear: right}
address{clear: both}
如何用CSS实现背景半透明效果
HTML代码:
<div class=”alpha1″>
<div class=”ap2″>
<p>背景为红色(#FF0000),透明度20%。</p>
</div>
</div>
CSS代码:
.alpha1{
width:300px;
height:200px;
background-color:#FF0000;
filter: Alpha(Opacity=30);
}
.ap2{
position:relative;
}
这样基本就可以实现啦,也不用担心定位和自适应问题,最大的问题是仅IE支持。
如果兼容FF、OP怎么写呢?首先,上面这种定法是不行的啦,那就只能用两个层重叠的方法啦。
改下页面结构与CSS样式:
HTML代码:
<div class=”alpha1″>
<div class=”ap2″>
<p>背景为红色(#FF0000),透明度20%。</p>
</div>
<!–[if IE]><![if !IE]><![endif]–> <div class=”alpha2″></div> <!–[if IE]><![endif]><![endif]–>
</div>
CSS代码:
.alpha1,.alpha2{
width:100%;
height:auto;
min-height:250px;/* 必需 */
_height:250px;/* 必需 */
overflow:hidden;
background-color:#FF0000;/* 背景色 */
}
.alpha1{
filter:alpha(opacity=20); /* IE 透明度20% */
}
.alpha2{
background-color:#FFFFFF;
-moz-opacity:0.8; /* Moz FF 透明度20%*/
opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/
}
.ap2{
position:absolute;
}
如何使用CSS截取字符串
如果字符到达指定宽度,就会自动截取,后面加上省略号。
在CSS样式里加入如下语句即可:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
CSS的技巧整理
字体大小使用px
在一行内声明CSS
对比下面两个:
h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
第二种看起来的确格式化,但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。
以前我也是写成类似第二种方式,但是逐渐发现就像文章说的一样,没多大用。一行看起来又爽快又省地方还能让文件更小。
分块书写代码
这样书写代码可以让CSS更页面化,在出现问题时候可以最短时间内找到问题所在。就像下面这样:
#content {float:left;}
#content p { … }
#sidebar {float:left;}
#sidebar p { … }
#footer {clear:both;}
#sidebar p { … }
浏览器支持
只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说不用使用盒模型Hack。如果只针对流行浏览器的话,只需要很少的Hack就能实现同样的效果。
我注意了一下网易新版主页的CSS,其中竟然一个!important或者Hack都没有,可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然,调试的时间会多一些。
包含浮动元素
所有在容器内的内容都应该被设计为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。
理解Overflow
如果页面中有两个浮动元素,在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding设置混乱了,不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。
允许块元素自动填充空白
缩写CSS
很多人都margin-top、margin-right、margin-bottom、margin-left的用上一堆。其实这是最基本的,margin可以直接简写为margin:上 右 下 左值。可以在这里看到CSS缩写的总结。
避免不必要的选择器
把样式的选择器减少到最少。如果你发现自己不停的写ul li {}或者table tr td{}就证明写的过于详细了。更少的选择器会让你更容易的发现问题。

