HTML 电子邮件

The Readdle Team
创建:

定义

💡 HTML 电子邮件:使用超文本标记语言编写的电子邮件,可让你添加格式、图片、颜色和链接。 基本上,这就是枯燥的纯文本文档和真正经过设计的邮件消息之间的区别。 HTML 电子邮件提供了纯文本所不具备的格式设置和语义标记能力。

为什么 HTML 电子邮件很重要

纯文本电子邮件就只是文本。 没有颜色,没有图片,甚至连粗体或斜体都没有。 HTML 电子邮件则包含其余这一切。

HTML 电子邮件具有颜色、样式、图片,有时还包含多媒体,就像投递到人们收件箱中的网页一样。 这意味着你可以匹配品牌风格、使用你的徽标,并添加用户真正可以点击的按钮。 你可以利用固有的视觉元素,帮助用户将注意力集中到电子邮件内容的各个部分,并利用用户期望与之互动的元素(如图片和视频)来提升参与度。

现在大多数企业都会发送 HTML 电子邮件。 根据在线营销公司的调查,如今支持 HTML 的电子邮件客户端几乎已经普及,使用纯文本客户端的用户报告占比不到 1%。 你的客户期待看到经过设计的电子邮件,而纯文本邮件可能显得不够专业或已经过时。 这会传递出你并不认真对待沟通的信号。

但 HTML 也并不一定天然更好。 这其中存在取舍。 HTML 电子邮件体积更大、加载时间更长,而且在不同的电子邮件客户端中可能会显示错乱。 与纯文本相比,它们也更容易触发垃圾邮件过滤器

HTML 电子邮件如何运作

当你发送一封 HTML 电子邮件时,本质上就是把一个迷你网页发送到某人的收件箱里。

电子邮件设计人员会编写 HTML 代码,就像搭建网页一样,用 HTML 定义结构,再用 CSS 设置样式。 你可以添加图片、设置文本格式、创建布局。 然后,当收件人打开电子邮件时,他们的电子邮件客户端会读取这些 HTML 代码,并像浏览器显示网页那样将其渲染出来。

问题在于:人们用来阅读电子邮件的服务和应用有数百种,比如 Gmail、Yahoo! 和 Outlook,而且每种服务对 HTML 和 CSS 的显示方式都略有不同 在 Gmail 中看起来完美的内容,到了 Outlook 里可能就会出问题。 在桌面端可用的内容,在移动端可能会失效。

这就是为什么许多邮件服务器会被配置为自动生成消息的纯文本版本,并通过 Content-Type: multipart/alternative 将其与 HTML 版本一同发送。 如果 HTML 无法渲染,电子邮件客户端就会回退到纯文本版本。 无论哪种情况,你都能覆盖到。

HTML 与纯文本

你有两个选择:

HTML 电子邮件让你可以完全掌控设计。 颜色、字体、图片、可点击的按钮,以及与你网站风格一致的布局。 当你想创建看起来像传统文档的消息,使用各种字体、颜色、项目符号列表和编号列表,或者想在邮件中显示图片时,HTML 是最佳格式。 非常适合新闻简报、营销活动和品牌化沟通。

纯文本电子邮件则更精简。 只有文字,没有样式,也没有嵌入式链接。 纯文本格式不支持粗体或斜体文字、彩色字体或其他文本格式设置,也不支持在邮件中显示图片。 当然没那么吸引人,但它们在任何地方都能正常工作。 它们也会让人感觉更个人化、没那么像推销,这就是为什么有些人更喜欢把它们用于一对一通信。

对于 Microsoft 账户,你可以在收件箱中选择如何接收电子邮件。 

它非常适合销售信和更新通知;如果你是销售人员,正在进行一对一电子邮件沟通,那么纯文本电子邮件可能更合适。 但对于大多数营销场景呢? HTML 更胜一筹。

创建 HTML 电子邮件

根据你的技术熟练程度,你有多种选择。

自己编写代码。 如果你了解 HTML 和 CSS,就可以从头开始编写代码。 只要记住,用 HTML 构建电子邮件是一项专业工作,并不完全等同于构建网页。 电子邮件客户端远没有浏览器那么宽容。 你需要使用表格来做布局(没错,真的是这样)、使用内联 CSS 而不是外部样式表,并且要在多个客户端中进行测试。

使用拖放式构建器。 大多数电子邮件服务提供商,如 Mailchimp、Constant Contact 或 Campaign Monitor,都提供可视化编辑器。 你只需拖入文本块、图片和按钮,工具就会为你生成 HTML。 无需编写代码。

从模板开始。 从 Litmus 或 Email on Acid 之类的服务获取预构建的 HTML 邮件模板,然后用你自己的内容和品牌元素进行自定义。 比从零开始构建更快,比拖放式编辑器拥有更多控制权。

无论你采用哪种方式,你仍然需要确保电子邮件能够响应不同分辨率,并兼容不同的电子邮件客户端。 在发送给完整邮件列表之前,先测试一切。

HTML 电子邮件最佳实践

优先为移动设备设计。 超过一半的电子邮件是在手机上打开的。 如今移动浏览已经超过台式机和笔记本电脑的使用量,因此为移动设备设计电子邮件比以往任何时候都更重要。 使用单栏布局、较大的按钮点击区域,以及无需缩放也能轻松阅读的字体大小。

保持简洁。 不要在设计上用力过猛。 开发 HTML 电子邮件时,不要忘记简洁性,不要把事情复杂化,最好坚持使用双栏布局。 元素越少,加载越快,出错的地方也越少。

使用内联 CSS。 用于存放整个 HTML 文档 CSS 样式规则的 head 标签支持并不好,有时甚至会被完全剥离,因此内联样式声明实际上已成为默认标准。 

跨客户端测试。 Gmail、Outlook、Apple Mail、Yahoo 和移动端客户端的渲染方式各不相同。 你可以尝试将电子邮件发送到连接了不同电子邮件客户端的多个账户,或者使用电子邮件测试工具来免去这一过程的麻烦。 LitmusEmail on Acid 这样的服务就专门提供这类功能。

包含纯文本备用版本。 始终在同一封电子邮件中同时发送 HTML 和纯文本两个版本。 如果 HTML 出问题,收件人仍然能看到你的消息。

注意文件大小。 HTML 电子邮件比纯文本更大。 过大的图片和臃肿的代码会拖慢加载速度,也可能触发垃圾邮件过滤器。 如果可能,请将电子邮件总大小控制在 100KB 以下。

不要只依赖图片。 有些电子邮件客户端默认会屏蔽图片。 即使没有图片,你的消息也应该依然说得通。 为所有图片添加替代文本。

相关内容

相关术语

The Readdle Team
Spark

智能、聚焦、邮件。

超高效兼跨平台:专为静忧收件设计,专心聚焦重要事项。