如何使用 Foundation for Emails Framework 来创建响应式电子邮件设计

已发表: 2017-06-26

有许多营销工具可让您轻松创建响应式电子邮件设计。问题是，您可能更喜欢对电子邮件的外观进行更多控制，最好的方法是从头开始设计它们。使用诸如 Foundation for Emails 之类的框架为您提供了极好的折衷方案。你不会需要每一个部件从头开始设计，但你得到了如何，何时，何地使用他们的完全控制。

在本文中，我们将首先解释什么是电子邮件框架以及它们如何帮助您。然后，我们将继续讨论 Foundation for Emails，以及如何使用它来创建您自己的自定义、响应式电子邮件活动。让我们开始工作吧！

什么是电子邮件框架（以及它们如何帮助您创建更好的电子邮件）

框架仍然需要你做一些编码，但这个过程对于电子邮件来说非常简单。

一般而言，框架是旨在帮助开发特定类型产品的实践、文件和代码的汇编。将它们视为代码的构建块，可以帮助您更快地创建复杂的项目，让您不必每次都重新发明轮子。

电子邮件也有框架，这就是我们将在本文中讨论的内容。让我们探索一些好处：

预建元素可帮助您更快地设计电子邮件。 如今，大多数电子邮件都包含图像和文本以外的元素，例如按钮和菜单。包含这些元素可能很耗时，但框架使您能够立即插入和自定义它们。
响应开箱即用。 随着越来越多的人转向移动设备，您需要确保您的电子邮件在他们的屏幕上显示良好。大多数现代框架默认都是响应式的，这意味着您无需担心一件事。
模板可以帮助您启动设计。 许多现代电子邮件框架都包含各种模板，可帮助您快速创建营销活动。

如您所见，这里的共同主题是框架使您能够节省时间。在很多情况下，您都希望从头开始对项目进行编码，但是一个可以让您以更高的质量更快地完成工作的框架是值得使用的。

电子邮件框架基础简介

电子邮件基金会主页。

在继续之前，重要的是要注意网上有两个Foundation 框架 - Foundation for Sites 和 Foundation for Emails - 我们将在本文中重点讨论后者。主要卖点是其响应式网格。这种类型的系统并不是革命性的，但是 Foundation 的流行是基于它的易用性。

选择框架相当简单（即使您没有任何编码经验），您可以在两个版本之间进行选择——一个基于级联样式表 (CSS)，另一个基于 Sass。自然，Sass 版本通过消除重复 CSS 样式的需要使您能够节省更多时间，但它确实需要对 Node.js 有一定的了解。

最后，Foundation for Email 还为您提供了大量“模式”，例如按钮和菜单，使您的工作更加简单。为了节省更多时间，您甚至可以使用模板而不是从头开始设计布局。

主要特点：

使用响应式网格创建现代电子邮件活动。
提供框架的 CSS 或 Sass 版本。
让您利用模式快速向电子邮件添加常用元素。
使用布局进一步简化电子邮件创建过程。

价格：免费 | 更多信息

如何使用 Foundation for Email 创建现代设计（分 4 个步骤）

正如我们所提到的，Foundation for Emails 有两个版本。在本节中，我们将使用 CSS 变体，因为它需要较少的设置工作。另外，最终结果应该是一样的——所有的变化都是你如何到达那里。

如果您想查看 Sass 版本的运行情况或了解有关如何使用它的更多信息，您可以从这个很棒的教程开始。

第 1 步：下载电子邮件文件基础

首先，前往 Foundation for Email Getting Started页面，然后单击CSS Version副标题下的Download Starter Kit按钮：

电子邮件基础入门页面。

获得文件后，将其解压缩并将其内容提取到一个新文件夹中。在此阶段，您的文件夹应包含一个index.html文件和两个子文件夹——一个用于您的 CSS，另一个用于您的模板。

现在，运行您最喜欢的文本编辑器并用它打开index.html文件。它应该很简单，但我们稍后会修复它。

第 2 步：熟悉网格系统

Foundation for Email 的响应能力基于其灵活的网格系统。如果您要从头开始整理一封电子邮件，您将需要创建自己的网格来分割电子邮件的各个部分。为此，我们将使用三个不同的组件：容器、行和列。

在文本编辑器中打开 Foundation 的index.html文件，然后向下滚动到正文部分：

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

如您所见，您的电子邮件正文包含一个我们不会触及的预设表格。相反，我们只是将我们自己的网格元素添加到它所显示的部分<!– 您的网格在此处 –> 。让我们从您需要用于容器的代码开始：

<table class="container">
<tr>
<td></td>
</tr>
</table>

现在，让我们在其中添加一行：

<table class="row"> <tr> <th></th> </tr> </table>

最后，我们可以将该行分成几列：

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

请记住，每行最多包含 12 列。上面的代码告诉您的电子邮件客户端，它应该在移动设备（ small-12 ）等小屏幕上使用完整的 12 列显示您的内容，但在台式机上只占用 6 列（ large-6 ）。

问题是，如果您的电子邮件在大屏幕上显示，则有六个空列，因此我们需要添加第二个表来修复它：

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

如您所见，两列基本相同。但是，它们有两个不同的类， first column和last columns 。这些告诉您的电子邮件客户端您的行中的第一列和最后一列，中间的任何列都不需要使用它们。

如果您现在在浏览器中打开index.html文件，您会看到以下内容：

一个基本的网格系统示例。

这很简单，是的，但在这个阶段机制应该很明显。每封电子邮件可以有任意多的行，每行最多可以有 12 列。现在，继续使用网格系统，直到找到您喜欢的布局，并使用文本占位符来帮助您识别它们，直到您开始添加元素。

第 3 步：向您的电子邮件添加组件

Foundation for Email 包含大量组件，最常用的是按钮、背景图像和副标题。它们非常简单，所以让我们按顺序浏览它们。要添加按钮，您需要在一个或多个列中使用以下代码：

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

此代码为您的电子邮件添加了一个带有绿色背景的简单小按钮。这里的关键元素是小类和成功类。第一个控制按钮的大小，第二个控制它的颜色。我们不会在此处添加所有可用的课程，而是将您链接到 Foundation 的官方按钮资源，您可以在那里闲暇时仔细阅读它们。

现在让我们转到背景图像。这些有点棘手，因为您需要使用包装类使它们占据行的整个宽度并使用 CSS 为它们分配特定的背景：

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

最后但并非最不重要的，让我们谈谈副标题。这些是最简单的——你需要做的就是将你的文本包裹在必要的标签中：

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

就这么简单！使用这三个元素足以创建一些好看的电子邮件。当然，秘诀是使用 CSS 为它们设置样式以满足您的需求，这将我们带到最后一步。

第 4 步：使用 CSS 设置电子邮件样式

某些电子邮件客户端（例如 Microsoft Outlook）会从您的 HTML 文件中删除一些样式标签。这样做是为了使电子邮件可以毫无问题地呈现，并消除潜在的安全威胁。但是，结果是除非您将 CSS 直接添加到 HTML（或内联），否则您的电子邮件看起来会很无聊。

这样，您的内容及其样式都将作为单个文件加载，并且它们应该可以在大多数现代电子邮件客户端上完美运行。下面是带有内联 CSS 的 HTML 元素的外观：

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

这可能会有点混乱，因此我们建议分别处理您的 HTML 和 CSS 文件，然后使用诸如 Foundation Inliner 之类的工具为您组合它们。只需粘贴您的代码，单击一个按钮，它就会为您处理剩下的事情。

获得内联 HTML 文件后，您可以继续使用电子邮件营销工具对其进行测试，这始终是一个好主意，然后再将其发送给您的订阅者。

结论

有很多方法可以创建功能性和响应性的电子邮件。但是，如果您正在寻求灵活性，使用 Foundation for Emails 等框架是一个不错的选择。它使您可以使用预先构建的组件从头开始设计电子邮件，或者使用模板加快流程。无论您选择什么，它都应该大大减少您花在创建电子邮件上的时间。

回顾一下，以下是使用 Foundation for Emails 创建现代电子邮件所需的四个步骤：

下载框架的文件。
熟悉网格系统。
为您的电子邮件使用组件。
使用 CSS 设计您的电子邮件。

您对如何使用 Foundation for Emails 框架有任何疑问吗？ 在下面的评论部分提问！

文章缩略图由 Faberr Ink/shutterstock.com 提供。