Email页面代码书写建议及规范

众所周知，Email是一项最古老的互联网应用之一。
因此，不少邮件系统还是会采用一些比较古老的处理方式，导致前端方面很多新的技术、新的特性无法被支持。
而且各个邮箱系统以及客户端的差异，也会使email的最终呈现出现很大的偏差。

HTML细节

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

对于纯文本邮件：

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

对于HTML邮件：

1. 邮件标题不要超过18个字；
2. HTML代码和图片尽量不要超过50kb；
3. 页面宽度推荐500px，最大不要超过600px；
4. 避免使用边缘的、非主流的HTML技术；
5. 不使用css来布局，应该使用表格来布局；
6. 不使用外联的css样式，而使用font标签来定义样式，定义链接颜色时也是如此，写法如下： 
...

7. 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ；
8. body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤；
9. 如果整个邮件有用到背景色或背景图，建议用以下方式处理：




10. 有背景图片的时候，我们要采用这种写法：

    图片屏蔽

    由于图片可以用来侦测邮件的打开率和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
    外链的图片是否默认被屏蔽	Yes	Yes	No	No	No	Yes	Yes	No
    用户能否设置是否屏蔽图片	Yes	No	Yes	Yes	Yes	Yes	Yes	Yes
    能不能让用户点击某个按钮就显示邮件中的图片	Yes	Yes	Yes	No	No	Yes	Yes	N/A
    当发件人在用户的联系人列表里时是否默认显示图片	Yes	No	Yes	No	Yes	Yes	Yes	Yes
    发件人在ISP白名单中时能不能默认显示图片(国内好像没这个概念)	Yes	N/A	Yes	No	N/A	N/A	N/A	N/A
    图片被屏蔽时是否显示alt属性	No	Yes	No	No	No	No	No	N/A
    预览时显示windows的主题样式	No	No	No	No	Yes	Yes	Yes	Yes

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

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

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

    Outlook 2007的限制

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

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

    查看详细介绍。这些细节还是应该注意一下。

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