如何为移动优先方法设计电子邮件

已发表: 2015-05-21

我们正在打一场好仗，这是一场永无休止的电子邮件源源不断的战斗。无论我们去哪里，无论我们有什么设备，电子邮件都可以在任何地方找到我们。阅读本文后，您可能会收到另外十封电子邮件。作为设计师，我们处于收件箱的两端：我们不断收到电子邮件，但我们也负责设计和创建实际的电子邮件设计。

无论您的电子邮件目标是谁，目标都是在向订阅者、客户和潜在客户发送电子邮件时提供最佳用户体验。而且由于大多数电子邮件是在移动设备上打开的，我们需要设计电子邮件以适应任何可以打开它们的设备。

我们已经习惯了响应式网页设计和一流的移动应用程序，我们常常想当然地认为我们可以拿起任何设备并设计量身定制的体验。有了电子邮件，事情就不会那么枯燥无味了。在技术方面，它落后于现代网页设计光年。我们需要使用 HTML 属性、基于表格的布局和内联样式进行设计，但不能保证它们在每个电子邮件客户端中的行为都相同。

为所有设备设计电子邮件，我有什么选择？

在你去清理你的 CD-ROM 收藏之前，请记住，即使有限制，设计一个成功的“响应式”电子邮件也是有希望的。创建一个真正响应的电子邮件当然是一种选择，但在创建成功的移动优先设计时考虑所有这三种方法很重要：

可扩展设计
流体设计
响应式设计

要选择最适合您需求的方法，了解这三种设计形式之间的差异和限制非常重要。做出决定需要了解您的受众以及他们使用的设备和电子邮件客户端。由于并非所有电子邮件客户端都提供相同的 CSS 支持，因此这将有助于确定哪种方法最适合您的用户。

可扩展设计

可扩展的电子邮件布局用途广泛，因为它们在所有屏幕尺寸上都是可读和可点击的。如果您的受众倾向于在各种设备上打开他们的电子邮件：移动设备、平板电脑和台式机，这是一个很好的选择。

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

这个选项通常是最容易实现的，因为它不使用媒体查询并且没有需要调整的表格宽度。一个优点是在设计这种类型的电子邮件时没有很大的学习曲线。在大多数情况下，移动设备是阅读电子邮件的最常用设备，这很容易确保首先考虑移动设备。更大的按钮、易于阅读的文本和清晰的号召性用语使移动设备优先满足更小屏幕尺寸的需求。

可扩展的电子邮件设计可能会受到限制，因为它必须是单列才能在所有设备上正常工作。原因是，如果设计有多个列，这些列在移动设备上会变得非常小，影响可读性。但是，如果您滚动浏览收件箱，您会看到很多单列布局，因为它们很常见。

内容是任何电子邮件的关键，因此文本大小应适合移动设备和大屏幕。对于大多数电子邮件客户端，整个电子邮件将填满屏幕，因此用户不必垂直滚动。但是，仍然建议将关键信息和号召性用语放在电子邮件的左上角，以防电子邮件没有按预期填满屏幕。

流体设计

流体电子邮件设计

您可能熟悉网页设计中的“流动”布局。设计组件具有百分比宽度，并根据用户的屏幕分辨率进行调整，保持相同的宽度。流畅的电子邮件设计利用了同样的想法。

此电子邮件选项弥合了可扩展选项和真正负责任的选项之间的差距。与可扩展选项相比，必须完成更多的前期设计。这样做的原因是基于百分比的大小使表格和图像的宽度适应查看电子邮件的任何屏幕尺寸。表格不会改变不同大小的布局，但内容会流动并填充空间。对于文本繁重的电子邮件来说，这是一个很好的选择，因为对副本和图像之间的相互关系的控制较少。保持布局简单仍然是一个好主意，最好是单个表格布局，以将电子邮件的易读性作为第一要务。

还记得我们怎么说这弥合了固定和响应之间的差距吗？原因是对于较大的屏幕需要限制尺寸。如果电子邮件太宽，文本行在视觉上会变得太长，我们希望确保我们的读者可以轻松阅读我们的电子邮件。将您的电子邮件内容包装在一个固定宽度的容器表中将有助于在更大的屏幕尺寸上显示。然后一个有用的媒体查询将针对较小的屏幕尺寸。

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

移动设备的媒体查询示例：

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

响应式电子邮件

响应式设计

让我们从可扩展且流畅的电子邮件中获取我们所知道的信息，并添加更多规则。响应式让您可以更好地控制使用 CSS 媒体查询在不同断点处呈现的内容。使用此选项，可以更改布局，也可以使用特定断点的条件样式自定义其他元素。

以下是响应式布局的媒体查询示例：

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

与其他选项一样，您不仅限于一列或简单的设计。电子邮件可以更复杂，对布局和图像数量的限制更少。例如，电子邮件设计在大型设备上可以是多列，但在移动设备上可以是单列。文本大小、图像和大多数其他内容都可以优化以获得最佳体验。

在我们创建具有多个媒体查询的复杂设计之前，讨论一些权衡是很重要的。媒体查询不适用于所有电子邮件客户端。事实上，支持非常有限。根据 Litmus 媒体查询支持列表，Android Outlook.com 应用程序、Android 4.x 原生客户端和 iOS (iPhone/iPad) 目前支持它们。如果您的大多数观众是移动设备和平板电脑用户，则可以充分利用这些潜力。

其他设计注意事项

在开始创建电子邮件设计之前，查看分析以确定用户的电子邮件客户端和设备非常重要。建议经常检查这一点，让您的设计方法随着事情的变化而发展。即使有限制，电子邮件也在不断发展，因此跟上当前支持的内容很重要。

这里有一些很好的资源供进一步阅读：

移动特定 CSS
电子邮件的未来
iPhone 和 Android 电子邮件

好消息是，在当前电子邮件的限制下，移动优先的方法是可能的。即使设计不是最真实的“响应式”形式，只需指定几个特定的百分比和一些媒体查询，您将创建一个肯定会留下深刻印象的电子邮件设计，无论使用什么设备。在大多数情况下，大多数用户都在移动设备上查看电子邮件，因此采用移动优先的方法成为您电子邮件设计的坚实基础。