EDM 文件编写规范及注意事项
EDM 是营销过程中比较重要的一种方式,而且在很多软件系统中,也经常会与用户进行电子邮件(Email)的沟通过程。本文档定义了电子邮件(Email)编码规范,便于前端开发工程师为邮件编写 HTML 模板的时候使用。
Web 页面一般使用的是浏览器来进行渲染,而电子邮件多使用的是邮件客户端,如:Outlook、Foxmail、手机客户端APP等。所以,电子邮件要适配这些终端的渲染方式,因此标准和我们平时开发的规范有所不同。
可使用标签
因为邮件过滤机制,只容许表格的布局模式,书写时候多加注意不要使用 flex
或者 block
的布局模式,可通过过滤机制的标签如下:<table>
、<img>
、<span>
注意事项
1. 使用表格布局,使用 <table>
标签
因为大多邮件客户端对 CSS 的支持度不高,特别是 <p>
和 <div>
标签,有些邮箱就会把这些标签直接过滤掉,而 90% 邮箱客户端对 <table>
的兼容性很好,而以上的并不能得到很好的兼容,所以一定要用 <table>
。
同理,也不要使用 flex
和 block
这些布局模式,在一些电子邮件客户端,对这些元素的支持不好,容易展示错乱。
建议书写格式:
<tablewidth="720px"border="0"cellspacing="0" // 表格单元格间距cellpadding="0"style="background: red;">
<tr><td colspan="2"></td>
</tr>
<tr><td></td><td></td>
</tr>
</table>
2. 必须使用内联的样式
CSS 样式不能使用嵌入和外联方式,一定要使用内联方式。
3. 记得使用 utf-8 的编码方式
你没办法知道用户使用的邮件接收方式,这完全是一个黑盒,所以不能依赖用户使用的邮件客户端,一定要自己设置编码方式,以免错乱,字体乱码等。
4. 文件大小不要超出 15k
我们肯定是希望邮件被扔在垃圾箱,当 HTML
代码超过 15k 时候,容易被扔进垃圾箱里面。为了达到这个目的,我们的图片也需要压缩。
5. 图片的注意事项
5.1 背景图要使用在线地址或者是 baes64
如果是相对地址,EDM 时候是找不到对应的资源的,需要转为在线地址或者 base64
的格式,当然也需要考虑图床是否稳定的问题。另外,避免背景图图裂或者不识别的问题,记得设置一个类似的背景色,不然布局会展示很奇怪。
因为 EDM 还是很大概率会被扔进垃圾桶的,书写时候需要多加注意扔进垃圾桶后的展示效果。以发送到谷歌邮箱被扔进垃圾桶为例,图片都会直接裂开,无论是 img
还是 background
都会裂开,所以需要设置一个背景颜色优化一下页面。
此外注意:
- 在线地址的长度,不能超过 255 个字符,会导致无法追踪或链接错误。
- outlook 对背景图片不识别。
建议书写格式:
background: url('https://xxxxxxxx');background: url('')
5.2. 图片使用添加 alt
属性
这个操作也是为了避免图裂也能让用户知道这个图是什么,试想一下,同样是扔进垃圾箱,如果图一有展示 alt
属性说明是什么内容,图二什么都没有展示只有一个图裂的样式,你会选择打开哪一个?
建议书写格式:
<img src="http://xxxxx/xxx.jpg" alt="这个图的解释" >
5.3. 如果只有一张图,建议开 2-3 张图展示
有可能因为只有一张图,直接过滤掉扔进垃圾桶了,可以拆封 2-3 张图,中间混杂一些文字会好一点。
5.4. 不要使用 png 格式的图,请使用 jpg 或者是 gif 格式的图
如果一定要动态的效果,请使用 gif
,不要使用 FLas、frames.
5.6. 记得加上 vertical-align: bottom;
不然图片可能位置乱跑,达不到想要的效果哦!
5.7. 图片名称不要带有 ad
的字样,否则会被识别成过滤的广告。
**6. 不要使用 position
,margin
**
position
邮件客户端兼容性不高,比方说谷歌邮箱这里不生效。margin
不能使用负边距,如果真的很想达到那个效果,请使用图片裁取的方式或者利用table
的tr
或者td
来达到效果。margin
部分邮件margin-top
,margin-bottom
是不生效的,像垂直方向的定位问题,建议还是利用table
表格的方式来实。
7. 超链接注意事项
邮件会自己识别链接和邮件,即使在书写 HTML
代码的时候没有书写 <a>
标签,还是会自动转为超链接,样式为蓝色+下划线。
如果对这部分的样式有额外的要求,一开始就书写成超链接的形式,避免样式覆盖哦!
建议书写格式:
<astyle="color: #2ac877; text-decoration: none;"href="https://xxxxxxxxx"target="_blank">https://xxxxxxx
</a>// 如果不想另外打开一个页面,只是单纯让他为文本的话,建议这么书写
<astyle="color: #000000; text-decoration: none;cursor:default;"href="javascript:return false;">http://xxxxxxxxxx</a>
8. 其他需要注意事项
- 换行请使用
<br/>
,不要使用<div>
、<p>
- 不要使用
XHTML
,请使用HTML
- 内联样式的书写格式,不要使用属性简写
建议书写格式:
<span style="font-size: 12px; font-weight: bold;">超级无敌小湾娘</span>
- 邮件主题控制 18 字内,避免使用————!.. 符号,以免乱码。同时也不要加入网站地址的信息,比方说,“www.baidu.com 祝您新年快乐”,请使用 “百度祝您新年快乐”
参考文章:
- EDM文件编写规范及注意事项
- EDM电子邮件CSS和HTML编码规范
EDM 文件编写规范及注意事项相关推荐
- JAR包中的MANIFEST.MF文件详解以及编写规范
JAR包中的MANIFEST.MF文件详解以及编写规范 参考百度百科的解释如下: http://baike.baidu.com/item/MANIFEST.MF MANIFEST.MF:这个 mani ...
- 自动化测试岗位求职简历编写规范+注意事项,让你的简历脱颖而出
目录 前言 1.个人信息 2.教育背景(写最高学历) 3.个人技能(按精通/掌握/熟练/了解层次来写) 4.工作经历 5.工作经验/项目经历 6.自我评价 总结 前言 挑选一个阅读舒适度不错的模板 H ...
- Oracle SQL 对象的命令和编写规范
一. 对象命令规则 1.1 数据文件 如果数据库采用文件系统,而不是裸设备,约定下列命名规则: 1) 数据文件以表空间名为开始,以.dbf为结尾,全部采用小写英文字母加数字命名 ...
- 嵌入式编程规范及注意事项
嵌入式系统已经在各行各业中得到了广泛的应用,随着人们的生活向信息化,智能化的发展,嵌入式技术将彻底融入到我们的生活,在我们的生活当中扮演越来越重要的角色.对于嵌入式系统来讲,嵌入式软件相当于嵌入式系统 ...
- FPGA Vivado XDC 约束文件编写方式语法笔记
参考手册: UG625:https://china.xilinx.com/support/documentation/sw_manuals/xilinx14_7/cgd.pdf UG903:https ...
- 项目文档编写规范与代码规范
往往越是规模大的公司,其项目工作中的每一个环节都有相应的规范进行管理,这些规范都是都前辈呕心沥血,披荆斩棘所获的的经验总结,而非普通文书工作者的推猜可得. 当然,如果刚刚创业起步的小公司如能更早的抓住 ...
- Android.mk文件语法规范及使用模板 (转载)
2019独角兽企业重金招聘Python工程师标准>>> http://blogold.chinaunix.net/u3/99423/showart_2206760.html Andr ...
- Verilog 编写规范
在学习Python时,作者有一句话对我影响很大.作者希望我们在学习编写程序的时候注意一些业内约定的规范.在内行人眼中,你的编写格式,就已经暴露了你的程度.学习verilog也是一样的道理,一段好的ve ...
- Python实训day01pm【练习题、文件编写、列表的使用】
Python实训-15天-博客汇总表 目录 Jupyter中文用户名导致无法运行的问题 练习题 练习1 练习2 Python文件编写注意事项 Python列表 list:有序列表 Jupyter中文用 ...
- .NET代码编写规范 整理
.NET代码编写规范 - [ASP.NET] 2009-02-26 | Tag: 版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://lenspe.blogbus.com/ ...
最新文章
- Scapy学习笔记一
- 【深度学习】ICCV2021|性能优于何恺明团队MoCo v2,DetCo:为目标检测定制任务的对比学习...
- 牛客题霸 SQL2 查找入职员工时间排名倒数第三的员工所有信息
- (找水王)编程思维训练
- [Golang] GOROOT、GOPATH和Project目录说明
- STM32之GPIO浮空输入例程
- 吴恩达深度学习4.2练习_Convolutional Neural Networks_the Happy House(Keras)
- 微信小程序——案例:收货信息表单
- 族谱软件系统的使用介绍
- 个人所得税 java_通过Java程序计算个人所得税
- XP系统清理优化工具箱
- 【分子动力学模拟】centos7使用gmx_MMPBSA时使用gmx_MMPBSA_ana时无法调用pyqt5
- YII2.0电商平台开发笔记
- STEP和IGES模型转换为适用Web的glb格式
- MySQL解压版安装及配置(本地windows环境)
- android 高仿酷狗源码,项目源码--Android类似酷狗音乐播放器
- Java使用cookie和session管理用户状态
- Linux用wget和curl下载jdk
- 企业微信脚手架(企业内部)
- egret 实现图片一次闪光效果
热门文章
- 手机linux发短信的命令,用AT指令操作短信猫发短信
- C03-Java同步实践加强班
- 防止外包不给钱 php,程序员接私活,怎样防止做完不给钱?
- 怎么引入oracle驱动包,Maven引入oracle驱动包
- UNIX环境高级编程-第六章-系统数据文件和信息
- 新手入门指南 | 教你如何写研报?
- svn访问路径提示Unable to connect to a repository at url
- 路由器桥接LAN接LAN口(改DHCP以及详细避坑教程)
- android快速复制粘贴,Android开发复制和粘贴
- U盘修复“系统找不到指定文件”问题解决方法