制作EDM电子邮件页面小结

2017-01-20 admin 25
 EDM 是 Email Direct Marketing 的缩写,即电子邮件营销,简称为邮件营销。是利用电子邮件(Email)与受众客户进行商业交流的一种直销方式。同时也广泛的应用于网络营销领域。电子邮件营销是网络营销手法中最古老的一种,可以说电子邮件营销比绝大部分网站推广和网络营销手法都要老。 


  说到EDM营销,就必须有EDM软件对EDM内容进行发送,企业可以通过使用EDM软件向目标客户发送EDM邮件,建立同目标顾客的沟通渠道,向其直接传达相关信息,用来促进销售。EDM软件有多种用途,可以发送电子广告、产品信息、销售信息、市场调查、市场推广活动信息等。 


      作为最古老的一种网络营销方式,所以很多地方与我们平时按照W3C标准制作的网页是截然不同的,这几天为了制作一个EDM的页面,走了不少的弯路,所以写点东西记录下,下次记得不犯重复错误了。 


1.页宽和图片大小

收发邮件的客户端各有不同,所以要注意用户体验,图片和页面设计不过过大或者过小,页面宽度推荐500px到800px左右,居中显示,注意背景与主题的搭配; 


2、布局页面;

各种布局我都试过了,outlook连基本的css都很多不支持,尤其是用于布局的css属性:display、position、float;所以,不要犹豫了,必须的用table,此时,可能会遇到多层表格嵌套的问题, 如果不想邮件被转发后支离破碎,邮件最好不要用多个  table  拼装,而是要嵌套起来  。记得不要给table写height,其实这没什么用,t abel的高是td撑起来的 ,但是容易造成不乐观的影响。 永远都不要忘记给tabel加上 border="0" cellpadding="0" cellspacing="0" 的属性,当然,你还可以在style中重写一次,以防万一。


3.细节规范

所有css必须写在元素标记内,背景图必须切成图片,用img代替,不要使用css的background属性,不被支持,但是tabel和body背景色还是可以的,因为他们有bgcolor属性,这也是推荐用tabel布局的原因之一。

img必须设定宽、高、边框及css属性style=”vertical-align: bottom;”(去除上下图片间的间隙),另外应该添加图片代替文本alt=”图片说明”。同时,你可能还会遇到一些图片间距的问题,这个时候有些属性你可以试试是不是他们造成的:line-height\font-size\display\border\margin\padding;还有父级的一些属性影响,如:height、width。这些可能没有定义,自动生成导致破坏你的页面布局。

  

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

必须用a添加链接,不要使用热点map,a标签也是有那么些兼容问题的,如在office上面显示和在浏览器上显示就不一样,尤其用outlook发送,链接地址的不同,a链接可能转成span表情,所以url一定要规范。

 

    还有边框的问题,不要设计成圆角,然后切成图去拼接,事实上,outlook和各大浏览器对盒子模型解析是不一样的,你无法保证拼接的效果,就果断的放弃圆角吧。

注意td和tr的高度,容易产生空隙,影响布局。有时候会发生很怪异的高度在浏览器中变化事情,到现在我还没有找到特定出现的原因。

    把样式都写成style=""的形式,保证css不会被过滤、覆盖掉。不要简写颜色,比如#fff,要完整写成#ffffff。简写的颜色在IE怪异模式下会出些小问题。竟可能不要使用span,因为其在某些邮箱里会导致换行。

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

页面字符集写成utf-8;<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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