响应式电子邮件 101 网络研讨会问答：HTML 和 CSS 基础

已发表: 2015-03-16

随着移动端打开量的不断增加（在过去四年中它们增加了 500% 以上！），移动电子邮件策略（如响应式设计）的讨论也随之增加。 在我们的响应式电子邮件 101：HTML 和 CSS 基础网络研讨会中，我们了解了移动电子邮件领域、创建响应式电子邮件的基础，以及为什么这些技术对于改善订阅者体验至关重要。 我们还介绍了电子邮件客户端支持，并演示了如何从头开始编写响应式电子邮件。

没能成功吗？ 别担心。 我们记录了整个过程！ 此外，我们甚至还提供了幻灯片。

获取幻灯片 + 录音 →

我们的网络研讨会座无虚席，所以虽然我们在问答部分尝试回答尽可能多的问题，但我们无法全部回答。 下面，我们汇总了一些最常见的问题。

响应式设计入门

您认为移动开放的增长已经达到饱和，还是会继续增加？

虽然我们在过去四年中看到移动端打开量出现了巨大的增长——超过 500%——但我们已经看到它的增长开始趋于平缓。 然而，我们认为随着更多移动设备的普及，移动端开放将继续缓慢上升。

流畅、自适应和响应式设计之间有什么区别？

流体设计由没有媒体查询的相对宽度组成。 自适应设计由多个视口/断点处的固定或相对宽度组成。 响应式设计由多个视口/断点处的相对宽度组成。 以下是一些很好的资源，可帮助您更好地了解它们之间的差异：

  • 可扩展、流畅还是响应式？ 了解移动电子邮件方法
  • 固定 vs. 流体 vs. 自适应 vs. 响应
  • 哪种布局？ 静态的、流动的、自适应的还是响应式的？
  • Liquidapsive

哪种方法具有最好的电子邮件客户端支持——流畅的、自适应的或响应式的？

从纯粹的支持角度来看，流畅的电子邮件具有最好的支持。 自适应和响应式设计都需要使用支持有限的媒体查询。

然而，这并不意味着流体设计是电子邮件的最佳方法。 流体设计是创建电子邮件的移动友好版本的一个很好的折衷方案，但其核心仍然是电子邮件的全宽设计。 这实际上取决于您的特定受众，他们打开电子邮件的位置，以及您优化订阅者体验的设计策略。

什么是媒体查询？

媒体查询 (@media) 是一个条件语句，它为一组特定的规则触发一组 CSS。 您可以通过以下资源了解有关媒体查询和电子邮件的更多信息：

  • 响应式电子邮件设计的操作指南
  • 了解 HTML 电子邮件中的媒体查询

有没有关于响应式设计对电子邮件的影响的数据？

你打赌！ 我们最近与 MailChimp 一起做了一份关于响应式设计和电子邮件测试对点击的影响的报告。 我们发现响应式设计使移动用户的点击次数增加了 15%。

有了混合支持和这么多变通方法，转向响应式设计似乎势不可挡。 我该如何开始？

由于当前电子邮件客户端的支持如此有限，响应式电子邮件设计可能难以实现。 我们的第一个建议是在深入研究之前尽可能多地了解响应式电子邮件设计。我们建议查看 MailChimp、Campaign Monitor 和 Litmus 上的资源以帮助指导您。

如果您不习惯直接进入响应式电子邮件的实际开发，请考虑使用简单的拖放式电子邮件编辑器来构建您的电子邮件。 StampReady、Canvas 和 MailChimp 等产品将为您免去电子邮件编码的麻烦。

如果您愿意深入研究代码，请查看 Litmus Builder，这是一个专为电子邮件设计而构建的代码编辑器。 首先尝试实施基本的响应式电子邮件技术——这将为在支持响应式设计的客户端（主要是 Apple 设备）中打开电子邮件的用户提供出色的体验。

另外，请务必在发送前预览您的电子邮件！ 您可以使用 PutsMail 向自己发送电子邮件，或者使用 Litmus 在 40 多个不同的电子邮件客户端中查看您的电子邮件的外观。

如果您对响应式电子邮件设计有任何疑问或遇到编码问题，请前往 Litmus 社区寻求帮助。

你推荐任何响应式框架吗？

是的！ 我们建议查看 ZURB 的响应式框架 Ink（注意：此框架需要一种解决方法才能在 Outlook 2007-2013 中正确呈现）。 如果你喜欢 Sass，Faust Gertz 制作了 Ink 的 Sass 版本，Alex Ilhan 有一个名为 Zenith 的 Sass 电子邮件框架。 此外，来自 Code School 的 Dan Denney 有一个很棒的电子邮件工作流程，称为 Emayll，Brian Graves 有一个惊人的响应式电子邮件模式集合。

针对不支持媒体查询的客户端进行优化

如果客户端不支持响应式设计，那么该客户端会显示什么？

每个电子邮件客户端都以不同的方式呈现电子邮件，尤其是在移动电子邮件应用程序方面。 本质上，如果他们不支持响应式设计，它将回退到全角电子邮件的某个版本。 有时它会是一个“缩小”的全角版本，有时它会是一个放大的“放大”版本，有时像 Gmail 这样的客户端可能会自动增加字体大小以制作“移动友好”版本的电子邮件。

最好的办法是在发送之前始终预览您的电子邮件。 您可以使用 PutsMail 向自己发送电子邮件，或者使用 Litmus 在 40 多个不同的电子邮件客户端中查看您的电子邮件的外观。

为不支持响应式设计的客户（例如 Android 版 Gmail 应用程序）进行响应式设计的最佳方法是什么？ 我们应该有什么类型的“备份”？

我们建议首先让您的电子邮件对移动设备友好。 这意味着拥有最少量的电子邮件内容并针对移动用例进行设计，例如更大的字体和按钮大小。 开箱即用的单栏设计也让您可以更轻松地为 Gmail 应用程序呈现电子邮件。

对于那些熟悉高级编码技术的人来说，开发电子邮件并解决 Gmail 应用程序中缺乏响应式支持的最佳方法是“混合编码方法”。 它本质上使用移动优先的方法，并使用一些特定于电子邮件的技巧将电子邮件缩放到桌面宽度。 您可以在此处阅读有关如何实施混合编码方法的更多信息：

  • 混合编码方法
  • 混合编码 Redux-提高标准
  • 响应式电子邮件设计中来之不易的经验教训

代码问题

你能把你的媒体查询放在一个单独的 CSS 文档中，并在头部链接到那个文档吗？

由于电子邮件客户端支持有限，不建议对电子邮件使用链接样式表（<link> 标记）。 所有样式都应嵌入到电子邮件的 <head> 中。

响应式电子邮件设计最常见的断点是什么？ 理想的断点数是多少？

由于 iPhone 上的打开次数最多，因此您的电子邮件开始在最小 414 像素处设置断点非常重要，这是新 iPhone 6 Plus 的宽度。

对于给定的设计，没有“理想”的断点数量——这一切都取决于您的个人设计和优化订阅者的体验。 最好至少考虑一个断点以使您的电子邮件响应。

你推荐使用表格还是 div？

电子邮件设计绝对需要使用基于表格的布局和结构。 其原因是电子邮件客户端（如 Outlook 桌面客户端）缺乏对 <div> 的支持，因为它与 HTML 的实际结构和基础有关。 一些电子邮件客户端确实支持 <div> 并且可以非常强大地用于某些黑客和解决方法，特别是对于响应式电子邮件。

您可以使用媒体查询更改表中的 align="left" 或 align="right" 属性吗？ 或者，它只是为了改变风格？

从技术上讲，您无法更改 CSS 中的 align HTML 属性，但还有其他解决方法。 您可以将每个单独的表格包装在一个空的 <div> 中，并使用 float 属性或 display 属性来交换表格。 ActionRocket 有一篇关于使用这种高级技术的很棒的博客文章。

使用响应式电子邮件，如何支持背景图像？ 如果我希望它们是全角的，那么保存背景图像的理想尺寸是多少？

移动电子邮件客户端非常支持背景图像。 没有用于保存背景图像的“理想”尺寸。 您应该始终尝试使用相对较小的文件大小，以便您的订阅者可以快速下载您的电子邮件。 您可以使用 Litmus 中的图像检查功能来测试您的图像下载速度。

样式是否必须内联才能让它们与许多电子邮件客户端一起使用？

是的。 一些电子邮件客户端删除了电子邮件 <head> 中的所有 CSS 样式，尤其是 Gmail，这使得内联 CSS 样式成为电子邮件的必要条件。

在电子邮件中使用像素或 em 字体大小更好吗？

最好使用像素来定义电子邮件中的字体大小，因为许多电子邮件客户端不支持 em。

是否可以使用媒体查询替换图像？

可以使用媒体查询替换背景图像，但不能使用内联图像（ <img> 标签）。

优化图像以使其在视网膜显示器上清晰呈现的最佳方法是什么？

对于视网膜，您通常希望将图像制作为最终显示尺寸的两倍。 例如，一张 100×100 的图像实际上应该是 200×200，但使用 HTML 属性或 CSS 样式缩小到 100×100。 通常，这种技术应该只用于需要清晰的小图像，而不是像照片这样的大图像。 Litmus 社区上有一些关于视网膜设计的精彩讨论：

  • 为视网膜设计
  • 带有文字号召性用语和视网膜显示的图像

是否显示：无； 或显示：块； 在响应式电子邮件中工作？

这不是 display 属性是否在响应式电子邮件中工作的问题，而是电子邮件客户端是否支持它。 像大多数 CSS 一样，它得到一些支持，而另一些则不支持。 最明显的是 Gmail 不支持它。

是否有任何电子邮件客户端相当于 Web 浏览器的“检查元素”？ 对我的响应式设计进行故障排除会很有用。

没有完全等同于 Web 浏览器的“检查元素”。 但是，Litmus 中的交互式测试功能非常有用。 此外，Litmus Builder 具有一键式测试和重新测试功能，可以非常快速地迭代电子邮件。

否则，我们建议仅在 WebKit 浏览器（Chrome 或 Safari）中进行故障排除。 由于大多数移动打开发生在 WebKit 上，WebKit 具有强大的 CSS 支持，因此在 WebKit 浏览器中进行开发和故障排除是对这些电子邮件客户端将发生的情况的一个很好的复制。

电子邮件客户端是否普遍支持填充？

电子邮件客户端几乎普遍支持填充。 另一方面，保证金属性没有很大的支持。 我们强烈建议使用填充。

如何使用对齐方式正确堆叠三列？ 除了左右对齐之外，还应该使用居中对齐吗？ 或者，您根本不建议使用三列布局？

是的，您可以在响应式电子邮件设计中堆叠三列，尽管与两列设计相比，堆叠和反转它们的选项更有限或更难做到。 表格的对齐方式取决于您希望如何堆叠它们，但您通常会将所有三个表格都向左对齐。

ActionRocket 有一篇关于反向堆叠表的高级技术的好文章。

石蕊建造者

什么是石蕊生成器？

Litmus Builder 是世界上第一个由电子邮件设计师为电子邮件设计师构建的代码编辑器。 创建、编辑和共享电子邮件是完全免费的。

Emmet 是否直接内置于 Litmus Builder 中？

这是！ 我们的 Emmet 集成使速记编码变得轻而易举。

我们在哪里可以找到 Litmus Builder 中的响应式电子邮件模板？

Litmus Builder 在模板部分有一个包含 20 多个电子邮件模板的库。 所有模板都完全免费使用。 查看我们关于 Litmus Builder 的完整帮助文档。

试用我们免费的、经过预先测试的响应式模板

响应式电子邮件可让您针对越来越多的移动受众微调您的设计。 使用 Litmus 社区上的大量免费、预先测试的模板简化您的电子邮件设计过程。

介绍 Litmus 社区模板

使用 Litmus 预先测试的模板之一启动您的下一个营销活动。

访问模板 →