EDM制作兼容经验谈

| 4 条评论 | 21,339 人已阅
本站所有文章均为博主人工写作，绝无AI辅助成分，请放心参阅。

尽管都是用HTML语言，EDM和网页的制作差别还是随着现代电脑/手机等设备的升级，不断地分化着。可以说EDM是保守的极端，应该完全避免新技术（比如CSS3新属性，HTML5的新元素等）的应用。

总结几条EDM制作最基本的要点：

  • 不能用div布局，更不能用浮动。所有关于布局都用老旧的方法 – table实现，如果有需要可以大表套小表，不过层级还是尽量精简；
  • 不能用百分比来布局，每一个单元格（td）都要用固定宽度，必要时也固定高度。页面内容区宽度推荐600px；
  • 除了图片可以外连，其他一切，包括CSS都不能外链，更禁用iframe这样的页面嵌套；
  • CSS要完全嵌入html元素中，不能写在页头，当然更不能外链。完全不用CSS3的新属性；
  • CSS2中应该禁用的常用属性有float，clear，position，top/left/right/bottom，overflow，z-index 等等…
  • 完全禁用任何形式的Javascript和其他脚本
  • HTML中应该禁用的，除了所有的HTML5新元素外，还有marquee，object，iframe，所有的表单元素和页头元素

以上7条是大限，不能违背，否则你的EDM会在90%以上的邮箱被屏蔽或者显示得面目全非。

下面再来介绍一下我自己的经验之谈。
制作EDM曾是我的常规工作之一，所以我用各种浏览器在大部分主流邮箱进行过EDM测试，这些邮箱包括QQ，126/163，Yahoo，Gmail，MSN，Outlook线上，另外还有Outlook客户端2003/2007/2010。大部分普通用户喜欢用浏览器登录在线邮箱收私人邮件，用Outlook收工作邮件。可以说要在所有的客户端做到100%的完美还原你的EDM设计稿，是不可能的。制作EDM打一开始就要放弃这种想法，得采用各种保守和折衷的方法来尽可能多的展现你需要展现的内容。根据我的经验，Outlook是兼容性问题最多的邮箱，因此本文测试重点为目前企业中最流行的Outlook 2010。

为了减少EDM出错的几率，除了要遵循上面的6个要点之外，还要尽可能注意以下几点：

1. 不要在很窄小的地方用list
其实所有的邮箱都支持ul/ol/li这类元素，但大部分邮箱会自己重写这些元素的默认定位样式，同时忽略掉一些你自己写的内嵌样式。最明显的就是margin和padding。所以如果实在是要用，那就不要另外再写样式给它定位。
下面是一个定了margin-left和padding-left的ul在浏览器中和在Outlook2010中表现出的差别，我是这样写的：

1

<ul style="margin-left:20px; padding-left:10px">...</ul>

测试效果如图：
EDM制作兼容经验
而放弃自己的定位，变成

1

<ul>...</ul>

效果反而还不错：
EDM制作兼容经验
我们有时候要在一个很窄的td里放一个list，就如上面图中显示的，在Outlook中每个li文字前面就有50px的空白用来承载圆点。如果你的td本来就不宽，这50px就会显得很浪费：
EDM制作兼容经验

2. 只能定义系统字体，在td下定义好的字体只会在p容器中被继承
很多邮箱只认很少的几种系统默认字体，比如Arial, 中文的宋体。自以为为了美观，要在EDM加上非系统字体的，你会发现自己在白费力气。如果给一个td定义了字体，这个字体只会自动作用在这个td里的p容器中，如果要让字体作用在其他容器中，得给这些容器自己内嵌字体样式。
测试代码：

1
2
3
4
5
6
7
8
9
10
11

<table width="650" border="0" cellspacing="0" cellpadding="0">
		<tr>
				<td style="font-family:'Times New Roman'; font-weight:bolder">
					<p>Shanghai Longines Global Horse Racing Champions Tour</p><br/>					<span>Shanghai Longines Global Horse Racing Champions Tour</span><br/>
					<strong>Shanghai Longines Global Horse Racing Champions Tour</strong><br/>
					<div>Shanghai Longines Global Horse Racing Champions Tour</div><br/>
					<ul><li>Shanghai Longines Global Horse Racing Champions Tour</li></ul><br/>
				</td>
		</tr>
</table>

效果：
EDM制作兼容经验
可见只有P元素沿用了td中定义的字体，如果要让其他元素也显示字体’Times New Roman’，需要单独给他们加style

3. 不要用背景图片
这是一个棘手的问题。其实在很多主流邮箱中，背景图片的支持都还不错。但Outlook和Lotus Notes都顽固地屏蔽掉了背景图片，无论你用html属性还是css定义，在这两个企业级的客户端中都是白费力气，而且这个光荣的传统从Outlook2000开始，到Outlook2010版都一直被继承了下来…
其实在用Outlook2003的时候我发现过一条解决方案，就是在页面上把添加的背景图片用一个像素的img元素另外展现出来…但这个“技巧”在Outlook2010中也被无情地KO掉了，目前就没有可替代的方案了。很多人都习惯在设计稿中忽略这个问题，等发现切出来的页面在邮箱中出现大块的空白色，还不知道问题出在哪里。因此要完全避免使用背景图片，在做设计稿的时候就得正视这个问题。如果你喜欢在漂亮的背景图片上添加文字，那干脆直接做成图片吧！

4. 关于图片
用图片去展现内容，记得给每个图片添加alt属性。在这里alt属性不是为了SEO，是为了让用户在还没有按下“下载图片”的按钮之前就知道EDM的内容。有时候也可以避免你的邮件直接被系统自动筛到垃圾箱中

切片不要切得太细，图片数量越少越好，图片不要横竖交错，要么全部横排，要么全部竖排。如果你喜欢横竖交错，在td元素里会不知不觉会多出一些colspan或rowspan，用浏览器看着好好的，但在邮箱中你会发现各种奇怪的图片错位问题，有时候会多出一条一像素的线，怎么调也去不掉，够头疼的。

5. 采用标准的表格起始样式
假如混排图片完成后还是不能解决多余的空白像素问题，需要给表格强制一些间距属性了，这其中包括边框（border），单元格内边距（cellpadding），单元格间距（cellspacing），边框合并属性（border-collapse）。要养成习惯给每个table都加上这些属性：

1

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">...</table>

另外如果你的表格必须要用到浮动（个人是极力不主张这个蛋疼的做法的，宁愿多做嵌套），那就要参考一下这篇文章了：http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010

6. 页面背景色写在body里是没用的
很多邮箱会自动忽略body和以外的标签，那么你在body上定义的页面背景色就显示不出来了。如果需要添加页面背景色，就要在所有内容以外再添加一个table（div是不行的）。

1
2
3
4
5
6
7
8
9

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color:#f9f9f9">
		<tr>
				<td>
					<table width="600">...</table><!-- 这里再用宽度600的table装载EDM实际内容 -->
				</td>
		</tr>
</table>
</body>

7. 给每个段落添加一个margin-bottom
Yahoo邮箱默认的p标签是没有外边距的，所有的段落挤在一起肯定很难看。我不知道Yahoo邮箱现在的市场份额是多少，貌似还挺多人用的，所以需要给每个段落增加一个margin-bottom，以便隔开。

1
2

<p style="margin-bottom">this is a paragraph...</p>
<p style="margin-bottom">this is a paragraph...</p>

8. 给每个单元格td定义对其属性
在浏览器中表格元素td如果没有定义过align或对应的CSS属性text-align，td内的内容会默认左对齐。但在一些邮箱中（比如微软网页版邮箱APP），如果没有定义td内的对齐，其内容会跟随上一级的对齐属性。比如如果table是居中的，那么td的内容也会跟着table居中。
为保险起见，应该给每个td都定义align或者CSS的text-align属性。

9. 为看不到图片的用户做一个在线版的EDM
我们花了很多力气美化的EDM，仍然有可能在用户信箱里面一张图片都显示不出，有些用户也确实不习惯点那个下载图片的按钮。于是我们最好在每个EDM上加一行文字，连接到这个EDM的在线网址，让用户有机会看到这个个“干净版”的EDM。这花不了你多长时间，它确实能很大程度的提高EDM被浏览的概率。
EDM制作兼容经验

10. 做好测试！
在正式群发之前，要把完成的EDM发往尽可能多的不同邮箱/客户端进行测试，以及时发现问题。

写到这里，脑子里其实还有很多细节片段，但不知道应该怎么写。等想到了再回来添加吧。

做EDM其实是个吃力不讨好的活，没人会因为你会做EDM而觉得你很牛，而EDM的兼容性做得再好，可能也只有你自己知道。但无论如何做好每一个页面的兼容性是一个开发人员的职责。

这里整理了一些自己做的EDM设计截图：https://blog.brain1981.com/artworks/842.html
如果您有任何关于EDM的点滴经验，欢迎给我留言。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/325.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。

相关文章

4 关于 “EDM制作兼容经验谈” 的评论

  1. 彭榴聪

    你好，EDM页面最近遇到，用图片做超链接时，图片高度切的很小25左右像素，在苹果笔记本上会出现一条1px的线，这个问题很头痛，希望能给点建议！谢谢！

    回复 ↓
    1. Brain 文章作者

      这个无解，一边调整好另一头又出现裂缝了。
      绝对不能把图片切得很小，图片切大就是为了遮丑

      回复 ↓
      1. 彭榴聪

        你好，最近又遇到一个问题，我EDM页面的上下垂直空白间距是使用td设置高度来实现的，在outlook里测试完全没问题，在阿里邮箱编辑页面是也没问题，但是发送之后在发送邮件里查看和在收件箱里查看 会发现空白间距都消失。等于td高度失效或者是td不显示， 请问这个是什么原因？

        回复 ↓
        1. Brain 文章作者

          尽量一行一张图片，图片不要切得太细，避免留下过多的接缝处，就是为了避免各种莫名其妙的客户端对HTML执行不同的解读
          你这个问题很明显又是客户端标准不一引起的，真心没必要在这种事情上浪费时间，解决不了的直接上一张大图完事

          EDM要做得花哨就只能上大图，要不就回复纯文本的简朴方式，本身邮箱也不鼓励发花哨又复杂的邮件

          回复 ↓

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注