edm html超链接,EDM邮件中的html/css兼容性问题

syzyzs

于 2021-06-28 11:56:53 发布

阅读量550

点赞数

文章标签： edm html超链接

最近需要配合用研同学做个问卷调查的邮件模板，表现形式不是纯文本，需要有美观的布局和多彩的内容，也就是说邮件里面需要用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/

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

colspan=0

frame

frameborder=0

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的编写还需要注意：

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