EDM邮件中的html/css兼容性问题

最近需要配合用研同学做个问卷调查的邮件模板，表现形式不是纯文本，需要有美观的布局和多彩的内容，也就是说邮件里面需要用html/css来表现内容。这种应用已经非常普遍了，如今邮箱里面充斥着各种facebook动态、团购网站推荐、支付宝提醒等等的富文本邮件，这就是EDM（Email Direct Marketing ）电子邮件营销，那如何利用html/css/js更好地在邮件客户端（web邮箱就不讨论了）中表现富文本内容呢。

 

 

遇到这样的视觉稿的话，什么 双飞翼布局yui3布局的大家还是别指望了，因为邮件客户端不支持某些看起来很基础的html和css。目前为大家所知的 邮件客户端有微软的microsoft office outlook、苹果的apple mail、mozilla的mozilla Thunderbird等等，其中用户数量占据霸主地位的当然非outlook莫属，以下是全球的邮件客户端的市场占有率统计图，在特殊国情的我国outlook的占有率应该更高了。

 

下面以常用的microsoft office outlook 2007客户端为例，看看html和css的兼容性问题。根据 微软官方outlook 2007文档指出，outlook 2007采用和word 2007一样的引擎解析渲染含html/css的内容。outlook 2007部分支持HTML 4.0.1，同时部分支持css1。

 

outlook 2007不支持html 4.0.1的标签有：

• applet/bdo
• button/form/input/select/option  不支持form、button、input、select等表单元素，所以在邮件中直接提问让用户填写的方式不可行，所以一般都是给出超链接，让用户去新的链接地址进行进一步操作。
• noframes/iframe   不支持iframe，所以邮件中无法嵌入网页
• isindex/menu
• object 所以邮件中flash什么的不建议用
• optgroup/param/q
• noscript/script  不支持script，所以不支持js

 

outlook 2007不支持html 4.0.1的标签属性有：

• accept-charset/accept/accesskey/archive/
• background/checked/classid/code/codecore/
• codetype/compact/data/declare/defer/disabled/
• enctype/longdesc/marginheight/marginwidth/
• media ( screen | print | projection | braille | speech | all )/method/multiple/noresize/object/
• onblur/onchange/onclick/ondblclick/onfocus/onkeydown/onkeypress/
• onkeyup/ onload/onmousedown/onmousemove/onmouseout
• /onmouseover/ onmouseup/ onreset/onselect/onsubmit/onunload/
• readonly/scrolling/selected/standby/tabindex/title/valuetype

上面的这些onblur/onfocus/onsubmit/onclick事件属性的不支持，加上也不支持script标签，所以outlook完全不支持javascript。

 

某些标签的某些属性值，outlook 2007也表示不支持，如下：

textarea	cols
td	colspan=0
th	colspan=0
frame	frameborder=0
td	rowspan=0
th	rowspan=0

 

outlook 2007不支持css1的样式有：

• background-position/background-repeat/background-image/background-attachment   所以别用css背景图，需要用图片的地方请直接用img元素
• display  不支持display，yui3布局pass
• float/clear 不支持浮动，双飞翼布局pass，故table布局是首选。
• list-style-image/list-style-position
• text-transform/word-spacing

 

结合其他邮件客户端，邮件html的编写还需要注意：

1.<link rel=”stylesheet” ……虽然outlook2007支持css外链，但是其他如yahoo、gmail的客户端等 客户端邮箱不支持，而实现样式还有其他方式可替代，所以建议选择直接在内联的style属性上面。

2.css背景图片不建议加，可用img标签代替，但是一方面img图片本身的大小比文本型肯定要大很多，图片过大导致整个邮件过大会被容易视为垃圾邮件；另外一方面图片在outlook2007等大部分邮件客户端基于安全考虑不会下载图片，而是要右键一下手动允许下载才行，所以图片最初是显示不出来的，为了不打乱布局，最好的方法是给图片加上width、height和alt属性，alt描述了未下载图片的内容。

3.因web邮箱的流行，所以一般html邮件不包含html和head标签，body里面的内容可直接作为web邮箱页面的一部分，在客户端邮箱显示也正常。

4.因邮件客户端的自身宽度原因，html邮件页面宽度一般为550-650px。

5.关于EMD电子邮件营销的更多问题，如：如何让你的html邮件防止被过滤，如何提高电子邮件营销的效果等，可以参考《 87 ways to improve your email marketing》、《 guide to Email Marketing success》。

 

参考资料：

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)

The complete guide for creating html emails: technical and design best practices

http://www.hanlinweb.com/edm-mail-for-the-full-version.html