2023 年的设计、模板和示例

您是否曾在手机上打开过电子邮件，但发现图片质量低下、文字太小、号召性用语按钮损坏？ 这些都是静态电子邮件设计的缺陷。 响应式电子邮件就是答案。

鉴于超过一半的美国居民在手机上查看电子邮件营销信息，您需要针对多个屏幕优化您的电子邮件，包括手机和平板电脑。

响应式电子邮件使用流畅的图像和表格，以在不同的屏幕尺寸之间保持灵活性。 最终，他们交付为每个用户的最佳体验而设计的内容。

虽然可以使用 CSS 媒体查询设计响应式电子邮件，但您不需要任何编码经验即可制作。 创建响应式电子邮件不仅仅是编码人员的工作。

在这里，我们列出了一些最佳实践和现成的模板，以及有关响应式电子邮件基础知识的快速教程。

响应式电子邮件也更易于访问，因为它们允许订阅者在他们喜欢的设备上阅读。

为了说明这一点，这是我收到的促销电子邮件在桌面上的样子。

这封电子邮件有很棒的图像、可购买的图标，而且格式很好。 当我在手机上打开电子邮件时，这就是我所看到的。

我仍然拥有相同的信息、相同的照片和可购买的图标。 唯一明显的区别是电子邮件格式。 为了更好地适应移动体验而有所不同。

现在，想象一下如果将相同的桌面布局应用于移动设备。 我必须放大我的手机才能看到任何图片或文字。 我不会那样做，而是退订。

通过响应式电子邮件，可以增强用户体验以及营销活动的投资回报率。

想一想：对优化的移动电子邮件设计感到满意的订户会发现自己会打开更多营销信息，因为他们知道这些信息易于访问且看起来不错。

因此，有了所有这些关于响应式电子邮件的讨论，您一定很想创建自己的电子邮件。 接下来，我们将查看一些响应式电子邮件示例和模板。

响应式电子邮件设计

您可以通过多种方式设计响应式电子邮件。

如果您具备编码知识，则可以为不同的屏幕尺寸编写不同的电子邮件模板。 您还可以使用适用于所有屏幕尺寸的预制模板。

无论采用何种方法，您都需要电子邮件营销软件。 在这里，您可以设计一封电子邮件，然后在多个设备上预览该电子邮件。 大多数电子邮件软件都会向您展示设计在多个设备上的外观。

下面的视频将带您了解如何使用模板设计电子邮件。 在视频中，用户使用的是 Klaviyo，但无论您使用什么软件，这些概念都适用。

编写响应式电子邮件

如果您希望使电子邮件的元素具有响应性，则需要使用媒体查询。

媒体查询是一种 CSS 技术。 它允许您设置仅在某些条件为真时出现的样式规则。 例如，您可以指定当屏幕宽度为 600 像素或更小时要使用的字体大小和图像大小。

使用电子邮件时，您可以使用媒体查询来指定您的设计在台式机、平板电脑和移动设备上的外观。 为此，您需要指定以下内容：

• 使用选择器“@media”并指定“screen”。 这表明该代码将影响带有屏幕的设备。
• 以像素为单位设置“最大宽度”。 这指定代码将生效的屏幕尺寸。
• 指定您希望特定屏幕遵循的任何 CSS 样式指南。

让我们看一下下面的代码。

@media 屏幕和（最大宽度：600px）

身体

字体大小：30px；

当应用于电子邮件的 CSS 时，对于 600 像素宽或更小的屏幕，正文将以 30 像素的大小显示。

虽然这种方法可以帮助您制作电子邮件回复的某些元素，但我们建议您尽可能使用模板。

除非您拥有全面的网页设计经验，否则对多个媒体屏幕进行编码可能既耗时又令人沮丧。

如果您不是技术人员或想要更简单的方法，请尝试使用带有内置响应式模板的电子邮件营销工具。 例如，HubSpot 的免费电子邮件软件提供默认响应的拖放模板。

响应式电子邮件设计示例

现在是探索示例的时候了。 从这个视频开始，它介绍了一些最好的电子邮件营销活动。

然后，您可以阅读一些我们最喜欢的响应式电子邮件设计。

1. TOMS 时事通讯

在 TOMS 的时事通讯中，桌面版和移动版的主要区别在于显示广告的堆叠和大小。

通过响应式设计，移动版没有混乱的导航，图像也很适合屏幕。 CTA 也已移动以提高可见性。

图片来源

2.大都会艺术博物馆

正如在 TOMS 时事通讯中看到的那样，响应式电子邮件设计有助于以视觉上吸引人且易于消化的方式堆叠内容。 MET 的这个例子也不例外。

在移动设备上，菜单的位置会发生变化。 指向不同礼品店商品的链接位于页面底部。 这使可用纪念品的图像保持在最前面和中心位置。

图片来源

3. 桑葚

同样，通过响应式电子邮件设计，游戏的名称是堆叠的。 这一切都是为了让内容易于阅读和具有视觉吸引力，无论人们查看内容的设备有多小。

交替的照片和文本对于桌面来说很有意义，而对于移动设备，照片和相关文本的一致堆叠以及分界线确保观众不会感到困惑。

图片来源

响应式电子邮件模板

响应式模板会自动适应任何屏幕尺寸，因此无论是在智能手机、平板电脑还是计算机上打开电子邮件，它看起来都很棒并且功能齐全。

对于编码背景较少或希望在设计上花更少时间的人，我的建议是使用模板。 它们是确保您的电子邮件看起来专业且响应迅速的必经之路。

响应式电子邮件模板可以节省您设计可以从选择中挑选出来的电子邮件的时间。 例如，HubSpot 的电子邮件营销工具包括 60 多个仅用于响应式电子邮件的模板。

现在让我们来看看一些模板选项。

1.HubSpot

HubSpot 提供了几个免费的响应式电子邮件模板。 如果您是 HubSpot 客户或免费用户，您可以下载并亲自试用。

例如，这里是响应式电子邮件模板之一 - 请注意侧边栏，您可以在其中预览多个设备上的模板。

图片来源

单击设备类型并确保您的电子邮件具有相应的格式是设计过程的最后步骤之一，也是使用 HubSpot 等软件时响应电子邮件过程中的唯一步骤。

例如，通过单击智能手机设备进行预览，您可以查看您的内容（包括字体大小和图像分辨率）的格式是否适合移动设备。

2.活动监控

CampaignMonitor 提供的模板与许多其他模板类似，其中响应式电子邮件结果显示在预览工具中。 例如，这是一个 CampaignMonitor 模板：

图片来源

您可以并排查看不同的设备，以便轻松比较设计元素。 可以进行微小的编辑以为所有订户创造最佳体验。

CampaignMonitor 模板通常是免费的，因此如果您的预算很少，它是一个不错的选择。

3.条纹

Stripo 提供超过 300 个免费的 HTML 电子邮件模板。 您可以按行业、季节、类型和功能选择模板。 例如，这是来自他们的商业行业部分的模板。

图片来源

可靠的响应式电子邮件模板的一个好标志是可以选择在桌面和​​智能手机变体中查看预览，如 Stripo 的预览模式所示。

请注意如何在移动预览中采用单列布局以适应手机规格。

Stripo 是一个您可以快速访问以找到符合您目标的模板的网站。 如果您想尝试响应式电子邮件或想要一些设计灵感，您可以考虑 Stripo。

4. 持续联系

Constant Contact 提供超过 200 个专业电子邮件模板，注册后即可访问。 通过查看下面的示例，您可以看到该平台提供了响应式电子邮件模板。

图片来源

Constant Contact 的模板具有拖放编辑、添加调查的选项、电子商务功能和照片库工具。 这些功能都可以帮助创建电子邮件订阅者想要看到的内容。

使用像 Constant Contact 这样的服务很有帮助，因为特定的工具可以让你保持一致性，就像上面的例子一样。 您可以看出电子邮件的响应特性不会影响任何设计元素。

现在我们已经了解了一些模板选项，让我们看看另一种使响应式电子邮件起作用的方法以及最佳实践。

响应式电子邮件最佳实践

响应式电子邮件的确切设计将根据您的活动目标而有所不同。 但是，这些提示可以帮助您确保为读者提供最佳体验。

• 确保您的响应式电子邮件具有可扩展性和灵活性。 在不同设备上预览电子邮件以确保您的消息具有响应性。
• 如果您编写自己的电子邮件，请记住 CSS 媒体查询会将固定字段更改为流动字段。
• 使用在较小屏幕上易于阅读的较大字体。
• 单列布局更容易扩展。 如果简单的布局适合您的网页，那么一定要考虑将它们用于响应式电子邮件。

在点击“日程安排”之前，请务必测试您的电子邮件。 只有在您看到它们在多种屏幕分辨率下的外观后，才最终确定设计。 许多人只是为了方便而通过手机访问电子邮件。

检查电子邮件有效性的一种简单方法是将其作为测试发送给您自己或您的团队——它是否与您收件箱中的其他响应式营销电子邮件相提并论？ 如果是这样，您就可以发送了。

开始使用响应式电子邮件

响应式电子邮件为您的客户创造更好、更易于访问的体验。 如果您只是进行过渡，请先探索预制的响应式电子邮件模板。 这些将节省您的时间，同时为您提供设计灵活性。

然后，征求第二意见。 让同事在他们的桌面和手机上打开一封电子邮件。 您可以获得他们对这两种体验的诚实反馈。

最后，不要害怕尝试。 您可以对不同的响应式设计进行 A/B 测试，直到找到最能引起共鸣的布局。

很快，您将发送响应式电子邮件并提高打开率。