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

  • 上面有提到colspanrowspan属性并不能很好的得到支持,所以尽量使用table嵌套解决此类问题
  • 所有的table一定要写的几个属性cellpaddingcellspacingborder,不同的浏览器、邮箱对此的默认值不同,写成我们希望的
  • 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),尽量使用



本文转自魏琼东博客园博客,原文链接:http://www.cnblogs.com/dolphinX/p/4082747.html,如需转载请自行联系原作者

相关文章
|
8月前
|
监控 搜索推荐 数据挖掘
电子邮件营销新风潮:五步高效撰写EDM文案
构建成功的EDM邮件营销策略涉及理解目标受众、设定营销目标、创建吸引人的主题、个性化内容和情感共鸣、强调价值点、以及持续测试和优化。了解受众特征和行为以定制文案,使用生动语言制造兴趣,通过个性化和情感化元素增强连接,突出产品优势并设置明确的行动号召。运用A/B测试评估文案效果,并监控数据以优化营销表现。Zoho Campaigns等工具可提供支持,包括模板、编辑器和A/B测试功能,助力打造高效邮件营销文案。
150 1
|
6月前
|
缓存 前端开发 测试技术
什么是七星创客系统丨七星创客系统开发规则玩法/设计方案/逻辑需求/案例项目/源码功能
七星创客系统开发指南是一个帮助开发人员理解并完成七星创客系统的开发任务的指南。以下是一个简要的开发指南需求:
|
6月前
|
算法 安全 数据安全/隐私保护
一对一语音视频交友系统开发详细指南丨案例设计丨功能需求丨方案逻辑丨项目流程丨源码教程
一对一语音视频交友系统开发指的是开发一种用于让用户通过语音和视频进行一对一交流的交友系统。该系统旨在提供一个平台,让用户可以通过语音和视频相互了解、交流和建立关系。以下是一对一语音视频交友系统开发的一些关键特点:
|
8月前
|
开发者
提升用户黏性:现成体育直播源码开发设计哪些关键功能
面对激烈的市场竞争,如何通过关键功能设计提升用户黏性,使之成为用户长期依赖的首选平台,是每一个开发者必须深思的问题。如下参考“东莞梦幻网络科技”现成体育直播源码,为了吸引更多用户并提高他们的黏性,开发哪些关键功能,帮助实现这一目标:
|
新零售 人工智能 供应链
七星创客/艾倍生/推三返一/系统开发方案项目/开发案例/规则玩法/源码程序
  所谓新零售即是个人、企业以互联网为依托,通过运用大数据、人工智能等先进技术手段,对商品的生产、流通与销售过程进行升级改造,进而重塑业态结构与生态圈,并对线上服务、线下体验以及现代物流进行深度融合的零售新模式。
|
安全 区块链 数据安全/隐私保护
dapp互助预约排单二二复制/三三复制大小公排项目系统开发稳定版/玩法详情/指南教程/规则方案/需求设计/案例源码
能合约在代码中加入了许多安全校验机制,比如对输入参数范围的检查、防止重入攻击的修复等。并且智能合约在运行过程中记录每一笔交易以及合约状态的变化,确保所有的交易和状态都是经过验证和授权的,不会受到篡改。
|
数据采集 传感器 搜索推荐
链动2+1系统开发流程需求/指南功能/玩法详情/案例设计/源码出售
骑行数据采集与展示:系统需要能够通过传感器或者设备连接手机等方式,实时采集骑行数据,包括速度、距离、时间等,并能将这些数据以可视化的方式展示给用户。
|
存储 前端开发 安全
dapp矩阵公排互助预约排单抢单项目系统开发指南流程丨案例设计丨功能逻辑丨规则玩法丨项目方案丨源码程序
需求分析:与团队明确系统的需求和目标,包括公排互助预约排单抢单项目系统的功能、规则、奖励机制等方面。
|
AndFix vr&ar 图形学
潮玩元宇宙/大逃杀游戏系统开发详细案例丨规则流程丨方案逻辑丨功能设计丨需求项目丨源码出售
The development of Chaoyu Metaverse Escape Game System refers to the creation and construction of a virtual reality game system to provide an immersive gaming experience, allowing players to participate in a virtual world for escape and combat.
NFT卡牌游戏链游系统开发(开发方案)/详情规则/成熟技术/设计界面/案例项目/源码程序
NFT (Non Homogeneous Token) card chain game refers to a game based on blockchain technology where NFT is used as the card in the game. NFT is a unique and non interchangeable digital asset that can represent various virtual cards, props, or characters in the game.