EDM（Email Direct Marketing）HTML制作要点

来源：互联网发布：unity3d 旋转编辑：程序博客网时间：2024/06/11 02:57

我们打开邮箱邮件，经常发现类似这样的网页：

上图为京东发送的商用邮件，我们即称之为EDM，中文名电子邮箱营销。在邮件中嵌入的京东推荐网页中，我们点击商品链接或者图片就可实现跳转等功能。

我们可以思考一下，右侧为京东制作的营销网页，主站则为腾讯的QQ邮箱网站，QQ邮箱网页嵌入了京东的网页，那么腾讯会任京东的网页为所欲为么？肯定不会，例如，京东在网页中用fixed布局设置了一个跳转到京东主页的按钮放在屏幕右下角，QQ邮箱会让他这么做？肯定不会。腾讯和京东虽然是合作关系，也不会允许朋友做的这么过分吧。

但是对于一个邮件推销者而言，单凭文字往往表达不全面发送者的意愿，所以邮件中放上精美的商品图片或者有吸引力的磁力链接就尤为重要，而这些有吸引力的内容正要通过网页的形式展示出来。

但是邮箱主站中嵌入外来的不明网页，就一定要对其进行限制，防止不明网页的过分渲染。

借用一张图片，简单看一下不同邮箱网页中对嵌入不明网页的部分样式限制：

不同的邮箱对于HTML和CSS的限制有所不同，所以要考虑大多数主流邮箱的兼容性，有以下需要注意：

由于CSS可能被过滤，必须使用 table 布局。设置table的cellpadding和cellspacing属性值，控制table中内容的间距。如果需要邮件居中显示，在table里设定align="center"。往往<table cellpadding="0" cellspacing="0" align="center" border="0" style="margin: 0 auto;width: 700px;border: none;" >为table的标配，table的宽度不要超过700px，一般宽度在550px到700px最佳。在很多无奈的情况下经常会遇到多层 table 的嵌套，对此不必过分在意。不要使用div，其在大多数邮箱中不被支持。
不要使用背景，因为很多情况下都不被支持，即便有些邮箱确实支持背景图片，最后的结果往往也并不好。这一点使得设计出来的页面如果太花哨的话，直接都成了切图。
所有的图片必须指定高宽和 alt 属性。这点很容易理解，因为很多邮箱里，图片不是默认加载的，往往加载前需要用户的许可。那么高宽的指定可以使邮件在没有图片撑出样子前也能保持良好的大小结构，alt 更可以明确告知图片的内容让用户选择是否下载它们。另外，很多不好渲染的文字，比如文字需要浮动在最右侧，文字很花哨，这时完全可以使用图片。
样式全部改成行内，直接加在对应的HTML标签上。一些邮箱对于块级元素的支持不好，可能会打乱排版。这点很有必要，因为大部分邮件无法完整的继承样式，并且邮箱的默认样式也会对邮件产生一些头疼的干扰。所以如果你想让邮件在所有邮箱里看起来都一致，那么，所有的样式最好都单独指定，特别是IE的怪异模式下，单独设置字体和对其是必须的。
css样式不能使用嵌入和外联方式，一定要使用内联方式。无论是float属性还是清除浮动的clear都不能使用，也不要使用position定位。因为在Outlook 2007/2013下，不支持clear、float、left、right、top、bottom等标签。所以像：float:left、clear:both都不能使用。能用table、tr和td解决的就用table、tr和td。
出于兼容性的考虑，经常需要使用到废弃的标签和元素。尽可能只使用HTML，少用样式。在很多情况下，两者最好同时出现。比如，border="0" 和 style="border:0;"。其实这种双重保障经常可以在一些引用资源上看到，比如 facebook 的 like 按钮。
无论图片是否用块显示，line-height 都会影响图片的拼接，所以要确保其只作用于文字范围。
只要不是行内的图片，样式 style="display:block;border:0 none;margin:0;pading:0;"几乎是标配。避免默认行高以及边框的影响，可以避免大部分邮箱图片拼接遇到的问题。特别是IE下，对图片添加链接默认出现的紫色边框，常容易被忽略，这时0边框是必须的。另外图片尽量用jpg或者gif格式，png格式图片比较大，而且加载会比较吃力，一些邮箱会限制图片的大小，图片一定不要超过150kb。
不要简写颜色，比如#fff，要完整写成#ffffff。简写的颜色在IE怪异模式下会出些小问题。
不要使用span，因为其在某些邮箱里会导致换行。
table 的高度使用td撑起来，别给 table 写高度，那样往往不准确。
如果不想邮件被转发后支离破碎，邮件最好不要用多个 table 拼装，而是要嵌套起来。

前面我们说过腾讯QQ邮箱中嵌套京东的推广网页，如果仔细观察的话，会发现推广网页中居然使用了div等一些不推荐的东西，大概是因为其合作关系吧，腾讯邮箱固然不会对其限制太多，同样网易邮箱不会对网易音乐的推广内容页面做拦截。

下面是一个例子代码，可以参考一下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>上线特惠</title></head><body><table width="700" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">    <tr>        <td>            <a href="" target="_blank">                <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/top.jpg" alt="" border="0" style="display: block">            </a>        </td>    </tr>    <tr>        <td>            <a href="http://cn.getthelabel.com/" target="_blank">                <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/logo.jpg" alt="" border="0" style="display: block">            </a>        </td>    </tr>    <tr>        <td>            <a href="http://cn.getthelabel.com/" target="_blank">                <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/notice.jpg" alt="" border="0" style="display: block">            </a>        </td>    </tr>    <tr>        <td>            <table width="700" cellspacing="0" cellpadding="0" border="0">                <tr>                    <td width="5"></td>                    <td width="690">                        <table width="690" cellpadding="0" cellspacing="0" border="0">                            <tr>                                <td>                                    <a href="http://cn.getthelabel.com/promotion/limited.html" target="_blank">                                        <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/activity-1.jpg" alt="" border="0" style="display: block">                                    </a>                                </td>                            </tr>                            <tr>                                <td>                                    <a href="http://cn.getthelabel.com/promotion/moderncolor.html" target="_blank">                                        <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/activity-2.jpg" alt="" border="0" style="display: block">                                    </a>                                </td>                            </tr>                            <tr>                                <td>                                    <a href="http://cn.getthelabel.com/promotion/muscle.html" target="_blank">                                        <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/activity-3.jpg" alt="" border="0" style="display: block">                                    </a>                                </td>                            </tr>                            <tr>                                <td>                                    <table width="690" cellspacing="0" cellpadding="0" border="0">                                        <tr>                                            <td width="230">                                                <a href="http://cn.getthelabel.com/1019519.html/" target="_blank">                                                    <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/hot-1.jpg" alt="" border="0" style="display: block">                                                </a>                                            </td>                                            <td width="230">                                                <a href="http://cn.getthelabel.com/1009048.html/" target="_blank">                                                    <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/hot-2.jpg" alt="" border="0" style="display: block">                                                </a>                                            </td>                                            <td width="230">                                                <a href="http://cn.getthelabel.com/1005557.html/" target="_blank">                                                    <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/hot-3.jpg" alt="" border="0" style="display: block">                                                </a>                                            </td>                                        </tr>                                    </table>                                </td>                            </tr>                            <tr>                                <td>                                    <table width="690" cellpadding="0" cellspacing="0" border="0">                                        <tr>                                            <td width="115">                                                <a href="http://cn.getthelabel.com/brands/aeaeoeacoe/jackjones.html" target="_blank">                                                    <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/brand-1.jpg" alt="" border="0" style="display: block">                                                </a>                                            </td>                                            <td width="115">                                                <a href="http://cn.getthelabel.com/brands/aeaeoeacoe/underarmour.html" target="_blank">                                                    <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/brand-2.jpg" alt="" border="0" style="display: block">                                                </a>                                            </td>                                            <td width="115">                                                <a href="http://cn.getthelabel.com/brands/aeaeoeacoe/adidasoriginals.html" target="_blank">                                                    <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/brand-3.jpg" alt="" border="0" style="display: block">                                                </a>                                            </td>                                            <td width="115">                                                <a href="http://cn.getthelabel.com/brands/aeaeoeacoe/lacoste.html" target="_blank">                                                    <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/brand-4.jpg" alt="" border="0" style="display: block">                                                </a>                                            </td>                                            <td width="115">                                                <a href="http://cn.getthelabel.com/brands/aeaeoeacoe/uggaustralia.html" target="_blank">                                                    <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/brand-5.jpg" alt="" border="0" style="display: block">                                                </a>                                            </td>                                            <td width="115">                                                <a href="http://cn.getthelabel.com/brands/aeaeoeacoe/levis.html" target="_blank">                                                    <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/brand-6.jpg" alt="" border="0" style="display: block">                                                </a>                                            </td>                                        </tr>                                    </table>                                </td>                            </tr>                            <tr>                                <td>                                    <img src="http://onz7hvj5r.bkt.clouddn.com/active/img/20170427/about.jpg" alt="" border="0" style="display: block">                                </td>                            </tr>                            <tr>                                <td height="25" style="font-family: 'Microsoft YaHei', sans-serif; font-size: 12px; color: #000; text-align: center;">                                    此邮件由GetTheLabel提供                                </td>                            </tr>                        </table>                    </td>                    <td width="5"></td>                </tr>            </table>        </td>    </tr></table></body></html>

效果如下：

更多内容请参考：

http://www.ruanyifeng.com/blog/2013/06/html_email.html

http://www.websbook.com/Build/Talk/bxemailyjdHTMLymyz_18165.html

http://www.qdfuns.com/notes/17849/f8a3df8040af8729eb93a18655df9c4e.html

http://blog.csdn.net/purecss/article/details/11922049

阅读全文

0 0