检查你邮件的 HTML

邮件客户端只支持一小部分陈旧的 HTML,而且每家支持的还不一样。这个工具会告诉你哪些部分撑不过这趟旅程 —— 抢在同事发现之前。

正在加载工具……

工作原理

  1. 粘贴邮件的 HTML —— 可以从你的邮件营销工具的源码视图里拿,也可以用即将发送的那份文件。
  2. 先看发现的问题,再看链接和图片这两张表。
  3. 用预览功能检查窄屏宽度下的效果、深色模式,尤其是图片被屏蔽之后是什么样子。

为什么什么都不用上传

这个页面上的每一步操作,都由运行在你浏览器标签页里的代码完成,用的就是渲染网页的那套引擎。文件从磁盘读进标签页的内存,在那里被处理,再作为下载写回去。它不会被送到任何地方 —— 不会送给我们,也不会送给第三方。

自己动手验证

  1. 打开浏览器的开发者工具(F12),选择“网络”(Network)面板。
  2. 载入你的文件,运行这个工具。
  3. 你能看到的请求只有这些:工具自己的代码 —— 少数几个重型工具还会从公共 CDN 取它们的开源引擎 —— 外加一条发往 loreatec.jp 的小小访问记录(页面地址和标题,仅此而已)。没有一条带着你的文件。

文件不外传的证明 →

常见问题

为什么我的 <style> 代码块是个问题?

Gmail 会保留其中大部分,Windows 版 Outlook 会保留一部分,好几个网页邮箱会把它整个删掉,而且没有一个客户端会去加载外部样式表。任何必须保证生效的样式都得写成内联的 style 属性;<style> 代码块只用来放那些完全没法内联的媒体查询。这个网站上的 CSS 内联工具能帮你完成这一步机械性的转换。

102 KB 的限制是什么?

Gmail 在大约 102 KB 处就会停止渲染邮件正文,转而显示一个“查看完整邮件”的链接。截断之后的所有内容都会被隐藏 —— 通常正是页脚,退订链接和邮寄地址往往都写在那里。这样一来,它不只是设计问题,还是个合规问题。要精简的是 HTML 本身,而不是内容:大部分体积都来自重复的内联样式和表格骨架。

为什么它不告诉我链接能不能打开?

因为浏览器没法读取来自另一个域名的响应内容 —— 同源策略禁止这么做,不靠服务器帮忙转发请求,再聪明的办法也绕不过去。所以工具把链接都列出来供你自己检查;任何声称能“验证”链接的检测工具,要么背后有服务器,要么就是在猜。

屏蔽图片后的预览显示的是什么?

是大多数收件人最先看到的样子。Gmail、Outlook 和 Apple Mail 在至少某些情况下都会默认屏蔽远程图片,一个整个用一张大图拼成的设计,这时就会变成一个空白矩形。如果你的邮件在这个视图下没法读懂,那么对你名单里很大一部分人来说,它就是读不懂的。