EDM制作兼容经验谈

尽管都是用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要做得花哨就只能上大图,要不就回复纯文本的简朴方式,本身邮箱也不鼓励发花哨又复杂的邮件

          回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注