EDM制作要点

EDM是Email Direct Marketing的缩写，虽然也是html，但是和我们在网页上使用的html不同，因为安全原因，各大邮箱服务商级邮件客户端都会对邮件内容进行一定程度上的处理，不会按照你写的原本的html展示

避免垃圾邮件

即使邮件做的再精美，被邮箱自动识别为垃圾邮件也白费，每个邮箱都有自己的垃圾邮件识别规则，了解一下可以避免EDM被当作垃圾邮件，关于这点知乎上哟个经典的问题怎么样才能让自己服务器发出的邮件不被 Gmail、Hotmail、163、QQ 等邮箱放入垃圾箱？

绝大多数是服务器设置、发送频率等，前端需要注意的主要是邮件内容部分

  1. 图文比例，图片比例过大或者只是简单切图组成的邮件称为垃圾邮件的概率很大，多数邮箱对图片大小也有限制，一般图片超过150k后几乎所有邮箱都不会默认加载邮件中的图片，这也是需要注意的地方
  2. 标题，标题中带有链接或者明显是推销字眼如发票、促销、免费等关键字也容易被判断为垃圾邮件
  3. 内容中出现大面积黄色、红色强调的文字，或者字号超大的文字也是判断垃圾邮件的依据之一
  4. 链接、图片地址尽量使用短而有意义的字符
  5. 邮件中包含附件或者js代码也会加大被识别为垃圾邮件的概率
  6. 标题字符全部大写，带有过多感叹号等也是垃圾邮件的标志

常见的垃圾关键词包含：发票、发财、致富、代开、薪水、交友、支付、商机、法宝、宝典等，还有政治敏感词汇

基本准则

在编写EDM的时候有几个不同于页面的基本准则

控制宽度

由于Outlook仍然是邮件客户端的霸主，默认界面邮件的科室宽度对于一般屏幕在800px左右，所以不要把邮件内容设置的过宽，700px是个不错的选择

table布局

这几乎是EDM与普通页面html最大的区别，因为各个邮箱对div＋css这一套布局的解析问题很大，基本各大邮箱都会解析混乱，所以老式的table布局时上乘之选

这就意味着EDM中几乎只有这几个元素table、tr、td、span、img、a，计量避免使用div、p或是其他标签

使用table布局需要注意的一点是并不是所有邮箱很支持colspan、rowspan属性，尽量使用table嵌套解决

body之外的内容几乎没用

我们知道完整的html包括DOCTYPE声明、html标签、head标签及其内容、body标签，对于在一个iframe中显示邮件内容的邮箱
还好，会保留上述结构，但是有些邮件（Gmail）都是在div中直接包含EDM，这就对安全要求极为苛刻，后续讲的几个要点基本原因这是安全

安全原因邮箱会默认把上述结构做删除处理，所以在有些情况下写了几乎没有作用，不要试图以来head标签内的meta或者其他内容（如果真多海外用
户，Gmail会删除），在可能的情况下尽量把内容写到body内，甚至很多EDM的建议是从table开写，直接放弃DOCTYPE、html、
head、body标签

尽量使用內联样式

写html就离不开css，EDM并不支持外部的style文件，上面讲到head标签极有可能被删除，所以不要试图在head标签内写style标签。

在body内写style标签是不是就保险了呢？ 也不是，典型的就是Gmail邮箱，会把EDM内所有style标签删除，这就意味着只有內联的style属性内的CSS是唯一可靠的样式信息

能使用属性就不用样式

并不是使用style属性就保险了，很多邮箱会对特定标签的属性做强制改造，比如把所有td的line-height设成1.2等，使用style属性并不是保险的，所以在有属性能够实现样式的时候尽量使用属性，常见的属性有

table

  • width
  • bgcolor
  • align

td

  • align
  • valign
  • bgcolor
  • height
  • width

img

  • width
  • height

对于加粗字体我们可以使用b标签而不是css的font-weight

样式书写

EDM的样式书写也有很多让人吃惊的地方

属性的支持

EDM对CSS支持的匮乏是令人震惊的，普遍支持的几乎就剩支持文字、背景颜色相关的属性，我们可以在The Ultimate Guide to CSS看到具体支持情况

  • Gmail对所有的style标签都不支持
  • 稍微高级的选择器Yahoo和Gmail普遍不支持，这个对于针对国内市场的同学还能接受国际市场的就悲剧了
  • 文字相关的CSS2的基本都支持，但是font-size、font-family基本各个客户端都有默认值，保险起见，写上自己的；text-indent只对块元素生效，基本使用td的padding可以解决
  • background支持比较好的就是color，不要为EDM添加背景图片，多数邮箱不支持
  • box相关的border的支持不错，height和width也基本可以，padding和margin的支持并不尽如人意，一个好的建议是不使用margin，主要靠空的、有width和height的td与其padding解决间距问题
  • 位置、显示相关的基本EDM很少设计，不要使用float、position属性即可

如果想写出在各个邮箱上看起来都不错的邮件，能用的CSS极其有限，也许看到这里就能明白为什么很多EDM的代码看起来很挫，但是这还没完，套用美剧中常出现的“It‘s just the beginning”

继承与简写

在写页面的时候利用CSS的继承和简写会为我们带来很多便利，但是到了EDM，一切都要NO！

首先是继承，其实继承规则依旧有效，但是多数邮箱都会有一套自己的规则，比如line-height，如果我们的元素没有设置，它会以內联样式的形式自动添加，这就造成我们不能轻易依赖继承规则，所有几乎有问题的td都要写

style="color:#333;font-size:12px;font-family:Arial;line-height:1.5;"

然后是简写问题

padding:4px;
border:solid 1px #999;

类似的代码很常见，但是鉴于EDM的特殊性，建议大家不要这么写，color的代码也要写成六位，而不是简写为3位

padding-top:4px;
padding-...
...
border-width:1px;
border-style:style;
border-color:#999999;

元素的特殊性

table

  • 上面有提到colspan、rowspan属性并不能很好的得到支持，所以尽量使用table嵌套解决此类问题
  • 所有的table一定要写的几个属性cellpadding、cellspacing、border，不同的浏览器、邮箱对此的默认值不同，写成我们希望的
  • table使用border的时候添加border-collapse的属性值为collapse
  • 使用bgcolor定义table的背景颜色
  • td的内容默认是水平左对齐、垂直居中对齐
  • td的属性十分丰富，对其、尺寸、背景

img

  • 做好图片默认不被加载的预期，Gmail非通讯录邮箱的邮件图片默认都不加载，所以要写上width、height与alt属性
  • 仅包含图片的td把line-height设置为0，否则会有间隙，在图片并列的时候尤为明显，很多人也建议设置样式display:block，虽然一样能实现，但是不推荐
  • 很多时候邮箱会为图片默认加上边框，确认不需要的话将其border属性设置为0

p

少用p标签，hotmail会先过滤掉p标签的margin然后再加上hotmail系统默认设置的值；qqmail会给p设定一个line-height值

DOCTYPE

如果一定要使用完整的html（其实这是有用的，尤其是对于响应式的EDM），尽量使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
时间： 2024-10-06 14:11:56

EDM制作要点的相关文章

用debootstrip制作debian环境的rootfs

使用场景: 让我们的开发板像pc机上的debian系统一样,缺啥软件直接apt-get 安装就行,免去了各种交叉编译和移植,是不是很方便啊! 制作要点: 主要工作就是debootstrip这个工具完成的,它会在你指定的目录下生成必要的文件夹和文件.你或许只要修改一下inittale就行. 步骤: 见附件文档. 原文地址:https://www.cnblogs.com/xxg1992/p/8855894.html

Flash部分常识

动态的表现手法:移动模糊的图来表示告诉移动的人或物.游戏的速率:FPS一般设置为24.游戏的加速度:补间动画的缓动表示加速度.关于反弹:弹性配合加速度,就可以提现物体的重力和运动的真实情况了.惯性:突然发生动作或突然静止的时候.         小汽车要告诉向前运动时:闲稍微向后运动一点,表现原来静止带来的惯性.         告诉运动的小汽车突然停止:可以给他以形变,然后恢复,体现告诉运动的惯性.视觉冲击力:      1:速度的变化与周围的环境.      2:运动的面积:告诉闪动也不错,

最新深度技术GHOST XP系统旗舰增强版 V2016年

来自系统妈:http://www.xitongma.com 深度技术GHOST xp系统旗舰增强版 V2016年 系统概述 深度技术ghost xp系统旗舰增强版集合微软JAVA虚拟机IE插件,增强浏览网页时对JAVA程序的支持,添加安装华文行楷.华文新魏.方正姚体.汉真广标等常用字体.以系统稳定为第一制作要点,收集市场常用硬件驱动程序,安装维护方便快速 - 集成常见硬件驱动,智能识别+预解压技术,绝大多数硬件可以快速自动安装相应的驱动.加快“网上邻居”共享速度:取消不需要的网络服务组件,系统支

扒拉扒拉table

现如今,table被我们中的绝大多数所厌弃,都啥年代了...年代归年代啦,table在特定的时候还是有用的,毕竟W3C标准没有废之. 说到table的不好,大家肯定一口气说出好几个,但是我们先来说说哪些情况用table甚至是必须 1.展示多数据列表 如今table的本义应当用作数据列表的地方,对于一些数据处理用table显得更加有序和语义. 2.EDM制作EDM,table差不多就是必须的(你别告诉楼主你的EDM直接是一张图片). 说完了table的可用之处就到了它的缺点了,当小伙伴们迭代一个老

HTML（四）

html表格 table常用标签 1.table标签:声明一个表格 2.tr标签:定义表格中的一行 3.td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格 table常用属性: 1.border 定义表格的边框 2.cellpadding 定义单元格内内容与边框的距离 3.cellspacing 定义单元格与单元格之间的距离 4.align 设置单元格中内容的水平对齐方式,设置值有:left | center | right 5.valign 设置单元格中内容的垂直对

超文本标记语言HTML

介绍html文档的基本结构,html常用标签的使用,理解html语言制作网页基本原理. html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打

1.8、html表格

table常用标签 1.table标签:声明一个表格 2.tr标签:定义表格中的一行 3.td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格 table常用属性: 1.border 定义表格的边框 2.cellpadding 定义单元格内内容与边框的距离 3.cellspacing 定义单元格与单元格之间的距离 4.align 设置单元格中内容的水平对齐方式,设置值有:left | center | right 5.valign 设置单元格中内容的垂直对齐方式 top

EDM邮件营销的模板制作规范

下面博主给大家介绍一下EDM邮件营销的模板制作规范. 一.不要使用DIV,使用table嵌套. 一般来说,由于邮件客户端软件的不同,使用div容易出现错位和布局混乱的情况,因此最好选择table嵌套解决这类问题. 二.模板编码语言的选择. 这里给大家推荐的utf-8编码,这个编码是运用的最为广泛的编码方式.如果选择其他编码,有可能出现乱码的情况. 三.CSS样式编写注意事项. 不要使用外部样式表引用,应该直接将样式表写在模板的内部,这样可以解决css利用不上的问题.原因是有些邮件客户端编译时会将

EDM邮件制作指南

专业的 edm 邮件发送,是有严格的制作要求的,本指南从格式编码.文字.图片及链接四个方面给出指引,请逐条按照本指南制作您的 edm 邮件模板. 格式编码 1.页面宽度请设定在 600px 到 800px 以内,长度 1024px 以内. 2.html 编码请使用 utf-8. 3.html 代码在 15KB 以内.(各个邮箱的收件标准不一样,如果超出 15KB 您的邮件很有可能会进入垃圾箱) 4.请使用 table 表格来布局.同一个 td 里只放一张图片,如 <td><img src