关于前端:前端高质量邮件信开发实现-📧

背景

最近做了公司产品邀请成员退出发送邮件信的需要，邮件信是显示在各种邮箱客户端里的 HTML页面，有很多兼容性问题。本文内容次要是对邮件信开发过程中须要留神的中央的总结、对收集到的邮件信相干材料整顿总结、以及对开发高质量邮件信的倡议。

什么是邮件信

在咱们的日常工作中，常常须要发送邮件进行注册确认、营销推广等咱们须要发送 HTML 邮件，这就是 邮件信EDM。因为 HTML 邮件不寄存于本人的服务器，通过邮件服务器来展示，因而编写HTML邮件与编写 HTML 页面有很大的不同。支流邮箱往往会对它们接管到的 HTML 邮件在后盾进行过滤，对 JS 代码进行严格过滤，包含所有的事件监听属性，如 onclick、onmouseover 等。CSS 代码也会被局部过滤。这是基于邮件 安全性 的思考。

低质量邮件信 `👎`

博客园 评论告诉：邮件内容尽管简明扼要，然而作为官网收回的邮件，款式短少权威性，很容易被疏忽。
某广告邮件：款式排版布局芜杂，一眼就能辨认出是垃圾邮件 🗑，齐全没有仔细阅读的欲望。

高质量邮件信 `👍`

SegmentFault 评论告诉：同样作为技术博客网站，醒目的主题款式除了突显官网权威性之外，也能达到品牌宣传的作用。
Frontend Focus 订阅邮件：题目、banner、文章列表层次结构明显，使读者可能清晰疾速地定位到本人感兴趣的内容，整洁的款式也能吸引更多的读者订阅。

实现高质量邮件信

实现成果

首先展现本文内容实现的邮件信示例模版实现成果，邮件信由页面顶部和页脚的提醒以及主体内容组成。主体内容中，有些元素只有 一列 内容、有些元素有 左右两列、有些元素有 左中右三列，根本满足理论开发需要，大家能够参照实现。

🔗 在线预览：https://dragonir.github.io/st…

代码实现

在 <style> 标签中能够增加全局款式代码，大部分邮箱都反对在 header 标签中增加款式，不过也有可能多数古早的邮件客户端会将这部分款式过滤掉，在这种邮箱客户端中只能通过 行内款式 来解决。

<style type="text/css">
 body, #header h1, #header h2, p {margin: 0; padding: 0;}
 #main {border: 1px solid #cfcece;}
 a {color: #2d95ec;}
 img {display: block;}
 #top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
 #header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }
 #header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important; padding-bottom: 0; }
 #header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px;  }
 h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}
 h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
 h4 {font-size: 22px; color: #2d95ec !important; font-family: Arial, Helvetica, sans-serif; }
 h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
 p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5; }
</style>

如上面示例代码所示，html 应用 table 布局，以便于尽可能兼容所有邮件客户端。页面父级容器是一个 table 元素，它 3 个子元素也是 table 元素，第一个 id="top-message" 和第三个用于在页面顶部和页脚显示提示信息、第二个 table id="main" 是邮件信的主体局部，它外面的每个子元素模块也是 table 元素，而页面的内容次要填充在 tr 与 td 元素中。

<body>
  <table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>
    <table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
      <tr>
        <td align="center">
          <p>在邮箱中预览有问题? <a href="#">在浏览器中关上</a></p>
        </td>
      </tr>
    </table><!-- top message -->
    <table id="main" width="600" align="center" cellpadding="0" cellspacing="15" bgcolor="ffffff">
      <tr>
        <td>
          <table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="8fb3e9">
            <tr>
              <td width="570" bgcolor="2d95ec"><h1>Communitech Venture Services</h1></td>
            </tr>
            <tr>
              <td width="570" bgcolor="2d95ec"><h2 style="color:#ffffff!important">News and Events</h2></td>
            </tr>
            <tr>
              <td width="570" align="right" bgcolor="2d95ec"><p>October 2021</p></td>
            </tr>
          </table><!-- header -->
        </td>
      </tr><!-- header -->
      <tr>
        <td></td>
      </tr>
      <tr>
        <td>
          <table id="content-1" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td width="170" valign="top">
                <table cellpadding="5" cellspacing="0">
                  <tr><td bgcolor="ffffff"><img src="https://tricell.fun/email/images/example/emoji.png" width="160" /></td></tr></table>
              </td>
              <td width="15"></td>
              <td width="375" valign="top" colspan="3">
                <h3>All New Site Design</h3>
                <h4>It's 150% Better and 40% More Efficient!</h4>
              </td>
            </tr>
          </table><!-- content 1 -->
        </td>
      </tr><!-- content 1 -->
      <tr>
        <td>
          <table id="content-2" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p></td>
            </tr>
          </table><!-- content-2 -->
        </td>
      </tr><!-- content-2 -->
      <tr>
        <td height="30"><img src="https://tricell.fun/email/images/example/blank.png" /></td>
      </tr>
      <!-- 省略两头相似模块 -->
      <tr>
        <td>
          <table id="content-6" cellpadding="0" cellspacing="0" align="center">
            <p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
            <p align="center"><a href="#">CALL TO ACTION</a></p>
          </table>
        </td>
      </tr><!-- content-6 -->
    </table><!-- main -->
    <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
      <tr>
        <td align="center">
          <p>之所以您会收到该邮件📧，是因为您曾经在咱们网站订阅了更新音讯！</p>
          <p><a href="#">勾销订阅</a> | <a href="#">举荐给好友</a> | <a href="#">在浏览器中查看</a></p>
        </td>
      </tr>
    </table><!-- top message -->
  </td></tr></table><!-- wrapper -->
</body>

🔗 残缺代码：https://github.com/dragonir/s…

测试高质量邮件信

实现邮件信页面开发后，就须要在不同邮箱中进行测试，以便于发现在不同邮件客户端中的款式的错乱问题。网易邮箱 有增加代码性能，咱们能够间接将开发好的邮件信代码贴进邮件里，而后发送给其余邮箱进行测试。QQ邮箱 也有间接上传 html 文档的性能。（我去年2020年测试的时候是能够用的，明天我上传时接口会报错 😓）189邮箱 以前也有增加代码的性能，明天我去测试的时候发现曾经下线了该性能，可能是出于安全性的思考 😓。

高质量邮件信代码编写准则

这部分内容总结了上述邮件信开发过程中须要留神的问题，提前理解这些规定能够进步开发效率，少走一些弯路 😊。

页面宽度：举荐 600px – 800px，最大不要超过 800px。
页面布局：制作 email页面时，不要应用 css+div 来布局，应用 table 来布局。
款式：定义文字或图片款式时，不要应用外链 css 款式，正确的做法请将款式书写在 <td> 或 <font> 里。

<td style=”font-family:Arial; font-size:12px; color:#000000;” >text</td>
<font style=”font-family:Arial; font-size:12px; color:#000000;” >text</font> <!-- 已废除 -->

💡 外链的 css 款式在邮件里将不能被读取，发送进来的邮件会失去款式。

动静内容：不应用 Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML，如果页面中的图片肯定要是动静的，能够应用 gif 动图。
标签：<table> 以外的 body、meta 和 html 之类的标签是能够忽视的，邮箱零碎里会把这些过滤掉。
背景图片：有背景图时，style 内容外面 background 能够设置 color，然而 img 会被过滤，就是说不能通过 css 来设置背景图片。但能够间接写在代码里。如：

<table background=”background.gif” cellspacing=”0″ cellpadding=”0″>

💡 在 outlook 中查看邮件时背景图片不显示，同时，背景图须要用相对地址。

列表款式：如果文字内容是写在 <li> 里，款式尽量写在 <ul> 里，在sohu 邮箱中写在 <td> 或 <tr> 里的款式会被过滤，其它邮箱没有问题。
img 元素设置宽高：所有的图片都要设置 height 和 width。这点很要害。要害图片要增加 alt 属性。

💡 alt 属性是让邮件在图片未加载实现前提醒图片内容。

不要设置鼠标事件：不要在邮件内容中设置鼠标通过事件如 onMouseOut，onMouseOver，发送到邮箱后会被过滤，将不能正确显示设定鼠标通过所显示的内容。
不要回车换行：同一段文字请尽可能放在同一元素里。如果有多段文字，千万不要用回车换行，这样会导致邮件中主动换行符导致该标签双倍行高。
增加可代替网页：制作一份和邮件内容一样的 WEB 页面，而后在邮件顶部提醒链接 如果您无奈查看邮件内容，请点击这里查看。这样即便邮箱客户端内异样，通过链接也能查看正确内容。
压缩体积：HTML 代码和图片尽量不要超过 50kb。

💡 各个邮箱的收件规范不同，有些邮箱超过 50kb 会被辨认为垃圾邮件。示例中，为了展现成果，是我轻易找的图片，体积比拟大 😂。

限度图片数量：在制作 HTML 邮件内容时，链接数量尽量放弃在 10 个以内，如果同一模板内所有图片的链接地址一样，能够将所有小图拼成一张大图应用。
应用绝对路径：邮件模板内的所有超链接应用相对地址，以确保收信人在点击超链接时可能失常浏览内容。
font-family 属性能够省略：font-family 属性是非必要的，如果有 font-family且值为空，会被 QQ邮箱 屏蔽为垃圾邮件。
居中显示：制作模板时，如果心愿邮件内容全副左右居中显示的话，须要将 table 的 width 设为 100%。
防止在邮件中间接显示网址：页面的文字中不要呈现网址，会被有些邮箱被屏蔽为垃圾邮件，网站能够写在 a 标签中。
文件名称小写：如没有特殊要求，图片的文件名称一律应用小写。
防止应用尺寸过小图片：不要在邮件中应用高度过小的图片，outlook2007 不能很好的显示高度为1像素的图片，会呈现拼合缝隙
能够将边距留在切图中：在切图时，能够为须要为文字区域留出肯定的边距，因为 outlook 中默认行间距和字间距大于一般网页，预留边距能够防止出现不必要的换行和图片缝隙。
应用 <br> 换行：因 hotmail 信箱的接管问题，段落之间不要用 <p> 标记，用 <br> 代替。
举荐行内款式：因为 Gmail 的兼容性问题，如果td里有文字，如要定义该文字款式，必须在 td 里写 style 行内款式来定义字体。
应用强制换行：td 内款式最好加上 style=”word-break:break-all;，其作用在于不会让表格撑开，会强制折断文本换行。
纯文本邮件：邮件题目不要超过 18 个字、每行不要超过 34 个字。

附录

上面内容列举了一些国外邮箱客户端对 html 标签和 css 属性的反对度。对于国内罕用邮箱客户端，依据开发教训，个别兼容 Outlook 邮箱的邮件信，大多是是兼容国内邮箱的。

图片屏蔽

因为图片能够用来侦测邮件的关上率和 email 地址的有效性。不少邮件客户端都会默认把邮件中的图片屏蔽，用户须要再点一下能力显示图片。

Blocking Issue	AOL	Gmail	Hotmail	Yahoo!	Outlook 2000/XP	Outlook 2003	Outlook Express w/SP2	Outlook Express w/o SP2
外链图片是否默认被屏蔽	✔	✔	❌	❌	❌	✔	✔	❌
用户是否设置是否屏蔽图片	✔	❌	✔	✔	✔	✔	✔	✔
是否让用户点击某个按钮就显示邮件中的图片	✔	✔	✔	❌	❌	✔	✔	◯
发件人在用户联系人列表时是否默认显示图片	✔	❌	✔	❌	✔	✔	✔	✔
发件人在ISP白名单中时是否默认显示图片	✔	◯	✔	❌	◯	◯	◯	◯
图片被屏蔽时是否显示alt属性	❌	✔	❌	❌	❌	❌	❌	◯
预览时显示windows的主题款式	❌	❌	❌	❌	✔	✔	✔	✔

邮箱客户端对 `CSS` 的反对状况

`<style>` 标签

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
`<head>`中的`<style>`标签	❌	❌	✔	✔	✔	✔	❌	✔	✔	✔	❌
`<body>`中的`<style>`标签	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌

`<link>` 标签

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
`<head>`中的`<link>`标签	❌	❌	❌	❌	✔	✔	✔	✔	✔	✔	❌
`<body>`中的`<link>`标签	❌	❌	❌	❌	✔	✔	✔	✔	✔	✔	❌

`CSS` 选择器

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
`*`	❌	❌	❌	❌	✔	✔	✔	✔	✔	✔	❌
`e`	❌	❌	❌	❌	✔	✔	✔	✔	✔	✔	❌
`e > f`	❌	❌	✔	❌	❌	❌	❌	✔	✔	✔	❌
`e:link`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`e:active,e:hover`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`e:focus`	❌	❌	✔	❌	❌	❌	❌	✔	✔	✔	❌
`e + f`	❌	✔	✔	❌	❌	❌	❌	✔	✔	❌	❌
`e [foo]`	❌	✔	✔	❌	❌	❌	❌	✔	✔	❌	❌
`e.className`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`e#id`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`e:first-line`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`e:first-letter`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌

`CSS` 属性

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
`background-color`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`background-image`	❌	✔	✔	❌	✔ *	✔	✔	✔	✔	✔	❌
`background-position`	❌	❌	❌	❌	✔ *	✔	❌	✔	✔	✔	❌
`background-repeat`	❌	✔	✔	❌	✔ *	✔	❌	✔	✔	✔	❌
`border`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`border-collapse`	✔	✔	✔	✔	✔	✔	❌	✔	✔	❌	❌
`border-spacing`	✔	❌	✔	❌	❌	❌	❌	✔	✔	❌	❌
`bottom`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌
`caption-side`	✔	❌	✔	❌	❌	❌	❌	✔	❌	❌	❌
`clip`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌
`color`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`cursor`	❌	✔	✔	✔	✔	✔	❌	✔	✔	❌	❌
`direction`	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌	❌
`display`	❌	✔	✔	✔	✔	✔	✔	✔	✔	❌	❌
`empty-cells`	✔	❌	✔	❌	❌	❌	❌	✔	✔	❌	❌
`filter`	❌	❌	✔	✔	❌	❌	❌	❌	❌	❌	❌
`float`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`font-family`	❌	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`font-size`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`font-style`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`font-variant`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`font-weight`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`height`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`left`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`letter-spacing`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`line-height`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`list-style-image`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌
`list-style-position`	✔	❌	❌	✔	✔	✔	❌	✔	✔	✔	❌
`list-style-type`	✔	❌	✔	✔	✔	✔	✔	✔	✔	✔	❌
`margin`	✔	❌	✔	❌	✔	✔	❌	✔	✔	✔	❌
`opacity`	❌	❌	✔	✔	❌	❌	❌	✔	✔	❌	❌
`overflow`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`padding`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`position`	❌	❌	❌	❌	✔	✔	❌	✔	✔	✔	❌
`right`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌
`table-layout`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`text-align`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`text-decoration`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`text-indent`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`text-transform`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`top`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌
`vertical-align`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`visibility`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`white-space`	✔	✔	✔	❌	❌	❌	❌	✔	✔	✔	❌
`width`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`word-spacing`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`z-index`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌

💡符号阐明：

✔：反对。
❌：不反对。
◯: 未知。
*：不被 Microsoft Outlook 2007 反对。

参考资料

[1]. dribbble
[2]. Email页面代码书写倡议及标准

关于前端:前端高质量邮件信开发实现-📧

背景

什么是邮件信

低质量邮件信 `👎`

高质量邮件信 `👍`

实现高质量邮件信

实现成果

代码实现

测试高质量邮件信

高质量邮件信代码编写准则

附录

图片屏蔽

邮箱客户端对 `CSS` 的反对状况

`<style>` 标签

`<link>` 标签

`CSS` 选择器

`CSS` 属性

更多高质量邮件信

参考资料

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:前端高质量邮件信开发实现-📧

背景

什么是邮件信

低质量邮件信 👎

高质量邮件信 👍

实现高质量邮件信

实现成果

代码实现

测试高质量邮件信

高质量邮件信代码编写准则

附录

图片屏蔽

邮箱客户端对 CSS 的反对状况

<style> 标签

<link> 标签

CSS 选择器

CSS 属性

更多高质量邮件信

参考资料

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

低质量邮件信 `👎`

高质量邮件信 `👍`

邮箱客户端对 `CSS` 的反对状况

`<style>` 标签

`<link>` 标签

`CSS` 选择器

`CSS` 属性

发表回复取消回复