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都要写

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

然后是简写问题

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

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

  1. padding-top:4px;
  2. padding-...
  3. ...
  4. border-width:1px;
  5. border-style:style;
  6. 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），尽量使用

  1. <!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. 21分钟 MySQL 入门教程（转载！！！）

    21分钟 MySQL 入门教程 目录 一.MySQL的相关概念介绍 二.Windows下MySQL的配置 配置步骤 MySQL服务的启动.停止与卸载 三.MySQL脚本的基本组成 四.MySQL中的数 ...

  2. c语言快速入门2

    如果你想快速入门计算机,可以参考我的上一篇帖子,先了解一些必备的软知识,然后再来进行语言的快速入门 计算机入门基础知识 c语言快速入门1 1.1.12 函数的概念 函数的定义:c语言的基本单位,c语言 ...

  3. asp.net中获取本机的相关信息！（CPU、内存、硬盘序列号等）

    // 注意:首先要在项目bin目录中添加引用 System.Management using System;using System.Collections.Generic;using System. ...

  4. [leetcode]题型整理之用bit统计个数

    137. Single Number II Given an array of integers, every element appears three times except for one. ...

  5. Linux学习笔记（7）-进程

    明天开始学习进程,在以前的单片机开发中,都没有进程这个概念,但从网上了解到,这个东西在操作系统中似乎具有很重要的地位,一定好好学习! --------------------------------- ...

  6. 贝塞尔曲线（cubic bezier）

    对于css3的Transitions,网上很多介绍,相信大家都比较了解,这里用最简单的方式介绍下: transition语法:transition:<transition-property> ...

  7. pwnable.kr的passcode

    前段时间找到一个练习pwn的网站,pwnable.kr 这里记录其中的passcode的做题过程,给自己加深印象. 废话不多说了,看一下题目, 看到题目,就ssh连接进去,就看到三个文件如下 看了一下 ...

  8. 疑难问题解决备忘录（1）——LAMP环境下WordPress无法发现themes目录下的主题问题解决

    程序猿的宿命就是无穷无尽地解题,虽然可以说是解题的机器,但也无法达到解题之神的境界,碰到自己解决不了的问题那是家常便饭,尤其当遍寻Google和StackOverflow花了九牛二虎之力才解决的问题, ...

  9. vim配置及快捷键

    vim+python http://codingpy.com/article/vim-and-python-match-in-heaven/ vim+c++ http://jikaichen.com/ ...

  10. btrace使用

    btrace使用 目录btracee是btrace的解压目录 btrace/btrace是btrace的项目工程 root@ubuntu:/usr/local/bogon/btrace# tree b ...