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">

几篇有用的文章

HTML电子邮件应该知道的一些事

从头开始构建一个HTML电子邮件模板

HTML Email 编写指南

EDM制作要点的更多相关文章

  1. EDM邮件制作

    EDM营销(Email Direct Marketing)也叫:Email营销.电子邮件营销.是指企业向目标客户发送EDM邮件,建立同目标顾客的沟通渠道,向其直接传达相关信息,用来促进销售的一种营销手 ...

  2. (转)EDM邮件制作规范完整版

    转载:http://www.maildesign.cn/archives/1380 在我们的日常工作中,经常需要发送邮件和我们的会员沟通.如注册确认.营销推广等.这些由站方发给会员的信件,往往纯文本格 ...

  3. 用UltraISO制作支持windows 7的U盘启动盘

    用UltraISO制作U盘启动盘,有人写过,我也看过,不过依照网上的那些文章,成功的并不多,经过几次试验,在不同的主板环境下成功概率高的方法应该如下:   1. UltraISO建议9.3以上 2. ...

  4. WPF中桌面屏保的制作（主要代码）

    原文:WPF中桌面屏保的制作(主要代码) 制作要点:(1) 使用System.Windows.Threading.DispatcherTimer;(2) 将Window属性设置为:      this ...

  5. 制作简单的WPF时钟

    原文:制作简单的WPF时钟 在很早之前,我曾经写过一个GDI+的时钟,见"C#时钟控件 (C# Clock Control)" http://blog.csdn.net/johns ...

  6. 微信小程序canvas 证件照制作

    小程序制作证件照过程 利用canvas制作生活中常用的证件照,压缩图片,修改图片dpi.希望给大家带来方便. 证件照小程序制作要点 上传合适的图片,方便制作证件照 调用AI接口,将图像进行人像分割.这 ...

  7. 最新GHOST XP系统下载旗舰增强版 V2016年

    系统来自:系统妈:http://www.xitongma.com 深度技术GHOST xp系统旗舰增强版 V2016年3月 系统概述 深度技术ghost xp系统旗舰增强版集合微软JAVA虚拟机IE插 ...

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

    来自系统妈:http://www.xitongma.com 深度技术GHOST xp系统旗舰增强版 V2016年 系统概述 深度技术ghost xp系统旗舰增强版集合微软JAVA虚拟机IE插件,增强浏 ...

  9. 最新GHOST XP系统安全稳定版 V2016年

    来自系统妈:http://www.xitongma.com 电脑公司GHOST xp系统经典优化版 V2016年4月 系统概述 电脑公司ghost xp系统经典优化版集成最常用的装机软件,集成最全面的 ...

随机推荐

  1. vue2.0有哪些变化

    vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...

  2. fragment嵌套问题

    fragment嵌套里面不能用再用getActivity().getFragmentManager()要用getChildFragmentManager()

  3. 阿里云linux ecs服务器配置apache+php环境

    我们需要安装的软件有apache,php和MySQL. 首先关闭SELINUX(SELINUX是一个安全子系统,它能控制程序只能访问特定文件.如果不关闭,你可能访问文件受限): vi /etc/sel ...

  4. 【转载】给那些想多学习，多进步的Domino初学者

    在这个社区里面,包括QQ技术群里面混了很久了.遇到了很多Domino初学者,也认识了很多致力于Domino这个技术领域的朋友,很开心.很久没有写长篇大论给大家了.我要把一些想法写出来,共大家参考.讨论 ...

  5. Oracle 查询出来的数据取第一条

    Oracle 查询出来的数据取第一条 --------------------------------------------------------------------------- 转载自:h ...

  6. java方法重载（overload）、重写（override）；this、super关键简介

    一.方法重载: 条件:必须在一个类中,方法名称相同,参数列表不同(包括:数据类型.顺序.个数),典型案例构 造方重载.  注意:与返回值无关 二.方法重写: 条件: (1)继承某个类或实现某接口 (2 ...

  7. A*算法的原理 <转>

    第一部分:A*算法简介    写这篇文章的初衷是应一个网友的要求,当然我也发现现在有关人工智能的中文站点实在太少,我在这里 抛砖引玉,希望大家都来热心的参与.     还是说正题,我先拿A*算法开刀, ...

  8. 织梦cms更新新建的栏目提示：DedeTag Engine Create File False:C:/phpStudy/WWW/

    这个问题怎么解决呢?只是更换了一下栏目名称.增加了新的栏目,结果就不行了. 问题原因: 新建的栏目没有"列表命名规则",导致cms解析的时候,出现解析错误. 解决办法 在下图填入: ...

  9. 手把手教你搭建深度学习平台——避坑安装theano+CUDA

    python有多混乱我就不多说了.这个混论不仅是指整个python市场混乱,更混乱的还有python的各种附加依赖包.为了一劳永逸解决python的各种依赖包对深度学习造成的影响,本文中采用pytho ...

  10. A library of generic data structures

    A library of generic data structures including a list, array, hashtable, deque etc.. https://github. ...