学习电子邮件营销和登录页面中的响应设计大师

El 由于格式不同，响应式设计在今天至关重要 用户从其平板电脑，移动设备甚至计算机面对的内容。 电子邮件营销和登录页面中的这种响应式设计对于与客户进行全渠道沟通至关重要。

因此，您必须认真对待使用不同的模板 不同的宽度以达到最佳设计 这些通讯或目标网页可能会登陆我们希望他们从Google或Facebook上的广告中转换的未来客户。

电子邮件营销中的响应式设计

电子邮件营销是宣布产品报价或在我们的博客上创建的新帖子的一种方式， 从而更深地缩小 与我们所有的追随者。

这些新闻通讯具有响应性，这意味着 可以从手机上完美地看到它们，平板电脑或计算机。 因此，我们必须尝试拥有必要的工具，以使所有视觉元素足够和谐，以便于阅读时事通讯。

响应性意味着 在不同设备上显示页面始终正确。 为此，我们有工具 邮件营销 这有助于我们测试以不同格式创建的新闻通讯，从而修改填充或边距等值，以便在我们减小浏览器宽度时可以完美地重新定位它们。

在 使用CSS“媒体查询”的网页设计 根据格式设计网站。 对于手机，最大像素为360px，从360px到650px，我们可以为所有通过平板电脑查看我们网站的用户进行修改。

我们的电子邮件营销新闻稿的一些原则是：

• 清晰的视觉层次：H2中的标题，以段落格式保留文本。
• 两种不同的来源：一个标题和一个文本使我们的时事通讯更具可读性。
• El 使用颜色区分标题，文本和其他元素：我们可以逐渐从深灰色变为浅灰色。
• Un CTA（号召性用语）清晰可辨：如果我们公司的徽标是红色，则号召性用语可以使用这种颜色，而其余的则可以使用互补色。

我们给你一个很好的例子 Filmin进行的时事通讯中的响应式设计 并且您可以在提供的图像中看到。 清晰的白色字体，以及非常浅的灰色文本，使我们能够快速可视化我们想要阅读的不同空间。 CTA并非来自另一个世界，而是通过播放图标提供帮助，这使我们看到了等待我们的东西。

边距中有足够的空格，白色是文本的主要颜色， 与徽标完美契合 品牌； 被它突出的灰色包围。 一个引人注目的图像，它设置了从第一时刻开始挂起的新闻简报的重点。 侧面还留有空间，以使屏幕的整个宽度不会被“吃掉”。

在 桌面版保留了这些原则，甚至在文本中留出更多空间，并在每边留出较大的空白：

目标网页上的自适应设计

MGI 响应设计中可以使用相同的原理 登陆页面花费大量的时间来正确选择模板并遵循设计中的一些规则非常重要：

• 视觉简洁：我们正在谈论保留空白以将重点放在CTA上。
• 精美动人的图像 给读者，而不会忘记分辨率，它们看起来很完美。
• 颜色的重要性 并且我们再次强调。

我们必须致力于针对移动设备，平板电脑和台式机的登录页面的自适应设计。 拿 每次更改都需要反复尝试的时间 从这三种格式中可以看出，因为我们可以放心，而忘记了CSS中所做的更改在移动设备上看起来将是可怕的。

这项工作可能很乏味，但至关重要的是，我们要花时间测试每个更改。 这 使用边距 并尽量不要错过CTAs或操作按钮中的规则：

• 该 相对于文本和按钮边距的距离是渐进的 所有三种格式。 它既不小也不大，并且高度相同。
• La CTA按钮尺寸的比例 必须提供它所处的其他元素。

一个明显的例子是 Shopify在您的目标网页上所做的工作 在台式机上，您可以在移动版中看到。 注意使用颜色，空白和具有适当大小和版式的那些文字：

一系列技巧 为您的企业或在线商店提供更好的目标网页 这些新闻简报对于向用户获取更新和促销非常重要。