阅者最终看到您的电子邮件营销活动的移

seorafi754

因为你永远不知道你的下一个大潜在客户何时会在他们的智能手机上打开电子邮件。为什么构建响应式电子邮件具有挑战性？我们之前提到，sinch的 mailjet 2023 年收件箱洞察发现，世界各地的电子邮件发件人将响应式电子邮件设计视为一项重大挑战。对于那些编写电子邮件营销活动代码的人来说，这是一件特别重要的事情。尽管超过36% 的受访者选择响应式电子邮件作为他们面临的三大挑战之一，但超过 42% 的电子邮件开发人员选择了该选项。请参阅我们有关电子邮件开发人员观点的文章了解更多信息。电子邮件开发人员挑战条形图那么，是什么让响应式电子邮件设计如此具有挑战性，移动优先的方法如何改变一切？一方面，很容易默认采用桌面优先的电子邮件开发方法。毕竟，这就是我们编写代码的环境。然而，结果是，我们最终首先为更大的屏幕开发电子邮件，从长远来看，这可能会让事情变得更加困难。例如，采用为桌面设计的三列布局的电子邮件并将其重新编码以使其在各种移动设备上正确显示将需要大量的开发工作。这些列应该如何堆叠？图像和文本需要如何改变？您应该考虑哪些移动断点？为了适应较小的屏幕而需要编写的代码越多，出现导致问题的小错误的机会就越多。

缺少一个大括号，整个电子邮件布局突然变得一团糟。另一方面，当您从在智能手机上查看电子邮件的简单布局开始，然后扩展桌面设计时，情况就不同了。如果在桌面上查看电子邮件的订动布局，那么它看起洪都拉斯电话号码表来仍然不错，并且他们仍然可以参与。但在移动设备上查看桌面版本的电子邮件却不能说同样的话。这就是为什么移动优先电子邮件编码是更安全的选择。如何切换到移动优先电子邮件编码可以说，使用代码实现响应式电子邮件设计的最流行方法是使用媒体查询。现在，在不使用媒体查询的情况下开发响应式电子邮件当然是可能的。电子邮件极客 nicolemerlin 撰写了一篇精彩的文章，介绍了她在没有媒体查询的情况下编写响应式电子邮件的过程。然而，在本文中，我们将重点讨论使用媒体查询进行编码。目前，几乎所有主要电子邮件客户端都很好地支持屏幕尺寸的媒体查询支持。这就是我用于响应式电子邮件设计的方法。当您首先为移动设备编码时，媒体查询是相当万无一失的。（查看 caniemail.com 了解最新信息。）对于大多数人来说，最大的转变是使用最小宽度媒体查询而不是最大宽度。





通过简单地这样做，您将采用移动优先的方法来开发电子邮件。媒体查询：最大宽度与最小宽度当您学习使用媒体查询编写响应式电子邮件时，您很可能被告知使用最大宽度属性，这本质上是桌面优先的心态。十年前，这对于许多发件人来说可能是有意义的，但情况已经发生了变化。那么，最大的区别是什么？Desktop-first = max-width 当您使用 max-width 属性时，您实际上是在告诉电子邮件客户端您的桌面样式是默认样式，并且您使用媒体查询来适应较小的屏幕。max-width 描述停止应用样式之前的最大宽度。因此，您的样式应从最大到最小排序。换句话说，max-width表示：如果屏幕尺寸小于或等于x，则执行y。以下是您如何使用最大宽度媒体查询编写基本的两列桌面电子邮件，该查询将堆叠列以供移动查看：在包上查看此代码。基本上，我们所说的是，嵌套在最大宽度媒体查询中的任何代码仅应在屏幕尺寸或视口小于480 像素时触发。当移动设备的屏幕或桌面上的浏览器窗口低于 480 像素时，列将堆叠。班上 。 Column 将每个 div 显示属性设置为table-cell，这允许列像表格一样工作。媒体查询表示当屏幕尺寸高于 480px 时使用这些样式。