Email页面代码书写建议及规范
2008-11-15 18:30
441 查看
Email页面代码书写建议及规范
2008.04.30 - 2条评论 »前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的HTML邮件》,很不错。
在这里,我也要把我的经验和大家分享一下。
众所周知,Email是一项最古老的互联网应用之一。
因此,不少邮件系统还是会采用一些比较古老的处理方式,导致前端方面很多新的技术、新的特性无法被支持。
而且各个邮箱系统以及客户端的差异,也会使email的最终呈现出现很大的偏差。
HTML细节
就目前来说,如果要做一个email页面,为了保证最大的兼容性,有以下几点需要注意:对于纯文本邮件:
邮件标题不要超过18个字;
每行不要超过34个字。
对于HTML邮件:
邮件标题不要超过18个字;
HTML代码和图片尽量不要超过50kb;
页面宽度推荐500px,最大不要超过600px;
避免使用边缘的、非主流的HTML技术;
不使用css来布局,应该使用表格来布局;
不使用外联的css样式,而使用font标签来定义样式,定义链接颜色时也是如此,写法如下:
<font style="font-family:arial,helvetica; font-size:10pt; color:#000000"> ... </font>
不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ;
body和meta之类的标签是可以无视的,因为在很多邮箱系统里它会被过滤;
如果整个邮件有用到背景色或背景图,建议用以下方式处理:
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr> <td width="100%" height="100%" bgcolor="....."> <!--- 邮件内容 --> </td> </tr> </table>
有背景图片的时候,我们要采用这种写法:
<table background="background.gif" cellspacing="0" cellpadding="0">
图片屏蔽
由于图片可以用来侦测邮件的打开率和email地址的有效性。不少邮件客户端都会默认把邮件中的图片屏蔽,用户需要再点一下才能显示图片。
Blocking Issue | AOL v. 6.0-9.0 | Gmail | Hotmail | Yahoo! | Outlook 2000/XP | Outlook 2003 | Outlook Express w/SP2 | Outlook Express w/o SP2 |
外链的图片是否默认被屏蔽 | Yes | Yes | No | No | No | Yes | Yes | No |
用户能否设置是否屏蔽图片 | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes |
能不能让用户点击某个按钮就显示邮件中的图片 | Yes | Yes | Yes | No | No | Yes | Yes | N/A |
当发件人在用户的联系人列表里时是否默认显示图片 | Yes | No | Yes | No | Yes | Yes | Yes | Yes |
发件人在ISP白名单中时能不能默认显示图片(国内好像没这个概念) | Yes | N/A | Yes | No | N/A | N/A | N/A | N/A |
图片被屏蔽时是否显示alt属性 | No | Yes | No | No | No | No | No | N/A |
预览时显示windows的主题样式 | No | No | No | No | Yes | Yes | Yes | Yes |
一旦图片被屏蔽,整个邮件就会变得面目全非,这里有以下一些建议:
重要内容尽量避免使用图片,比如标题、链接等;
制作一份和邮件内容一样的web页面,然后在邮件顶部写一句话,类似:“如果您无法查看邮件内容,请点击这里查看”;
所有图片都要加上alt属性;
所有的图片都要定义高和宽;
通知收件人把你的发件地址加入白名单。
Outlook 2007的限制
由于outlook 2007使用了word的渲染引擎来展现邮件内容,所以很多HTML属性没法得到支持了,比如:背景图片(这一点很重要!)
css浮动和定位(这个没啥用)
自定义列表项的图像(这个也没啥用)
Flash(反正不放)
GIF动画
图片的alt属性(值得注意)
表单(反正不放)
下载这个pdf查看详细介绍。这些细节还是应该注意一下。
附:Email客户端的CSS支持情况
本资料来自国外某邮件营销公司,所以缺乏国内邮件客户端的数据。
<style> 标签
gmail | Hotmail | Yahoo | Live Mail | Outlook/OE | AOL | Lotus Notes | Thunderbird | Mac Email | Entourage | Eudora | |
<head>中的<style>标签 | No | No | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
<body>中的<style>标签 | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
gmail | Hotmail | Yahoo | Live Mail | Outlook/OE | AOL | Lotus Notes | Thunderbird | Mac Email | Entourage | Eudora | |
<head>中的<link>标签 | N o | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | No |
<body>中的<link>标签 | No | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | No |
gmail | Hotmail | Yahoo | Live Mail | Outlook/OE | AOL | Lotus Notes | Thunderbird | Mac Email | Entourage | Eudora | |
* | No | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | No |
e | No | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | No |
e > f | No | No | Yes | No | No | No | No | Yes | Yes | Yes | No |
e:link | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
e:active, e:hover | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
e:focus | No | No | Yes | No | No | No | No | Yes | Yes | Yes | No |
e + f | No | Yes | Yes | No | No | No | No | Yes | Yes | No | No |
e [foo] | No | Yes | Yes | No | No | No | No | Yes | Yes | No | No |
e.className | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
e#id | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
e:first-line | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
e:first-letter | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
gmail | Hotmail | Yahoo | Live Mail | Outlook/OE | AOL | Lotus Notes | Thunderbird | Mac Email | Entourage | Eudora | |
background-color | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
background-image | No | Yes, but | Yes | No | Yes * | Yes | Yes | Yes | Yes | Yes | No |
background-position | No | No | No | No | Yes * | Yes | No | Yes | Yes | Yes | No |
background-repeat | No | Yes | Yes | No | Yes * | Yes | No | Yes | Yes | Yes | No |
border | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
border-collapse | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | No | No |
border-spacing | Yes | No | Yes | No | No | No | No | Yes | Yes | No | No |
bottom | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
caption-side | Yes | No | Yes | No | No | No | No | Yes | No | No | No |
clip | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
color | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
cursor | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | No | No |
direction | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No | No |
display | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No | No |
empty-cells | Yes | No | Yes | No | No | No | No | Yes | Yes | No | No |
filter | No | No | Yes | Yes | No | No | No | No | No | No | No |
float | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
font-family | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
font-size | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
font-style | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
font-variant | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
font-weight | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
height | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
left | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
letter-spacing | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
line-height | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
list-style-image | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
list-style-position | Yes | No | No | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
list-style-type | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
margin | Yes | No | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
opacity | No | No | Yes | Yes | No | No | No | Yes | Yes | No | No |
overflow | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
padding | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
position | No | No | No | No | Yes | Yes | No | Yes | Yes | Yes | No |
right | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
table-layout | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
text-align | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
text-decoration | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
text-indent | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
text-transform | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
top | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
vertical-align | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
visibility | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
white-space | Yes | Yes | Yes | No | No | No | No | Yes | Yes | Yes | No |
width | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
word-spacing | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
z-index | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
相关文章推荐
- Email页面代码书写建议及规范
- iOS中书写代码规范34条小建议:
- iOS中书写代码规范35条小建议
- iOS中书写代码规范35条小建议:
- iOS中书写代码规范35条小建议
- iOS中书写代码规范34条小建议
- iOS中书写代码规范35条小建议:
- iOS中书写代码规范35条小建议
- 伪代码的阅读与书写规范
- CSS代码书写规范究极指南
- iOS代码书写规范
- iOS书写代码规范
- Java代码书写规范
- 编写高质量的CSS代码,规范建议
- JavaScript常用代码书写规范的超全面总结
- JavaScript-总结常用代码书写规范
- iOS开发之代码规范小建议
- [ASP.NET] 基于.NET项目的代码书写规范要求书
- Web前端代码规范与页面布局
- Oracle的书写规范和优化建议