电子邮件通讯对于保持与客户的联系至关重要。而且它们也可以达到各种目的,从分享最新消息到提供有用的提醒。这仍然是接触你的受众的最佳方式之一。
获得转换(点击、销售等)的关键之一是拥有一个干净、易读的通讯模板。但这还不是全部。你的电子报还必须具有响应性,以考虑到各种移动设备的情况。
总而言之,我们的目标是要制作出信息丰富、在每个屏幕上都好看的电子邮件。值得庆幸的是,你不需要到远处去寻找灵感。这正是今天所收集的简单的响应式电子邮件通讯代码片段的作用。
这些设计精良的代码段涵盖了各种潜在的使用情况。它们将成为你自己项目的一个伟大起点。让我们开始吧!
电子邮件模板实践by Regina Catipon
这个高度视觉化的电子邮件模板为展示你的产品提供了完美的外观。照片和短文的组合将有助于在不压倒用户的情况下表达观点。它鼓励读者点击了解更多细节。
请看Regina Catipon的笔式电子邮件模板实践
简单的放弃购物车邮件模板by Maizzle
坚持电子商务,放弃购物车的电子邮件提供了一个机会,随意地提醒客户什么在等着他们。在这个有吸引力的片段中,信息很简单,并提供可操作的信息。它还利用了流行的Tailwind CSS框架。
查看Maizzle制作的Pen简单放弃购物车电子邮件模板
UI Guild / 电子邮件模板by Edmundo Santos
在与最新的CSS技术兼容方面,电子邮件客户端仍然相当有限。但这里证明了你仍然可以创造一些独特的东西。颜色和排版的使用使这个模板从普通中脱颖而出。
请看Edmundo Santos的PenUI Guild / Email Template
发票邮件模板by chetan
有些类型的电子邮件信息应该尽可能的简单--发票就是其中之一。一些基本的品牌宣传和明确的行动呼吁是至关重要的。这是一个坚实的例子,它是一个单一目的的信息,为用户提供了他们需要知道的确切信息。
请参阅笔者的发票电子邮件模板,作者:chetan
VOH Facebook Liveby Alisa Longoria
活动邀请是鼓动人们对虚拟或现场活动的兴趣的好方法。这个片段不仅看起来很棒,而且还可以作为内容策略的指南。收件人会立即知道活动是什么,何时举行,以及如何注册。这就是你的做法!
请看Alisa Longoria的PenVOH Facebook直播
HTML电子邮件模板 - 博客作者:Josh Beard
不是每个人都有时间定期查看你的博客。这时,电子邮件通讯可以帮助读者保持最新的信息。这个模板的闪光点在于,它允许有效的品牌宣传,并将文章分解成小块状。这很容易让读者在短时间内消化。
请看PenHTML电子邮件模板--Josh Beard的博客
BMIC电子报模板 作者:Tom Markart
这是另一种基于新闻的电子邮件的方法。它专注于一篇文章,同时在下面提供额外的可点击的标题。这可能是一个非常好的选择,因为非营利组织想突出一个筹款活动,同时也列出其他相关的新闻。此外,这个片段中的排版使通讯非常容易阅读。
请看Tom Markart设计的PenBMIC通讯模板
欢迎邮件模板作者:Jude Francis
一封入职邮件是欢迎新用户的好方法。再一次,简单就是好。这个片段使用白色空间和简洁的排版来让新手了解相关细节。彩色的图标也有助于使特定项目脱颖而出。
请看Jude Francis的钢笔欢迎邮件模板
满足各种需求的电子邮件模板
在许多方面,电子邮件模板设计在可用的功能方面是落后的。虽然这可能是令人失望的,但也是一个机会。因为电子邮件客户端并不像现代网络浏览器那样精明,它迫使设计者剥离所有的铃声和口哨。
这使我们能够更加专注于简单性。这是关于促进信息的内涵,而不是用花哨的附加物来吸引读者。这一点,上面的每一个片段都做得很好。
想探索更多的模板选择吗?请查看我们的CodePen系列并获得灵感吧