如何编写兼容各主流邮箱的HTML邮件

最近一个需求中遇到了发送邮件的功能,发现很多css在邮件里是有限制的,通过对以前的各位达人总结的学习,解决了这个问题,现转载如下。

 

 

几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通,如注册确认、营销推广。这些由站方发给会员的信件,往往纯文本格式已不能满足界面和交互的要求,这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST在本站的页面,是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大的不同。因为,各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问,JS代码是被严格过滤掉的,包括所有的事件监听属性,如onclick、onmouseover,这是基于邮件安全性的考虑。不仅如此,CSS代码也会被部分过滤。本人要讲的就是如何编写不被各大主流邮箱过滤的,能正常显示的HTML邮件。

首先,我们先来看看邮箱是如何展现HTML邮件的。我本人没有做过邮件系统,况且各大邮箱后台的过滤算法也不是那么容易可以让外人知道的。所以,我们只能通过前端展现,来推测哪些是被邮箱接受的写法,而哪些又是会被过滤掉的。通过对gmail、hotmail、163、sohu、sina几个邮箱的分析,我把邮箱分为两类:
第一类包括gmail、hotmail、sohu,这类邮箱,邮件内容是被布局在整个邮箱页面中的某个div中。 gmail.png

第二类,包括163、sina,这类邮箱,邮件内容被布局在独立的iframe中。

 

sinamail.png

熟悉HTML的朋友都知道,iframe内容是作为独立的document,与父页面的元素和CSS是互不相干的,几乎可以作为一个独立的页面来对待。而如果如果邮件内容是在div中,那么邮件内容是作为整个邮箱页面的一个组成部分。显然,以iframe作为展现方式的邮箱,对邮件内容就会宽容许多,因为它给了你一个足够独立的表现空间。而div就不是那么客气了。试想一下,如果你在你的邮件里写上这么一句CSS,是不是整个邮箱的展现页面上字体都变成20px而因此乱了套:
<style type=”text/css”>
body {font-size:20px}
</style>
我们需要写兼容各邮箱的统一邮件模板,那么必然就要避开以上这种外联CSS写法,另外类似于float、position等成非正常内容流的style也会被过滤,假如你写了,很可能会影响到外部邮箱的表现。

下面我列出一些编写原则:
1、全局规则之一,不要写<style>标签、不要写class,所有CSS都用style属性,什么元素需要什么样式就用style写内联的CSS。
2、全局规则之二,少用图片,邮箱不会过滤你的img标签,但是系统往往会默认不载入陌生来信的图片,如果用了很多图片的邮件,在片没有载入的情况下,丑陋无比甚至看不清内容,没耐心的用户直接就删除了。图片上务必加上alt。
3、不要在style里面写float、position这些style,因为会被过滤。那么如何实现左右布局或者更复杂的布局呢?用table。
4、style内容里面background可以设置color,但是img会被过滤,就是说不能通过CSS来设置背景图片了。但是有一个很有意思的元素属性,也叫background,里面可以定义一个图片路径,这是个不错的替代方案,虽然这样功能有限,比如无法定位背景图片了,有总比没有好。例如要给一个单元格加一个背景,必须这样写:
<td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>
5、div模式的邮箱不支持flash,iframe模式的有待验证。

最后提一句,sohu的邮箱很怪异,会在每个文本段后面加一个空格,导致原本正常的排版一行放不下而换行,从而使某些布局错乱。所以,如果你要兼容sohu邮箱的话,遇到一些紧凑的布局就要格外小心了,尽量减少文本段的数量,留足宽度。

 

 

HTML细节

就目前来说,如果要做一个email页面,为了保证最大的兼容性,有以下几点需要注意:

对于纯文本邮件:

  1. 邮件标题不要超过18个字;
  2. 每行不要超过34个字。

对于HTML邮件:

  1. 邮件标题不要超过18个字;
  2. HTML代码和图片尽量不要超过50kb;
  3. 页面宽度推荐500px,最大不要超过600px;
  4. 避免使用边缘的、非主流的HTML技术;
  5. 不使用css来布局,应该使用表格来布局;
  6. 不使用外联的css样式,而使用font标签来定义样式,定义链接颜色时也是如此,写法如下: <font style="font-family:arial,helvetica; font-size:10pt; color:#000000">
    ...
    </font>
  7. 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ;
  8. body和meta之类的标签是可以无视的,因为在很多邮箱系统里它会被过滤;
  9. 如果整个邮件有用到背景色或背景图,建议用以下方式处理:<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
    <td width="100%" height="100%" bgcolor=".....">
    <!--- 邮件内容 -->
    </td>
    </tr>
    </table>
  10. 有背景图片的时候,我们要采用这种写法:<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
外链的图片是否默认被屏蔽YesYesNoNoNoYesYesNo
用户能否设置是否屏蔽图片YesNoYesYesYesYesYesYes
能不能让用户点击某个按钮就显示邮件中的图片YesYesYesNoNoYesYesN/A
当发件人在用户的联系人列表里时是否默认显示图片YesNoYesNoYesYesYesYes
发件人在ISP白名单中时能不能默认显示图片(国内好像没这个概念)YesN/AYesNoN/AN/AN/AN/A
图片被屏蔽时是否显示alt属性NoYesNoNoNoNoNoN/A
预览时显示windows的主题样式NoNoNoNoYesYesYesYes

来源:EmailLabs, 2004 。国内用户常用的Foxmail似乎没有屏蔽邮件内图片的功能,我也找不到相关设置的地方。

一旦图片被屏蔽,整个邮件就会变得面目全非,这里有以下一些建议:

  1. 重要内容尽量避免使用图片,比如标题、链接等;
  2. 制作一份和邮件内容一样的web页面,然后在邮件顶部写一句话,类似:“如果您无法查看邮件内容,请点击这里查看”;
  3. 所有图片都要加上alt属性;
  4. 所有的图片都要定义高和宽;
  5. 通知收件人把你的发件地址加入白名单。

Outlook 2007的限制

由于outlook 2007使用了word的渲染引擎来展现邮件内容,所以很多HTML属性没法得到支持了,比如:

  • 背景图片(这一点很重要!)
  • css浮动和定位(这个没啥用)
  • 自定义列表项的图像(这个也没啥用)
  • Flash(反正不放)
  • GIF动画
  • 图片的alt属性(值得注意)
  • 表单(反正不放)

这些细节还是应该注意一下。

附:Email客户端的CSS支持情况
本资料来自国外某邮件营销公司,所以缺乏国内邮件客户端的数据。

<style> 标签

 gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
<head>中的<style>标签NoNoYesYesYesYesNoYesYesYesNo
<body>中的<style>标签NoYesYesYesYesYesNoYesYesYesNo

<link> 标签

 gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
<head>中的<link>标签N oNoNoNoYesYesYesYesYesYesNo
<body>中的<link>标签NoNoNoNoYesYesYesYesYesYesNo

CSS 选择器

 gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
*NoNoNoNoYesYesYesYesYesYesNo
eNoNoNoNoYesYesYesYesYesYesNo
e > fNoNoYesNoNoNoNoYesYesYesNo
e:linkNoYesYesYesYesYesNoYesYesYesNo
e:active,
e:hover
NoYesYesYesYesYesNoYesYesYesNo
e:focusNoNoYesNoNoNoNoYesYesYesNo
e + fNoYesYesNoNoNoNoYesYesNoNo
e [foo]NoYesYesNoNoNoNoYesYesNoNo
e.classNameNoYesYesYesYesYesNoYesYesYesNo
e#idNoYesYesYesYesYesNoYesYesYesNo
e:first-lineNoYesYesYesYesYesNoYesYesYesNo
e:first-letterNoYesYesYesYesYesNoYesYesYesNo

CSS 属性

 gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
background-colorYesYesYesYesYesYesNoYesYesYesNo
background-imageNoYes, butYesNoYes *YesYesYesYesYesNo
background-positionNoNoNoNoYes *YesNoYesYesYesNo
background-repeatNoYesYesNoYes *YesNoYesYesYesNo
borderYesYesYesYesYesYesNoYesYesYesNo
border-collapseYesYesYesYesYesYesNoYesYesNoNo
border-spacingYesNoYesNoNoNoNoYesYesNoNo
bottomNoYesYesNoYesYesNoYesYesYesNo
caption-sideYesNoYesNoNoNoNoYesNoNoNo
clipNoYesYesNoYesYesNoYesYesYesNo
colorYesYesYesYesYesYesYesYesYesYesNo
cursorNoYesYesYesYesYesNoYesYesNoNo
directionYesYesYesYesYesYesYesYesYesNoNo
displayNoYesYesYesYesYesYesYesYesNoNo
empty-cellsYesNoYesNoNoNoNoYesYesNoNo
filterNoNoYesYesNoNoNoNoNoNoNo
floatNoYesYesYesYesYesNoYesYesYesNo
font-familyNoYesYesYesYesYesYesYesYesYesNo
font-sizeYesYesYesYesYesYesYesYesYesYesNo
font-styleYesYesYesYesYesYesYesYesYesYesNo
font-variantYesYesYesYesYesYesNoYesYesYesNo
font-weightYesYesYesYesYesYesYesYesYesYesNo
heightNoYesYesYesYesYesNoYesYesYesNo
leftNoYesYesYesYesYesNoYesYesYesNo
letter-spacingYesYesYesYesYesYesNoYesYesYesNo
line-heightYesYesYesYesYesYesNoYesYesYesNo
list-style-imageNoYesYesNoYesYesNoYesYesYesNo
list-style-positionYesNoNoYesYesYesNoYesYesYesNo
list-style-typeYesNoYesYesYesYesYesYesYesYesNo
marginYesNoYesNoYesYesNoYesYesYesNo
opacityNoNoYesYesNoNoNoYesYesNoNo
overflowYesYesYesYesYesYesNoYesYesYesNo
paddingYesYesYesYesYesYesNoYesYesYesNo
positionNoNoNoNoYesYesNoYesYesYesNo
rightNoYesYesNoYesYesNoYesYesYesNo
table-layoutYesYesYesYesYesYesNoYesYesYesNo
text-alignYesYesYesYesYesYesYesYesYesYesNo
text-decorationYesYesYesYesYesYesYesYesYesYesNo
text-indentYesYesYesYesYesYesNoYesYesYesNo
text-transformYesYesYesYesYesYesNoYesYesYesNo
topNoYesYesNoYesYesNoYesYesYesNo
vertical-alignYesYesYesYesYesYesNoYesYesYesNo
visibilityNoYesYesYesYesYesNoYesYesYesNo
white-spaceYesYesYesNoNoNoNoYesYesYesNo
widthYesYesYesYesYesYesNoYesYesYesNo
word-spacingYesYesYesYesYesYesNoYesYesYesNo
z-indexNoYesYesNoYesYesNoYesYesYesNo

(*) 不被Microsoft Outlook 2007支持。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值