黑暗模式的兴起如何影响你的电子邮件营销模板?(+例子)

每天早上醒来，我都会做同样的事情:拿起手机浏览电子邮件的海洋。

过去，Gmail的白光会让我眼花缭乱，虽然它能帮我醒来，但我的眼睛并不一定会感谢我。然后，有一天，一切都变了。我注意到“黑暗模式"可在Gmail应用程序突然间，我的眼睛放松了。

他们不再需要一大早就调整应用程序的亮度，我也比以前更快地查看电子邮件。然而，与此同时，我很快意识到黑暗模式会带来一些独特的用户体验问题——发送者没有针对这些问题进行优化。

好像优化不同的电子邮件客户端还不是一个挑战。现在，我们必须解决黑暗模式!

在我深入探讨黑暗模式对电子邮件的整体影响之前，让我们先退一步，谈谈它到底是什么。

什么是暗模式?

简而言之，暗模式将用户界面的配色方案从明暗颠倒过来，奇怪的是，暗模式实际上是暗模式比光模式早了几十年．

一些最早的家用电脑，单色CRT(阴极射线管)显示器，在黑屏上显示绿色的文字。

文字处理机，也就是专门用于文本编辑的计算机，也允许在黑色背景下输入白色文本。

直到80年代，施乐(Xerox)和CPT公司(CPT Corporation)(该公司在90年代中期停产)才制造出白屏黑字的文字电脑，以便在纸上复制墨水的外观。

但是今天黑暗模式的崛起仍然笼罩在神秘之中。

安迪克拉克，网页设计工作室Stuff & Nonsense的创始人相信它起源于通常在控制中心工作的人。“因为他们看到的是非常大的显示器，一个非常白亮的界面基本上会照亮屋顶。”

但许多人认为，它的起源可能是在编码中。“据我所知，技术开发人员一直在他们的代码编辑器中使用黑暗主题，”Clarke说。

大多数流行的代码编辑器，如Visual Studio代码，都提供黑暗模式或主题。作为一个使用Sublime代码编辑器的开发人员，我总是使用暗模式来提高可读性，减少眼睛疲劳。

“这算完了70%的软件工程师黑暗主题开发环境中的代码。”我将在下一节探讨为什么会出现这种情况，但不管是什么导致了这种趋势，它都是一个流行的趋势。

除了Gmail, Facebook、Twitter、Instagram、Gmail和苹果的iOS在过去12个月里都引入了黑暗模式，而且没有放缓的迹象。

黑暗模式有什么好处?

如上所述，明亮的白光和蓝光往往会导致眼睛疲劳，并伴有头痛和其他不适。暗模式可以帮助减少这种情况，特别是当你在较暗的光照条件下(夜晚，光线昏暗的房间)看你的设备时。

一些人还发现暗模式提高了可读性，这就是为什么许多工具，如Slack, Facebook Messenger, Adobe套件都采用了它。

暗模式还会降低屏幕亮度，这可以帮助你节省电池寿命，尤其是当你使用它比亮模式更频繁时。

最后，有些人更喜欢暗模式，无论是由于上述原因，还是因为调色板更符合他们的风格。

黑暗模式如何影响电子邮件模板(以及如何优化它)

就电子邮件而言，大多数电子邮件应用程序通常会以白色背景和深灰色/黑色文本为主题。

当暗模式打开时，应用程序将检查背景,或告诉我们样式在电子邮件的代码中，并将其更改为深灰色。字体颜色也有针对性，从较暗的十六进制颜色变为白色。

暗模式仍然是相对较新的，不支持所有的电子邮件客户端，可能永远不会，或不会很长一段时间。

这是因为维护用于解析邮件的呈现引擎是一项极其艰巨的任务。另一方面，有些公司认为如果没有任何问题，就没有必要更新渲染引擎。

目前,暗模式只能在Gmail开启时使用Android 10 - 13和iOS 13+，尽管许多设备现在都有内置的选项来激活手机上的暗模式，这不仅会改变手机的颜色界面，还会改变你的浏览器和其他应用程序。

除了Gmail，这里有一个简短的列表，谁在他们的电子邮件应用程序中推暗模式:

移动应用程序

• 应用前景(Android)
• 应用前景(iOS)
  

桌面客户端

• 苹果的邮件
• Outlook 2019 (Mac OS)
• Outlook 2019 (Windows)

Web客户端

• Outlook.com

即使绝大多数的电子邮件客户端是滞后的，仍然有可能有很大比例的你的订阅者在黑暗模式查看你的电子邮件-特别是Gmail是全球最大的电子邮件提供商．

如果你的电子邮件没有为此进行优化，你可能会失去点击量和整体参与度。

谁会想要读一封对他们来说很难或不可能看的邮件，对吧?

优化你的电子邮件为黑暗模式是必须的。

为了帮助您提前解决可能出现的问题，以下是我遇到的一些最常见的问题，以及您可以做些什么来修复或防止它们发生。

问题:不连贯的颜色背景

通常，电子商务销售电子邮件纯粹是用不同的图像和横幅，突出不同的项目，你看，优惠券和促销正在进行。

当将它们拼接在一起时，在默认的白色背景下看起来很棒，但在黑暗模式下，它最终看起来脱节。

深灰色将取代任何白色区域，但JPG图像与白色背景将保持原样。

在上面的West Elm邮件中，我们可以看到logo和“find a store”链接之间的巨大差距。横幅图像比其他部分缩进更多。

如果与文本一起使用透明图像，这个问题也会导致不可见部分。

在下面的Peloton示例中，白色的推荐文本，即黑色背景下的白色图像，在黑暗模式下显示为不可见。

这可能会让你的邮件看起来支离破碎，整体上不专业，这对你的品牌形象不利。

解决方案:

如果你倾向于以这种方式构建电子邮件，确保你构建的每个图像部分跨越电子邮件的整个宽度，并用额外的白色图像片段填充任何潜在的空白。这将保持电子邮件在明暗配色方案中的视觉一致性。

此外，避免深灰色或白色的透明文本图像。当转换为深色背景时，这些内容不容易翻译。相反，渲染出完整的部分与彩色背景作为一个完整的图像。

问题:商标看不见或难以辨认

平均是28%的公司使用黑色或灰色在他们的标志。正如一个复杂的黑色标志，它是最不黑暗的模式友好。

看一看:

在Medium的例子中，他们的logo在灰色的背景下很难读懂，但对于Reddit的邮件来说，一半的logo几乎完全消失了!

你最不想看到的就是别人在黑暗模式下阅读你的邮件，只是因为他们看不到让他们知道是谁发送的品牌元素。

解决方案:

这个问题是看到PNG图像，有透明的背景。这意味着它们可以呈现出它们后面任何图像的颜色。

由于大多数标识都是白色以外的颜色，它们往往在白色背景下工作得很好，但不是所有的黑色背景。

为了解决这个问题，最好将文件保存为带有白色背景的JPG图像，或者在你的徽标中包含的字母/符号周围有白色轮廓。如果你的logo不是在白色背景下，改变logo的背景颜色以匹配电子邮件中使用的颜色。

这样做，徽标在桌面上看起来没有什么不同，但会在移动设备上清晰可见。

破解一个解决方案(*需要开发者的帮助)

如果上面的想法看起来太费力，你可以添加额外的CSS到你的电子邮件，以帮助你更多地控制你的电子邮件显示时，黑暗模式是活跃的。

Litmus做得很好概述您可以使用的代码行，以及它们在不同的客户端中有多有效，所以我向您推荐其中的大部分细节。

他们建议的一个例子是使用暗主题CSS媒体查询(它可以检测用户在暗模式下查看)来显示不同于光模式的特定样式。

需要注意的是，这段代码并不是一个直接的复制粘贴解决方案，只是用作您的目标的灵感。

CSS例子：

@media (preferred -color-scheme: dark) {

/*只显示暗模式的内容，如图像*/

.dark-img{显示:块!重要;宽度:汽车!重要;}

/*隐藏光模式的内容，如图像*/

.light-img{显示:没有;显示:没有!重要;｝

/*自定义暗模式背景颜色*/

.darkmode {background-color: #272623 !important;｝

/*自定义暗模式字体颜色*/

H1, h2, p, span, a, b {color: #ffffff !important;｝

/*自定义暗模式文本链接颜色*/

.link {color: #91ADD4 !important;｝

｝

但是当你有疑问的时候，测试，测试，测试!

电子邮件客户端是不断变化的，所以无论是暗模式还是其他什么，在发送电子邮件之前将测试作为一项例行任务是很重要的。现在应该包括在Outlook和Gmail上以暗模式和纯文本查看电子邮件。

您可以通过将您的电子邮件的测试版本发送给每一个客户端并查看它们，利用电子邮件测试工具，例如石蕊，或者在营销工具中测试电子邮件客户端(HubSpot的电子邮件测试是由Litmus提供支持的)。

我强烈建议你为你的订户做出有意识的努力来优化暗模式。这将向你表示尊重，并认可他们以自己想要的方式查看你的邮件的决定，以及你致力于尽可能给他们最好的体验。

暗模式已经被许多平台所采用，所以它很可能会继续存在下去，所以你最好开始弄清楚你需要做什么，以确保你的品牌准备好适应这种模式!