对电子邮件中的蓝色链接感到沮丧？ 永远征服他们
已发表: 2021-07-24电子邮件中的蓝色链接：它们是一个有用的可用性功能，但对于希望设计周到的品牌营销活动的电子邮件营销人员来说，它们往往会让人头疼。
多年来，我们看到了多种处理 HTML 电子邮件中蓝色链接的方法，从简单到复杂。
但哪种技术效果最好？ 营销人员如何在不牺牲电子邮件中有用的功能的情况下确保精美的电子邮件设计？ 在本指南中，我们将了解什么是蓝色链接以及防止它们破坏您自己的电子邮件的最佳方法。 准备学习：
- 什么是蓝色链接？
- 你应该删除它们吗？
- 如何为每个电子邮件客户端更改它们
- 边缘情况作为后备（和 Outlook）
 | 当心：电子邮件损坏还有其他罪魁祸首 电子邮件错误会让您不寒而栗吗？ 蓝色链接只是您的电子邮件看起来已损坏的一种方式。 深入了解什么会破坏您的电子邮件以及保持真实的提示和技巧。 揭示常见问题和修复 → |
什么是蓝色链接？
蓝色链接正是它们听起来的样子：电子邮件中的文本采用超链接常见的默认蓝色下划线样式。 在电子邮件营销中——尤其是在移动设备上——这些蓝色链接由电子邮件客户端自动创建，为人们提供保存信息或与信息交互的选项。
近年来，Apple Mail 更新了其中一些链接的处理方式，不再将它们变成蓝色。 对于地址和时间，iOS 设备保留了原始样式，但添加了虚线下划线以表明它们是可点击的。
虽然这是在解决某些蓝色链接问题的可访问性方面向前迈出的一步，但它并不能解决所有问题，因为可能会影响的不仅仅是地址和时间。
大多数 iOS 版本的 Apple Mail 将电话号码、URL 和电子邮件地址变成蓝色，但将物理地址和时间保留为原始样式颜色（在下面的示例中为红色）。
在 iOS 13 中，内容仍然是链接的，但保持了原来的样式颜色：
在我们的测试中，这些东西是成为链接内容（蓝色或其他）的主要候选者：
- 地址
- 日期
- 电子邮件地址
- 网站网址
- 时代
- 电话号码
蓝色链接的好处：您是否应该删除它们？
在每种情况下，链接的信息对订阅者都很有价值，无论他们是想将电话号码添加到他们的联系人列表中还是在线查找地址。 虽然从品牌角度来看很烦人，但蓝色链接实际上非常适合可用性和可访问性，提供关键功能。
这引发了争论：我们应该首先覆盖这种行为吗？
一方面，我们希望我们的电子邮件设计保持一致和品牌化。 电子邮件客户端覆盖我们自己的样式可能会导致意外、激怒利益相关者并导致可访问性问题。 另一方面，人们可能依赖此功能并期望能够对电子邮件中的信息采取行动。
那么，电子邮件设计师应该怎么做？
我们认为，覆盖这些链接的样式（而不是功能）是最好的方法。 蓝色链接的理想解决方案应该保留对那些自动生成的链接采取行动的能力，但允许我们为这些链接设置样式，而不是操作系统或电子邮件客户端。
有些人会争辩说，覆盖蓝色、带下划线的样式太过分了。 但是，默认行为存在严重的可访问性问题，我们可以解决这些问题。 例如，查看此电子邮件页脚，地址中添加了蓝色链接：
这是一种常见的设计：黑色背景上的白色文本，带有小文本以将注意力集中在其上方的内容上。 当链接信息并应用蓝色样式时，对比度极低。 任何有视力障碍的人——或者那些在阳光明媚的环境中使用昏暗屏幕或移动设备的视力良好的人——将很难消耗这些信息。 有用的功能变成了令人沮丧的体验。
并非所有电子邮件客户端都对自动链接的处理方式相同。 虽然蓝色链接是最常见的罪魁祸首，但一些客户保持字体颜色但添加了一个微妙的下划线。 一些客户端链接电话号码但不链接地址。 由于所有这些不一致，管理起来可能会令人沮丧。
那么，电子邮件设计师如何处理蓝色链接呢？
覆盖自动链接样式的最佳方法
尽管我们过去曾研究过不同的解决方案——比如使用跨度和类定位共同链接的文本，或者在该文本中插入不可见的字符以破坏行为——但我们发现的最佳解决方案是依赖嵌入式 CSS覆盖自动链接样式。 然后，添加下划线和品牌颜色等值，让人们知道内容仍然可以点击。 可用性和可访问性的理想选择。
这种方法有很多用途。 你可以：
- 在文本上设置您自己的样式。
- 为不同的链接使用不同的样式——它不会在电子邮件中强制使用一种样式。
- 保留电子邮件客户端和操作系统引入的功能。
- 轻松保持造型。
这对您和您的订阅者来说都是双赢的。
唯一的警告？ 不同的电子邮件客户端在自动链接文本时会做不同的事情，因此您需要多个 CSS 规则来覆盖样式。
 | 你的电子邮件有蓝色链接吗？ 始终知道电子邮件客户端何时使用 Litmus 电子邮件预览更新其电子邮件呈现。 在所有流行的电子邮件客户端和设备中预览您的电子邮件，并在发送前发现错误。 了解更多 → |
覆盖 Apple Mail 中的蓝色链接
在围绕文本创建链接时，Apple Mail 会为这些链接添加除通常的 href 之外的其他属性。 一个简单的例子如下：
