本文全是自身实践过程中的心得 不代表绝对的正确性 仅供留念参考
做了大概有四五个邮件营销页了，面对着摸不着头脑的设计师。她们追求的是美观大气，所以难免有各种点缀花俏，但设计很丰满，实现很骨感，这是常常发生的。邮件页需要兼容各大浏览器、各大邮箱（包括国内和国外）、各种邮件客户端。所以建议：
1、尽量用table布局，div是web2.0的主流，但大部分客户端仍然处于web1.0时代。div+css布局不太适合。在实现上，如果想快速达到效果，建议用多table嵌套。这样可以避免很多的兼容问题，排位布局也变得很得心应手。
2、个人在时间中遇到的问题：负边距，padding、margin的负数值是无效的，绝对定位、相对自身定位，负值也是无效的，比如gmail，会被过滤掉。
3、display：block，有可能出现在foxmail中无效。
4、每个img标签都最好加上border：none，避免浏览器自动帮加上。
5、每个table都最好加上cellspacing=“0” cellpadding=“0”。
6、尽量避免一些特殊的样式，样式越简单越好，padding，margin，float要慎用。
7、建议尽量少使用背景图片，很可能出现不支持或者过滤，img引入的图片也尽量不能太大，30k-120k以内最好;图片越少越好。html最好控制在10K以内。不超过25K。链接不超过十个最好。
8、邮件的标准宽度为575像素，最宽不宜超过778像素。高度建议最长不要超过1200像素。
10、一般邮件不支持任何脚本语言：多数邮件客户端软件和webmail中默认不支持任何脚本语言。
11、邮件中不能使用分帧页面和I-frame。
12、禁止使用外联样式表。
另外附上专业解释：（摘抄）
微软的新版本Outlook 07的发布由于使用了Word的Html渲染代替了以往基于IE浏览器的Html页面渲染，给邮件设计者带来了很大影响！
但Word 2007目前并不支持很多Html语言及CSS样式，也就意味着Outlook 07中邮件背景图片无法显示、不支持CSS的Float或Position属性、不支持DIV+CSS盒子模式等等。 因此，这个变化在很大程度上影响到Html邮件在Outlook 07显示，如很多在网页中显示正常的Html邮件但在邮箱中显示异常。
| (一) Microsoft Outlook2007 变化的原因 | |||||||||||||||||||||
| 为什么Microsoft Outlook07决定更换渲染引擎为微软Word的Html渲染引擎? | |||||||||||||||||||||
尽管Outlook2007存在很多对Html 邮件的渲染弊端，但是发布以后，仍很快地在市场上拥有了较大的占有率。因此，对于邮件设计师来说，如何布局Html邮件，也是一项不容忽视的挑战。 | |||||||||||||||||||||
| (二) Microsoft Outlook2007不支持的属性 | |||||||||||||||||||||
因此，微软基于互联网浏览器支持的网页标准，总结了Word 2007功能有关的Html语言及CSS标准问题。 Microsoft Outlook2007目前所不支持的属性主要有：
其他邮件客户端的CSS属性支持情况: | |||||||||||||||||||||
当今邮件阅读客户端有很多种，不同的用户可能所使用的操作系统、客户端软件(如传统的Outlook，Gmail，Hotmail等)、浏览器版本等对免费邮件渲染处理也不同。而且大多数邮件客户端都有自己的HTML头部信息的定义，为了避免与免费邮件的头部标签样式起冲突，会屏蔽掉邮件中的<html><head><body>标签命令。 若希望所有不同客户端的用户看到的邮件相同，建议采用最原始的排版方式：表格布局+CSS，根据目前我们对Html邮件的测试，其兼容性更好。 有人会想到，为什么不用时下Web标准中最流行的布局方式Div+CSS呢？而且它比表格具有更多的优点：如结构与表现可以相分离，代码更简洁。很可惜，它适用于网页设计，而不适合于Html邮件设计。您若若采用DIV+CSS布局，大部分邮件客户端机ISP会对某些标签添加自己默认的样式，或不识别CSS属性，而导致邮件无法正常预览。 下图是主流ISP及邮件客户端对HTML的CSS属性支持情况：
有关邮件中如何正确引用CSS，请点击阅读 目前，Outlook邮件客户端大约已占据B2B市场的75%份额。而新版本的Outlook2007，毫无疑问地仍占据一部分市场份额。因此，创建Html布局邮件，优化将是邮件设计师优先考虑的工作。同时，也意味着我们不得不再次使用原始的Table+CSS布局来代替DIV+CSS布局Html邮件，以确保邮件可以兼容Outlook邮件客户端。 Outlook 2007 ，对邮件中的Html元素及CSS属性支持相当有限，更详细说明请阅读微软官方文档： “不支持的‘表单’元素”： 表单 表单元素是允许用户在浏览器中（比如：文本域、下拉菜单、单选框、复选框等）输入信息的元素。用户可以在问卷调查中插入表单收集客户的信息，实现与客户的互动。
Outlook2007表单元素以”[ ]“效果显示，导致用户无法在邮件中完成表单的填写，“用户满意度”的问卷信息也无法收集。随着Outlook2007的普及，所以作为邮件设计者，我们需要考虑到Outlook2007用户能够无障碍的提交表单，达到收集市场信息的目的。 那么，我们该如何解决Outlook2007不支持表单元素的问题呢？ 建议在邮件中通过插入链接的方式完成表单提交。 如：在邮件中添加“填写问卷调查”的按钮（或图片/ 文字）链接，引导用户在网页浏览器中完成表单填写，请参考我们网站的RADVISION案例—在邮件中插入会议注册链接，利用Unimail系统的问卷调查的功能回收参会者信息。 Outlook2007不支持的‘背景属性’及解决技巧： 背景属性 背景图像，是通过Html编码中的背景属性来实现的一种功能。但是，Outlook 2007 中仅在<body>标签内支持Background属性，在<table><tr><td>标签中都不支持此属性。另外，<body>元素虽支持Background属性，但默认情况下会被拦截，用户必须手动下载背景图像。 那我们该如何解决邮件中有关“背景图像”的显示问题呢？ 下面我们通过三种图片显示情形，分别为大家介绍邮件中“背景图像”的显示技巧： 1.基于Web绝对路径的背景图像 图像的路径，必须是存放在服务器上的一个完整的Web绝对地址。 例如：http://www.unimarketing.com.cn/p_w_picpaths/logo.jpg 您可以通过在IE浏览器中输入此地址，即可访问并显示此图像的路径。 举例说明：应用在Body元素中的背景属性，并且背景图像在页面上进行平铺。
3.图像替代文本 <img>标签的Alt属性可以定义替代文本，即应用于图像无法显示或者用户禁用图像显示时，来代替图像显示在浏览器中的内容。 Alt 文本的使用原则：
我们强烈推荐您在邮件中的每个重要图像中都使用这个属性，如邮件中的重要图片如LOGO、促销活动图片、点击注册按钮等，如果用户在邮件接收过程中，Alt属性就可以发挥它的作用。 注意事项： Outlook2007不支持的‘定位 Position’及解决技巧： Position 定位 CSS属性：Position，它用来规定元素的定位类型。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。 此属性所包含的参数。如下表：
举例说明：定义一个块元素且其被相对定位与另一个块元素。这两块元素具有固定的宽度和高度，及不同的背景颜色差异。
结果得知： 在Outlook2007中块元素的相对定位以默认值Static无定位的形式显示。块元素按顺序形式显示。Outlook2007并不支持CSS的Position属性，如果一定想对块元素进行定位，我们可以使用Table布局的方式来代替。 邮件内CSS样式正确引用将样式写入HTML标签内部，而不要引用外部的css 文件，也不要写在<style></style>内，另外引用于body内也将无法工作 【错误引用】将css样式写在引用于body内<style type=”text/css”> body,td,th { font-family: Arial; font-size: 12px;} </style> 【错误引用】引用外部的css样式 <link rel=”stylesheet” type=”text/css” media=”all” href=”css/unimarketing.css”/> <td style=”font-family:’宋体’; font-weight:bold; “> 活动促销</td> <font style=”font-family:’宋体’; font-weight:bold; “>活动促销</font> 那为什么要这么引用呢？ Html邮件是嵌入在桌面邮件客户端（如outlook）和WEB邮件客户端（如主流邮箱QQ、网易邮箱、gmail邮箱等）预览窗口的邮件主窗体内，如下图所示。 如Outlook 2007采用微软Word的Html渲染引擎代替了基于IE浏览器的Html页面渲染引擎。而WEB邮件客户端默认页面会有自己的样式表，当邮件客户端的样式与您的邮件外部引用样式表有冲突时，就会读取自己的样式表。 因此，建议您将样式写在Html标签内部，换句话说，写在最接近您想定义的文字或图片的位置，浏览器对其可读性将更强，兼容性也将更强。
ALT属性标签在邮件制作过程中，往往容易被忽视，其实正确地使用Alt标签，是邮件设计制作中不可缺少的重要步骤。下面我将为大家讲述它的作用： ALT属性：是指为图片添加的一个属性，它可以在图片无法显示时的替代文本。如： 邮件中图片代码：<img src=” http://www.unimarketing.com.cn/p_w_picpaths/logo.jpg” alt=“灵动邮件营销”> 邮件中显示效果： 当邮箱中邮件图片未下载时，相应显示效果：
当用户把鼠标放在图像上方时，如下图效果：
如果用户在邮件接收过程中，碰到以下情况，Alt属性就可以发挥它的作用：
因此，邮件中的重要图片如LOGO、促销活动图片、点击注册按钮等，我们强烈建议您添加Alt属性。这样即使图像无法显示时，替代文本也可以在邮件客户端或浏览器的网页版本中显示内容，更易阅读。 添加Alt属性与未添加Alt属性的区别： 实例：当图片被拦截时，第一张未添加ALT属性，第二张添加ALT属性
| |||||||||||||||||||||
转载于:https://blog.51cto.com/brokenjoin/1322449
2028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
