【转】邮件模板兼容性和可用性简单指南

1.何为兼容性和可用性?

兼容性倒是容易理解,就是邮件模板至少要兼容各个邮箱系统,这里我们采用GMAIL,QQMAIL,163MAIL和OUTLOOK作为测试邮箱系统.通常我们对于邮件模板的兼容性要求比较低,在接到需求的时候,不太好实现的地方就跟需求方说这些系统的差别太大,调试麻烦,还是凑合用吧,但是如果总结出一套最佳实践来,做一套完美的邮件模板也不是不可能的.

可用性这个词,说起来就有点虚了,何为邮件模板的可用性?我自己摆了个摊子给它做了个定义:

在最糟糕的情况下保持尽可能优的可用性,好吧,又出来一个可用性,这个可用性就按字面意思去理解吧,纯粹的可以使用的意思.要考虑可用性,就要从邮件模板的作用来做出发点了.一封邮件到底为何而生呢?先跳过这个讨论,下面会详细说.

2.兼容性基本原则(这里是我总结的一些基本的兼容性原则)

(1) 任何时候都要用table布局,不要使用position和float.
(2) 不要使用div作为容器,在outlook中,设置div的高和宽不会生效.
(3) 除了布局样式之外的其他样式基本可用,例如颜色字体行距,用不着使用font等元素.
(4) 使用table的align=center让table居中.
(5) 设置图片的vertical-align:top来防止产生间隙,特别是在gmail中会有此问题.
(6) 设置table高度的时候记得同时设置td的高度,否则在outlook中不生效.
(7) 不要试图设置table的margin-top属性,在outlook中不会生效反而会引起其他table内部的问题.要撑出一片空白请使用一个空的table.
(8) 不要使用background,在outlook中会屏蔽所有类型的background,而且不会出现提示.
(9) 多做测试,不放过任何可能有问题的点.

3.重点所在

在邮件中使用table布局和一些兼容性原则其实很多写过邮件模板的人都已经深有了解了.但是对于背景图会被屏蔽掉这件事情却总是让人很纠结的,也是今天的重点所在.

以前流传在邮件中需要在table标签上直接设置background属性为图片,这样图片才不会被邮件系统屏蔽,但是如果你试过的话,你会发现在outlook中,不管你用什么方法,outlook都会把你的背景图屏蔽掉,而且不会有任何提示.

而我们公司内部都是用outlook的,这就是杯具之所在,即使其他邮件系统都支持背景图,但是outlook不支持,但是公司内部人员都用outlook(最重要的是老大用outlook)这时候就不得不考虑减少背景图的使用了.

所以,出来了这样一条实践:尽量不要用背景图.

当然最优的实践其实是这样的:告诉设计师,不要用渐变不要用发光这种需要图片才能制造出来的效果.

但是如果真的无法挽回,需要我们切一个复杂的邮件模板的时候,我们就该考虑了,图片尽量用<img>内置图片,而尽量不用背景图.

用img内置图片是所有邮箱系统都支持的,只是在显示他们之前,用户需要点击一下授权按钮,图片才会显示出来,这里对用户体验是有一些损失的.

4.神马算是邮件模板的可用性?

一封推广邮件为何而生呢?通常是为了推广商品,推广品牌,例如这样一封典型的商城的商品推广邮件,从模板角度来说,提供了一个商城的logo和整个商城品质感风格的边框,这是品牌形象,然后下面是到商城子频道的导航链接,这些链接其实也是很有用的,对于推广商城整体来说由很好的效果,而后就是商品列表了,这块区域是主体,为的是推广商品.

一封邮件,用户会怎么去理解呢?如果像上面说的,图片在一开始的时候并不会显示出来,需要授权才能显示,如果图片内包含重要信息,例如logo不显示,用户会降低对邮件的信任度,导航不显示,描述不显示,用户会没有清晰的方向感.而且很多用户也不知道应该去点击授权让图片显示出来.

5.怎么做?

• 图片为主,背景图为辅.也许这并不是最佳实践,没有任何数据能显示outlook在用户中间的使用百分比,最佳实践其实是设计一个不用任何图片就可以实现的邮件模板.在处理一些细节的时候(如果你想制作一个完美的邮件模板)使用背景图以及背景色,在普通邮件系统里可以看到正常的细节,而在outlook中忽略这些细节,但是可以做到对体验的最小牺牲.
• 一个原则:不要将所有的信息都用一张图片概括,某些类型的信息尽量用文字呈现,例如:推广邮件中的导航和商品属性,这些信息是邮件的目的所在,如果一开始都显示不出来,那这封邮件的意义就要打折了.
• 对于logo之类的等必须用图片的地方,请标记好图片的alt属性,这样在图片没有被显示的时候用户可以大概看到图片描述.
• 渐进增强.算是种意识吧,邮件系统就是一个功能严重缺失的浏览器,渐进增强对于它同样适用.

6.完结

大概就是这些吧,零零散散写了这些,实际应用中还是需要自己多做测试多做总结,如果没有时间需要速成的话,这篇文章就作为一点点参考吧.

 

转自：http://www.html-js.com/?p=1204