这是电子邮件设计的未来

关于电子邮件设计被卡在过去的说法很多。 处理他们的第一个项目的设计师对表格和内联样式的使用感到遗憾。 策划他们的第一个营销活动的营销人员拒绝超越批量和爆炸的心态。

但是一些勇敢的发件人拒绝让围绕电子邮件设计的（有时）过时的技术和心态阻碍他们。 他们正在突破电子邮件设计的界限，使用高级网页设计中常见的技术来惊喜、愉悦并与订阅者建立联系。

让我们来看看与实验性电子邮件设计相关的挑战，并总结一些我们最喜欢的未来派电子邮件活动。

2020 年的电子邮件营销 借助 20 位领先专家的见解以及来自数千名营销人员和消费者的调查结果，为电子邮件营销的未来做好准备。 现在就下载

电子邮件设计不必受到限制

当大多数人想到电子邮件营销时，他们会想到由希望销售某些东西的公司发送的乏味乏味的时事通讯。 而且，如果您的任务是创建电子邮件活动，您可能会查看一堆 HTML 表格和内联 CSS 并计算分钟，直到您完成编写一封在任何地方都可以正常工作的电子邮件。

虽然电子邮件设计的基础确实有点陈旧，但考虑到一点创造力、计划和大量测试，您可以用它们做的事情真的没有限制。 是的，电子邮件设计人员必须使用基于表格的设计（感谢 Outlook！）、内联 CSS，并在大量黑客中游刃有余，但是，如下面的示例所示，您仍然可以在收件箱中完成一些令人惊奇的事情。

为了证明这一点，这里有一些我们最喜欢的电子邮件示例，它们打破了规则并突破了电子邮件设计的界限。

电子邮件中的轮播？

不久前，英国零售商 B&Q 发送了一封电子邮件，点燃了整个行业。

在此活动中，用户可以将鼠标悬停在或点击按钮上，并观看不同的内容部分平滑地滑进和滑出电子邮件。 这种技术通常被称为轮播，在网络世界中被广泛使用，但在电子邮件活动中很少见。 有些人可能会抱怨轮播效果不佳且仅用于展示，但 B&Q 活动是如何使用尖端技术给电子邮件订阅者带来惊喜的一个很好的例子。

电子邮件使用了许多 CSS3 属性以及一些巧妙的定位，以发挥其魔力。 通过使用 CSS 过渡、动画、z-index 和 overflow 属性，设计师精心制作了一封巧妙的电子邮件，可以直接点击。

更令人印象深刻的是，对于不支持这些更高级技术的电子邮件客户端，一切都可以很好地回退。

疯狂的颜色和星球大战

英国电子邮件机构 Action Rocket 在电子邮件设计方面一直处于领先地位。 他们巧妙地标题为电子邮件新闻每周摘要，电子邮件周刊，他们测试了一些最终可能会进入客户活动的创造性技术。

我们最喜欢的例子之一是他们的电子邮件，其中询问了“这封电子邮件是什么颜色？”。

使用 CSS 关键帧动画，它们为标题部分的背景颜色设置动画，从而产生令人着迷的幻觉效果。 起初它很微妙，但是一旦订阅者抓住了动画，他们就无法转身。

Action Rocket 的另一个很好的例子是他们最近的受星球大战启发的摘要，利用实验性的 -webkit-perspective 属性和 CSS 转换，重新创建了每个人最喜欢的科幻电影的标志性开场爬行。

电子邮件中的信息图表？

虽然电子邮件代理显示块一直发送很棒的电子邮件，但真正引起我们注意的是他们最近的信息图表电子邮件。

与 Email Weekly 示例中的背景颜色类似，显示块使用 CSS 关键帧动画为已经精心设计的广告系列增添活力。 真正很棒的是，电子邮件的响应非常好，可以在移动设备上很好地堆叠每个部分。 响应式设计和动画图标都有助于增强有关移动电子邮件使用的一些重要数据。

我们还没有在电子邮件中看到很多这样的信息图表，这使得它更加令人印象深刻和开创性。 我们很想看到更多信息图表的例子，这就是为什么我们要举办一场专门针对它们的社区竞赛！

HTML5 视频和互动导览

我们喜欢实践我们所宣扬的东西，这就是为什么我们使我们的电子邮件变得美观且响应迅速，尽管我们的受众主要是桌面用户。 这也是我们自己的一些尖端电子邮件活动背后的原因，例如我们去年电子邮件设计会议的 HTML5 视频背景（我们今年夏天将再次举办......）。

我们的设计师 Kevin 使用一些高级电子邮件客户端定位来逐步增强原本简单的设计。 如果你很好奇他到底是如何做到的，他写了一篇博客文章，详细介绍了这个过程。

并且，为了庆祝我们的电子邮件代码编辑器 Builder 的推出，他通过在电子邮件中构建交互式导览来更进一步。

利用 CSS 动画、复选框 hack 和对 CSS 内容属性的自由使用，他在收件箱中展示了 Builder 的一些功能 - 让订阅者无需登录即可体验产品。有很多支持它的代码，但您可以直接在 Builder 中查看它（有点像电子邮件 Inception）。

更美味的电子邮件菜单

与轮播电子邮件一样，设计师 Jerry Martinez 从网络中汲取灵感，为移动订阅者设计了一个汉堡菜单。

导航元素对于电子邮件设计者来说总是一个技巧——尤其是在移动设备上。 由于它们在堆叠时往往会占用大量空间，因此它们可能会分散对活动中主要号召性用语的注意力。 为了解决这个问题，Jerry 设计了一个优雅的汉堡菜单，允许移动用户有选择地显示导航项目。

Jerry 的解决方案给我们留下了深刻的印象，我们邀请人们在我们的社区竞赛之一中展示其他创意导航模式……

社区竞赛：真正的前沿

我们的社区竞赛是我们真正挑战人们提出一些疯狂想法的地方。 每个月，我们都会给他们一个主题，让他们发挥自己的技能。 我们的第一场比赛，着眼于 ALT 文本的创造性使用，产生了一些惊人的结果，就像一封电子邮件中的 Space Invaders：

在我们的第二场比赛中，我们让人们想出了有趣的导航模式。 我们被一些结果震惊了，比如 Remi Parmentier 的粘性导航概念：

尝试新事物？

虽然在电子邮件中尝试新事物是令人兴奋的，但如果您不彻底测试您的广告系列，很多事情都可能出错。 电子邮件预览使在桌面、网络邮件和移动电子邮件客户端中测试任何技术变得容易。

免费试用 Litmus →