EDM页面制作

1.什么是EDM页面

EDM 是 Email Direct Marketing 的缩写,即电子邮件营销,简称为邮件营销。是利用电子邮件(Email)与受众客户进行商业交流的一种直销方式。

同时也广泛的应用于网络营销领域。电子邮件营销是网络营销手法中最古老的一种,可以说电子邮件营销比绝大部分网站推广和网络营销手法都要老。

向目标客户发送EDM邮件,建立同目标顾客的沟通渠道,向其直接传达相关信息,用来促进销售。

EDM页面大多是WEB页 , 很多地方与我们平时按照W3C标准制作的网页是截然不同的

EDM页面如何制作

布局部分

1.html 编码请使用 utf-8。

2.html 代码在 15KB 以内。(各个邮箱的收件标准不一样,如果超出 15KB 您的邮件很有可能会进入垃圾箱)

3.页面宽度请设定在 600px 到 800px 以内,长度 1024px 以内(即用户之需要一次滚动屏幕就可浏览全部内容)。

4.关于布局都用老旧的方法 – table实现 

5.需要居中请在table 里设定 align="center"

6.在 td 里设置 margin 是无效的

7. outlook连基本的css都很多不支持,尤其是用于布局的css属性:display、position、float;

8.禁止使用外联样式表

9.若邮件模板内侧边或者上下有空白间距,不要用 padding,必须得用标准的 td 来设定空白间距,否则会导致各个邮箱解析不同。

10.如果样式里有margin:0 auto;这个样式不管用,建议写全margin:0px 15px;

各邮箱对div的css    float  position  margin  width  支持性

EDM页面制作

 

图片部分

1.制作edm邮件模板尽量不要使用背景图片

2.同一个 td 里只放一张图片,如 <td><img src="photo.jpg" /></td> ,同一段文字放在同一 td 里

2. outlook2007 里,gif 将不能正常显示

3.背景图片代码写法如下:<table background="background.gif" cellspacing="0" cellpadding="0"></table>,但请注意,outlook 对背景图片不识别

4.不要使用外链的 css 样式定义文字和图片 ,正确写法<td style="font-family:arial;font-size:12px;color:black">文字</td>

5.图片名称不能含有 ad 字符,否则图片上传后会显示成“被过滤广告”

6.整个邮件模板一定要裁成 2-3 张小图,并适当保留一些文字

7. 图片之间 , qq 邮箱 , gmail和火狐浏览器会存在较大缝隙 , 图片设置  style="vertical-align:top;display:block;border:'0'" 

 

 

文字部分

1.font-family 属性不能为空,否则会被 qq 屏蔽为垃圾邮件

2.邮件主题控制在 18 个字以内,避免使用特殊符号,容易产生乱码。

3.文字应尽量定义字体的样式,每个邮箱的默认字体样式不同,为了达到您想要的效果,字体样式一定要定义完整

4.不使用类似如下敏感及带促销类的文字:免费、优惠、特惠、特价、低价、便宜、廉价、视频、赚钱、群发、发财、致富、代开、薪水、

交友、支付、商机、法宝、宝典、秘密、情报、机密、保密、绝密、神秘、秘诀等。如果一定需要,请把敏感字做成图片。

5.gmail 邮箱邮件内容的字体会自动放大,与原来设定的字符大小不一致

 

其他部分

1.不使用javascript

2.负边距部分邮箱会被屏蔽,不能用

 

为什么用table布局?

div是web2.0的主流,但大部分客户端仍然处于web1.0时代。大部分邮件客户端机ISP会对某些标签添加自己默认的样式,

或不识别CSS属性,而导致邮件无法正常预览。div+css布局不太适合。在实现上,如果想快速达到效果,建议用多table嵌套。

这样可以避免很多的兼容问题,排位布局也变得很得心应手。

下图是主流ISP及邮件客户端对HTML的CSS属性支持情况:

 

邮件客户端名称 CSS属性支持情况
 
Yahoo!Mail CSS
Hotmail CSS
Gmail Tables+ 内联CSS
Outlook2003 and Outlook Express CSS
Outlook2007 Tables + 内联CSS
Lotus Notes Tables + 内联CSS
AOL 9 CSS
Mac Mail CSS

 

 

 为什么Microsoft Outlook2007需要兼容

Microsoft Outlook07决定更换渲染引擎为微软Word的Html渲染引擎 ,  以提高邮件安全性、增强渲染统一性。

截止目前为止,Outlook已使用了两种渲染引擎。首先, 收件箱中Html邮件显示采用IE渲染引擎,而回复或转发的Html邮件则使用了Word的Html渲染引擎。

于是,Outlook用户在创建和接收邮件过程中, 就会面临很多不统一的情形。因此,微软Outlook07新版本,决定了采用统一标准的渲染引擎,显示Html邮件。

尽管Outlook2007存在很多对Html 邮件的渲染弊端,但是发布以后,仍很快地在市场上拥有了较大的占有率。

 

Microsoft Outlook2007不支持的属性

  • 不支持表单

  • 不支持背景图像(CSS)

  • 不支持定位(CSS)

  • 不支持文本的Warp属性(CSS)

  • 不支持GIF动画

  • 不支持Flash及其他插件

 

 

 

 

 

 

 以上内容参考:

        https://www.cnblogs.com/crizygo/p/5543218.html

  https://www.pianshen.com/article/92632010020/

  https://www.cnblogs.com/yjzhu/archive/2012/11/05/2755155.htm

        https://www.cnblogs.com/tanyali/p/9043644.html

 

个人EDM编写示例

 

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" id="viewport" name="viewport">
    <title>成都婚博会冬季展</title>
    <style type="text/css">
        @media screen {
            #outlook a {
                padding: 0;
            }

            body {
                width: 100% !important;
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                margin: 0;
                padding: 0;
            }

            .ExternalClass {
                width: 100%;
            }

            .ExternalClass,
            .ExternalClass p,
            .ExternalClass span,
            .ExternalClass font,
            .ExternalClass td,
            .ExternalClass div {
                line-height: 100%;
            }

            table td {
                border-collapse: collapse;
            }

            a:hover {
                text-decoration: underline !important;
            }

            .button1:hover {
                border-color: #ff0000 !important;
            }

            .button1 a:hover {
                text-decoration: none !important;
                color: #ff0000 !important;
            }
        }

        @media only screen and (max-width: 400px) {

            table[class="ts100"],
            td[class="ts100"] {
                width: 100% !important;
            }

            table[class="stoh"],
            td[class="stoh"] {
                display: none !important;
            }

            td[class=linkleft] {
                font-family: 'GillSans', Gill Sans, Gill Sans MT, Calibri, Arial, sans-serif !important;
                letter-spacing: 0.5px !important;
                font-size: 13px !important;
                line-height: 15px !important;
                color: #ffffff !important;
                background-color: #000000 !important;
                text-transform: uppercase !important;
                "

            }

            *[class="subCol"] {
                display: table-footer-group !important;
                width: 100% !important;
                height: auto !important;
            }
        }
    </style>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>

<body style="margin:0;">
    <p style="margin:0; padding:0;"><span
            style="font-size: 1px; color: #ffffff; font-family: Microsoft YaHei,Microsoft JhengHei,Verdana,Arial; display: none;">冬季成都中国婚博会·10月底11月初,一站式结婚采购平台,满足你所有结婚所需</span>
    </p>


    <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff">
        <tbody>
            <tr>
                <td align="center">
                    <table style="max-width:640px;" width="100%" cellspacing="0" cellpadding="0" border="0">
                        <tbody>
                            <tr>
                                <td>
                                    <table width="50%" cellspacing="0" cellpadding="0" border="0" align="left">
                                        <tbody>
                                            <tr>
                                                <td style="font-size:0.875rem; color:#2a97fc;font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', SimSun, '宋体', Heiti, '黑体', sans-serif; border:1px solid #2a97fc; text-align:center;"
                                                    width="36%" height="30" align="center"><a
                                                        href="http://app.easilysend.com/t/zz?t=4F8075B3-DE3C-4CC2-9645-82C75463318F&amp;STARID=c16a7b51-0db9-48d2-9250-74f60eff98b2"
                                                        style="text-decoration: none; color: #2a97fc;"
                                                        target="_blank">不是我订阅的</a></td>
                                                <td width="6%">&nbsp;</td>
                                                <td style="font-size:0.875rem; color:#2a97fc;font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', SimSun, '宋体', Heiti, '黑体', sans-serif; border:1px solid #2a97fc"
                                                    width="26%" align="center"><a
                                                        href="http://app.easilysend.com/t/zz?t=4F8075B3-DE3C-4CC2-9645-82C75463318F&amp;STARID=c16a7b51-0db9-48d2-9250-74f60eff98b2"
                                                        style="text-decoration: none; color: #2a97fc;"
                                                        target="_blank">&nbsp;一键退订&nbsp;</a></td>
                                                <td width="6%">&nbsp;</td>
                                                <td style="font-size:0.875rem; color:#2a97fc;font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', SimSun, '宋体', Heiti, '黑体', sans-serif; border:1px solid #2a97fc"
                                                    width="26%" align="center"><a
                                                        href="http://app.easilysend.com/t/zz?t=7F545032-48C2-4037-9264-F9A9F17A189E&amp;STARID=c16a7b51-0db9-48d2-9250-74f60eff98b2"
                                                        style="text-decoration: none; color: #2a97fc;"
                                                        target="_blank">&nbsp;投诉举报&nbsp;</a></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <table width="50%" cellspacing="0" cellpadding="0" border="0" align="right">
                                        <tbody>
                                            <tr>
                                                <td style="color:#999999; font-size:0.875rem; font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', SimSun, '宋体', Heiti, '黑体', sans-serif; text-align:right;"
                                                    width="100%" height="30"><a
                                                        href="http://app.easilysend.com/t/zz?t=D49DE87F-74DB-4B3D-A46C-C71BD5B37923&amp;STARID=c16a7b51-0db9-48d2-9250-74f60eff98b2"
                                                        style="text-decoration:none; color: #999999;"
                                                        target="_blank">如果图片不能正常显示,<span
                                                            style="color:#2a97fc; text-decoration:underline;">请点击此处&nbsp;</span></a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="padding-top:5px;" align="center">
                    <table style="max-width:640px;" width="100%" cellspacing="0" cellpadding="0" border="0"
                        bgcolor="#ffffff">
                        <tbody>
                            <!--这里放置你的页面主体内容-->
                            <tr>
                                <td align="center">
                                    <a href="https://www.jiehun.com.cn/zhuanti/2004338/?src=cd_010909&uid=laokehuedm&app_channel=laokehuedm_cdty" target="_blank">
                                        <img width="100%" style="display: block; max-width:750px;" src="./images/edm_01.jpg" />
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" height="52">
                                    亲爱的{{{身份}}}{{{新娘}}}{{{新郎}}}
                                </td>
                            </tr>
                            <tr>
                                <td align="center" height="7">
                                    <img width="100%" style="display: block; max-width:750px;" src="./images/edm_04.jpg" />
                                </td>
                            </tr>
                            <tr>
                                <td align="center" height="42" style="color:#282828;">
                                    10月31-11月1日中国婚博会门票开始快递!
                                </td>
                            </tr>
                            <tr>
                                <td align="center" height="42" style="color:#282828;">
                                    我们特为您预留了一份<span style="color:#d74206;">《门票+结婚大礼包》</span>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" height="42" style="color:#282828;">
                                    如果您还有筹婚需求,请点击下方按钮
                                </td>
                            </tr>
                            <tr>
                                <td align="center" height="57">
                                    <a href="https://www.jiehun.com.cn/zhuanti/2004338/?src=cd_010909&uid=laokehuedm&app_channel=laokehuedm_cdty" target="_blank">
                                        <img width="100%" style="display: block; max-width:750px;" src="./images/edm_03.jpg" />
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" height="52">
                                    <a href="https://expo.jiehun.com.cn/chengdu/tuijian" target="_blank" style="color:#282828;">
                                        *邀筹婚好友,最高得<span style="color:#d74206;">600元</span>现金>>>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table style="max-width:640px;" bgcolor="#c9c9c9" align="center" width="98%" cellspacing="0"
                        cellpadding="0" border="0">
                        <tbody>
                            <tr>
                                <td>
                                    <table style="margin:0 auto;" width="100%" cellspacing="0" cellpadding="0"
                                        border="0">
                                        <tbody>
                                            <tr>
                                                <td
                                                    style="color:#ffffff; font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', SimSun, '宋体', Heiti, '黑体', sans-serif;font-size:0.8rem; line-height:22px; text-align:center; padding-top:15px;">
                                                    您之所以收到这封邮件,是因为您曾经注册中国婚博会。<br>
                                                    我们会严格保护您的隐私,绝不向外透露您的任何信息。<br>
                                                    如果您不希望再次收到邮件,请<a
                                                        href="http://app.easilysend.com/t/zz?t=4F8075B3-DE3C-4CC2-9645-82C75463318F&amp;STARID=c16a7b51-0db9-48d2-9250-74f60eff98b2"
                                                        style="text-decoration: underline; color:#fe0735; font-weight: bold; font-size:14px;"
                                                        target="_blank">【点此退订】</a>。<br>
                                                    任何问题欢迎您致电我们的服务热线:4000-365-520 。</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

 

上一篇:29 element-table样式更改


下一篇:分享一张可以用来做动态背景的gif