只需 5 个简单步骤即可使您的电子邮件设计具有响应式移动设备友好性
已发表: 2024-01-17您希望您的电子邮件通讯和营销活动在任何设备上看起来都很棒吗？ 当然可以。 没有人希望自己的辛勤工作在某人的收件箱中变得无法阅读。 幸运的是，只需五个步骤，您就可以确保您的电子邮件具有响应能力并准备好给订阅者留下深刻的印象。 因此，带上一些茶点、您最喜欢的播放列表或饮料，然后让我们开始确保它们在任何屏幕上都呈现最佳效果。
以百分比而不是像素设置列宽
为了使您的电子邮件设计具有响应能力，请使用百分比而不是固定像素值设置列宽。 这使得列可以灵活地调整以适应不同的屏幕宽度。
使用流体网格
流体网格方法使用列宽百分比，以便它们可以根据屏幕尺寸根据需要扩展和收缩。 对于简单的两列布局，左列宽度为 60-70%，右列宽度为 30-40%。 例如：
<表>
<tr>
<td width=”65%”>此处为第 1 列内容</td>
<td width=”35%”>此处为第 2 列内容</td>
</tr>
</表>
这将使第 1 列占用 65% 的可用空间，第 2 列占用剩余的 35%。 在大型桌面屏幕上，第 1 列最终可能有 650 像素宽，而在小型移动屏幕上，可能只有 200 像素宽。 但相对比例将保持不变。
添加响应断点的媒体查询
媒体查询允许您根据屏幕宽度应用不同的样式规则。 您可以使用它们在不同的断点处对流体网格进行进一步调整。 例如：
/* 对于手机： */
@media only 屏幕和（最大宽度：600px）{
表，TD {
宽度：100%！重要；
}
}
/* 对于平板电脑： */
@media only 屏幕和（最小宽度：601px）和（最大宽度：900px）{
表，TD {
宽度：80%！重要；
}
}
这将使表格和列在小型手机上扩展至填充 100% 的屏幕宽度，在平板电脑上填充 80% 的屏幕宽度，从而使设计完全响应。
使用可调整大小的流体图像和媒体
为了使您的电子邮件设计适合移动设备，图像和其他媒体需要流畅地调整大小以适应任何屏幕尺寸。 请遵循以下提示：
使用响应式图像尺寸
将图像添加到电子邮件时，请使用响应式图像大小调整。 这意味着提供多种图像尺寸，以便电子邮件客户端可以为正在查看的屏幕选择正确的尺寸。
例如，不仅包含 1000 像素宽的大图像，还包含：
- 中等尺寸（约 600px）
- 小尺寸适合窄列（约 400 像素）
- 适合小移动屏幕的小尺寸（约 200 像素）
电子邮件客户端将自动选择最适合屏幕和带宽的尺寸。 要在电子邮件中指定多个图像尺寸，请使用 <img srcset> 属性。
使媒体适合移动设备
对于视频或 GIF 等其他媒体，还提供多种尺寸选项。 视频应具有不同分辨率的 MP4 源。 GIF 和 iframe（如 YouTube 嵌入）应该具有宽度限制，可以调整大小以适应任何屏幕。
牢记这些提示，您的电子邮件图像、视频和其他媒体将在任何设备上完美显示。 您的订阅者将会欣赏一封看起来很棒并且无论在哪里打开都易于阅读的电子邮件。
字体大小以 em 为单位，而不是像素
为了使您的电子邮件设计适合移动设备，您需要将字体大小设置为 em，而不是像素。 像素是固定单位，因此如果有人放大浏览器，文本可能会变形。 另一方面，Ems 是根据用户设置缩放的相对单位。
使用响应式电子邮件框架
响应式电子邮件框架具有预构建的组件，可以根据任何屏幕宽度自动调整大小。 一些流行的选项包括 MJML、Foundation for Emails 和 Ink。 这些框架使用 em 来调整大小，因此您不必担心自己进行转换。
如果不使用框架，请将像素转换为em
如果您想完全控制 CSS 并且不喜欢使用框架，则需要将任何像素大小转换为 em。 就是这样：
- 确定基本字体大小（以像素为单位）。 假设它是 16px。
- 将其转换为 em。 1em = 16px（您的基本尺寸），因此 16px = 1em。
- 您想要使用的任何尺寸，除以 16px 并乘以 1em。 例如，对于 24px 标题，24px/16px = 1.5em。
- 将 CSS 中的所有像素大小替换为 em 等效值。
响应式地调整您的内容
为了使您的电子邮件设计具有响应能力，您需要对齐内容，以便它在任何屏幕尺寸上都能正确显示。 按着这些次序：
使用流体测量
不要对列、图像和容器使用固定像素宽度，而是使用百分比。 这将允许您的内容根据屏幕宽度按比例缩放。 例如，不要使用宽度=“600px”的图像，而使用宽度=“50%”。
避免沉重的造型
通过限制自定义样式的使用来保持电子邮件简单，自定义样式在某些电子邮件客户端中无法正常显示。 依靠基本的 HTML 表格、内联样式和布局的对齐属性。 需要时居中元素。
无论您的读者使用什么设备打开收件箱，遵循这些实用步骤都将确保您的电子邮件内容显示精美。 为您的订阅者创建出色的响应式电子邮件设计体验是值得付出努力的。
测试、测试、再测试
检查它在移动设备上的显示方式
我们都知道大多数人使用移动设备访问电子邮件。 因此，为了确保您的电子邮件适合移动设备，请通过在不同的手机上发送来测试您的电子邮件。 在 Android、iPhone 和平板电脑上查看它们。 检查图像、按钮和文本在纵向和横向模式下的显示方式。
在主要电子邮件客户端上进行测试
并非所有电子邮件客户端都以相同的方式显示电子邮件。 对 Gmail、Outlook、Yahoo Mail 以及订阅者常用的任何其他主要电子邮件服务进行测试。 查找有关图像、嵌入链接、按钮或其他交互元素显示方式的任何问题。 编辑代码以修复任何显示问题并确保客户端之间的一致性。
检查后备内容的显示方式
对于在电子邮件客户端中禁用图像的订阅者，您的后备内容将代替图像出现。 仔细检查所有替代文本、图像标题和图像描述本身是否有意义，并为您的电子邮件内容提供上下文。 即使没有图像，后备内容仍应带来良好的读者体验。
对电子邮件渲染服务的评论
使用免费的电子邮件渲染测试服务（例如 Litmus、Email on Acid 或 Mosaico）来查看您的电子邮件设计如何在各种电子邮件客户端和设备上同时渲染。 他们提供报告，突出显示需要解决的任何问题，以提高电子邮件的响应能力。 更改您的代码并重新上传测试电子邮件，直到报告干净为止。
仔细检查链接和交互元素
电子邮件中的嵌入式链接、按钮和任何其他交互式组件需要在所有平台上正常工作。 仔细检查链接是否转到预期目的地，以及所有按钮或表单是否按预期运行。 在启动营销活动之前，对其进行多次测试，以确保不存在损坏的链接或不起作用的元素。
需要不断的测试和调整来完善电子邮件的响应式设计。 但预先付出的努力将使电子邮件在所有订阅者的设备和电子邮件客户端上具有广泛的覆盖范围和高参与度。
解决常见的响应式电子邮件问题
移动端内容泛滥
- 使用单列布局。 在电子邮件中，多列很少能很好地响应。
- 保持段落和章节简短明了。 长文本块在小屏幕上很难阅读。
- 尽可能使用项目符号和编号列表。 它们比段落占用更少的空间。
- 在小屏幕上隐藏次要内容。 您可以使用媒体查询根据屏幕宽度显示/隐藏内容。
电子邮件宽度问题
一些较旧的电子邮件客户端在响应式电子邮件宽度方面存在问题。 要解决此问题：
- 设置电子邮件容器的最大宽度。 我们建议大多数电子邮件使用 600 像素。
- 在宽度声明后添加 !important 以覆盖某些电子邮件客户端 CSS。 例如：
- 添加 Outlook 2007-2013 的后备代码。 这些旧版本需要单独的样式：
遵循这些故障排除提示将解决最常见的响应式电子邮件问题。 如果您还有其他问题，请告诉我！
结论
这些是确保您的电子邮件具有响应能力的一些简单方法。 请记住，如今超过 50% 的电子邮件是通过移动设备打开的，因此针对较小的屏幕尺寸进行优化至关重要。 检查所有电子邮件模板并对字体大小以及图像大小和间距进行必要的更改。 您的收件人会很高兴收到一封电子邮件，无论他们使用哪种设备，他们都可以阅读并参与其中。