HTML邮件设计注意点

由于查看邮件的客户端很多,如网页、outlook2003/2007/…、手机浏览器、第三方邮件APP。公司邮件主要涉及PC网页、outlook各个版本,因此考虑的更少。记录下遇到的问题:

  1. head中的style定义无效

    一般写网页,喜欢在head中定义css样式,可惜在此处失效。以网易邮箱PC网页版为例,网易邮箱会主动截取<body></body>之间的代码作为邮件内容,如果在head中定义样式,将不被加载;QQ邮箱PC网页版则会全部加载;outlook2003表现正常,但2007同样不会解析。

  2. 布局使用table

    DIV除了块级的表现正常,其他则出现了异常,如float/position/width/margin:0 auto 等等。所以先使用table作为最大的父级,需要居中,可以是设定align=”center”。

  3. 使用内联样式

    CSS中子级会继承父级的样式,但outlook中表现奇怪,因此保险起见,为最小的子级定义内联样式。如<td style=”color:red”>警告</td>。

  4. line-height无法实现垂直居中

    设计的过程中,我参考了京东商城发送的电子邮件,表头使用的height+line-height来实现垂直居中,但outlook7中表现为底部对齐,可能原因是outlook2007的解析原理不一致,我们可以使用padding来撑高。在文字段落中line-height仍然是正常的。

  5. 各版本解析方式不一致

    参考文章①和②已列出来,简单而言就是outlook2007使用的是word引擎(HTML e-mails are now displayed by a word engine),想区别的,2003版本则是使用的是浏览器引擎,2012为深究。其他的PC网页版则肯定使用的浏览器引擎,微信也是使用的浏览器解析引擎。

  6. outlook转发会丢失样式

    HTML邮件在outlook中表现正常,但转发时会调用word编辑器,则会破坏了原来的样式,最明显的表现就是会在每个table结束时加个换行。目前还没找到具体的解决办法,如果有网易邮箱的“原件转发”功能,是否能解决呢?
    mail-wiht-html

  7. 尽可能不要使用图片

    由于outlook的安全设置,默认都是不显示图片的。如果使用到了,需指定宽度和高度,避免图片不显示是预留位置撑破页面。

  8. 统计邮件到达及阅读情况

    阅后回复是个方案,更为简单的方法是使用图片。在邮件底部隐藏一个图片,图片地址则是包含统计参数的URL,如京东的:

    <table style=”display:none;” width=”1″ height=”1″><tr><td><img width=”1″ height=”1″ src=”http://csc.jd.com/log.ashx?type1=edm&amp;type2=stats1&amp;data=A_1770035069%7C%7C%7Cwebmaster@webmaster.com%7C%7C%7C1400010897587″></td></tr></table>

    当然上一条已经决定了该方法存在失效的可能。

  9. 将发件人加入通讯录

    由于邮件标题一样,如果大量发送邮件,经常会被列入垃圾邮件,避免这种情况,可以考虑动态生成标题,并要求收件人将发件人加入通讯录。这里不得不吐槽godaddy,正常通知邮件和广告邮件的发件箱相同,导致正常的通知邮件也被列入广告邮件中。

  10. 将附件中图片插入的邮件内容中

    请阅读参考文章③

其它待补充。

参考文章:

  1. Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007
  2. Inxmail Guide HTML E-mails with Outlook 2007
  3. RFC 2111 – Content-ID and Message-ID Uniform Resource Locators (RFC2111)

本文固定链接: https://jucelin.com/mail-with-html.html | Jucelin

该日志由 jucelin 于2014年05月14日发表在 前端设计 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: HTML邮件设计注意点 | Jucelin
关键字: ,

HTML邮件设计注意点:沙发还在为你留着呢!!

发表评论

您必须 [ 登录 ] 才能发表留言!

更多