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. 微信小程序资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权. 1:下载开发者工具 ...

  2. 安装sqoop

    安装sqoop 1.默认已经安装好java+hadoop 2.下载对应hadoop版本的sqoop版本 3.解压安装包 tar zxvf sqoop-1.4.6.bin__hadoop-2.0.4-a ...

  3. 编写高质量的 Java 代码

    代码质量概述 代码质量所涉及的5个方面,编码标准.代码重复.代码覆盖率.依赖项分析.复杂度分析.这5方面很大程序上决定了一份代码的质量高低. 我们分别来看一下这5方面:编码标准:这个想必都很清楚,每个 ...

  4. unity 协程

    StartCoroutine在unity3d的帮助中叫做协程,意思就是启动一个辅助的线程. 在C#中直接有Thread这个线程,但是在unity中有些元素是不能操作的.这个时候可以使用协程来完成. 使 ...

  5. bzoj1009矩阵快速面+kmp

    其实kmp真的很次要,求长度为20的kmp感觉真的有点杀鸡用牛刀 这题思路相当明确:一看题就是数位dp,一看n的大小就是矩阵 矩阵的构造用m*m比较方便,本来想写1*m的矩阵乘m*m的,但是感觉想起来 ...

  6. 在VS2012下静态链接MFC的问题

    1>------ 已启动生成: 项目: MFCApplication1, 配置: Debug Win32 ------1>uafxcwd.lib(afxctrlcontainer2.obj ...

  7. C#委托与事件的简单使用

    前言:上一篇博文从原理和定义的角度介绍了C#的委托和事件.本文通过一个简单的小故事,来说明C#委托与事件的使用方法及其方便之处. 在阅读本文之前,需要你对委托和事件的基本概念有所了解.如果你是初次接触 ...

  8. AmazeUI 框架知识点－组件

    1.Badge 默认:添加 .am-badge class 到 <div> 或者 <span> 元素. 圆角:在默认样式的基础上添加 .am-radius class. 椭圆: ...

  9. BJITJobs : 北京IT圈高端职位招聘信息，成功率最高的高端求职渠道

    你有实力,但比你差的人都升了,你的师弟都年薪50万了,你还是找不到机会.为什么你离高端机会总是差一步呢?其实你离成功就差一次机会,一个适合你的高端职位的信息! 招聘网站不靠谱:三大网站都是低端职位为主 ...

  10. SQL执行效率2-执行计划

    以下语句可以进行SQL 语句执行时间分析,两个Go之间就是SQL查询语句 use Work--数据库名 go set statistics profile on set statistics io o ...