用QQ帐号登录 AirDesk宣传视频 世纪骏朗官方微信平台 世纪骏朗官方微博
技术支持QQ:876439
网站首页 解决方案 产品与服务 案例展示 新闻资讯 IT研究院 帮助中心 公司简介 联系我们 会员中心 查询中心

高端外贸网站解决方案

想要获得海外高质量的直接指向性询盘吗?想直接把您的产品卖给海外消费者吗?世纪骏朗帮您轻松拥有自己的智能型互联网营销平台,让更多的海外买家主动找到您。

云计算管理平台解决方案

世纪骏朗云计算管理平台为企业提供创新智能的商业模式,可以快速有效地启动可扩展服务并使其盈利。云解决方案支持灵活的云办公模式,将自由和生产效率提升至一个全新的境界。

社交网络营销解决方案

一个良好的社交媒体品牌应该是用户的朋友,能与之做到及时的互动。并由此制定整合的市场策略,进行长期的规划,通过多项沟通和对用户数据的分析,以达到最好的效果。

服务器托管维护解决方案

世纪骏朗为中小企业提供服务器托管、出租与维护服务,提供高质量的机房环境、服务器管理和监视、专业的运行维护服务,为企业节省大量人力物力,节约运营成本。
移动终端阅读
扫描左侧二维码
将本文转移至手机或
平板电脑等终端阅读
公司新闻
世纪骏朗关于2016春节放假安排通知
一直被模仿,从未被超越
世纪骏朗2013年度端午节放假通知
世纪骏朗2013版全新官网上线
沿着运河游无锡 体会历史人文情怀
浏览全部
产品与服务
高端网站建设 / 外贸营销网站建设
商业智能开发 / 云计算办公平台
SEO网站优化 / 搜索引擎优化
英文域名 / 中文域名 / 外贸域名
香港主机 / 海外主机 / 免备案主机
企业邮箱 / 外贸邮箱 / 邮箱套餐
浏览全部
案例展示
世纪骏朗案例展示 酒具外贸网站
winegiftsidea.com
世纪骏朗案例展示 硅胶外贸网站
huachuangsilicone.com
世纪骏朗案例展示 服装外贸网站
xytailoredapparel
世纪骏朗案例展示 LED外贸网站
stledlights.com
世纪骏朗案例展示 智能卡外贸网站
zhscard.com
世纪骏朗案例展示 LED外贸网站
ledlighting-sztv.com
浏览全部
行业动态
Flash将在2年内死亡 市场份额已经降至6%
2015手机病毒暴涨16倍 每天70万人次连接风险WiFi
Safari遭遇大Bug 可引起iPhone/Mac崩溃
做安全的也不安全了 360安全浏览器存在安全漏洞
来电 LightTalk - 腾讯推出能免流量拨打真实手机和固话的免费打电话软件 APP
浏览全部
帮助中心
什么是VPN?
Windows8操作系统如何添加VPN服务器
自己动手搭建VPN服务器(Win2003操作系统)
什么是CDN?
帮助新手了解Windows 8系统(视频)
浏览全部

EDM邮件营销 HTML&CSS编写建议和规范整理

  如果你喜欢这篇文章,记得要分享给你的好朋友哦!
本文分类: IT研究院 / 外贸网络营销       制造单位:世纪骏朗      生产日期:2013年9月15日

最近有个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://www.junlens.com/images/common/logo.gif”></td>
  • img必须设定宽、高、边框border=”0”及css属性style=”vertical-align: bottom;”(去除上下图片间的间隙),另外应该添加图片代替文本alt=”图片说明”;
  • body中不要设定背景色,不然在转发邮件的时候,转发人写的信息背景色都会变为被转发邮件的背景色,影响浏览。如果一定要给邮件模板设定整体背景色,请在模板文件最外面加一个table,设定此table的背景色。
  • 模板尽量不要使用背景图片。背景图片在某些邮件客户端或或web界面(如Gmail)中默认不显示。

<img alt=”" src=”" width=”" height=”" border=”0″ style=”vertical-align: bottom;”/>

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

<meta http-equiv=”Content-Type” content=”text/html; charset=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.junlens.com/”target=_blank>

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

问题2:

<td width=”127″><a href=”http://www.junlens.com/corpCheckAvailability.jsp” target=”_blank”><img src=”images/index_13.jpg” alt=”link1″ width=”165″ height=”22″ border=”0″ /></a><a href=”http://www.junlens.com/corpCheckAvailability.jsp” target=”_blank”>

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

 问题3:

<td width=”147″><img src=”images/index_14.jpg” alt=”link2″ width=”127″ height=”22″ border=”0″ />  </td>

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

 问题4:

mailto 的正确写法,

<a href=”mailto:yourname@163.com”>yourname@163.com</a>

 问题5:

对于纯英文邮件,发送时必须使用utf-8字符集进行发送,减少因字符集问题带来的无法阅读问题。

 其他经验总结:

 1-模板制作尽量用色块,做成类似插画的效果,少用过度,切图时用gif减少容量,减轻发送负担

 2-打开模板时要检查里面的js,尽量去掉js,因为有的客户端会报错,尤其是outlook

 3 -应该尽量在dw里重做客户模板,不要用ps直接生成的html

4-遇到图片裂痕问题,要在dw里面重新手动画table,手动添加图片解决

 5-一个<td></td>里面只能有一个img,有三个的话就容易出现上面4提到的问题,如果有三个图在一个td里面解决方法,新建一个三列一行的表格吧三个图分别放在单独的列里面

6-特殊符号●,Á,Ë,等等 用&#8226;等标准的xhtml替代

7-尽量不用背景图outlook里面显示有问题

8-系统抓取模板的时候也会出错,尽量从代码模式中找到问题

 9-链接打开方式为_blank

 10-不用map方式制作链接

11-css就近书写

<p style=”COLOR: #718685; FONT-FAMILY: Arial, Helvetica, >

文字文字文字文字文字文字</p>





本文标签: EDM    邮件营销    HTML    CSS    
服务与支持
客户服务QQ:
876439
技术支持QQ:
876439
常见问题查询
给我们发邮件
客户服务及技术支持:(QQ)876439 公司简介   |   渠道合作   |   工作机会   |   RSS订阅   |   Sitemap   |   站点地图
版权所有 © 2005-2017 无锡市世纪骏朗计算机技术有限公司(Junlens Inc.) 保留所有权利   |    主要业务:高端网站建设 / 高端外贸网站 / 外贸网站建设 / 商业智能开发

Powered by Junlens AirDesk