平谷高端网站开发：FoundationforEmail框架创建响应式电子邮件设计

有大量的营销工具，使您能够轻松地创建响应电子邮件设计。问题是，你可能更喜欢对你的电子邮件的外观有更多的控制，而最好的方法就是从头开始设计它们。使用框架，例如电子邮件基金会为你提供了极好的妥协。您不需要从头开始设计每个组件，但是做完全控制它们的使用方式、时间和地点。

在本文中，我们平谷高端网站开发将首先解释什么是电子邮件框架以及它们如何帮助您。然后，我们将继续讨论电子邮件基金会，以及如何使用它创建您自己的定制，响应电子邮件运动。我们开始工作吧!

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

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

总体而言,框架是用于帮助开发特定类型产品的实践、文件和代码的汇编。把它们看作是代码的构建块，可以帮助您更快地创建复杂的项目，使您不必每次都重新发明轮子。

确实有电子邮件框架这也是我们在这篇文章中要讨论的。让我们探讨一下其中的一些好处：

• 预先构建的元素可以帮助您更快地设计电子邮件。

  如今，大多数电子邮件都包含图像和文本以外的元素，比如按钮和菜单。包含这些元素可能很费时，但框架使您能够立即插入和自定义它们。

• 从盒子里反应出来。

  随着越来越多的人转向移动设备，你需要确保你的电子邮件在他们的屏幕上显示得很好。大多数现代框架在默认情况下都是响应的，这意味着您需要担心的事情少了一件事。

• 模板可以帮助您启动您的设计。

  许多现代电子邮件框架包括各种模板，以帮助您快速创建活动。

正如您所看到的，这里的共同主题是框架使您能够节省时间。有很多情况下，您会希望从零开始编写项目代码，但是一个能够使您以更高的质量更快地完成任务的框架是值得使用的。

介绍电子邮件基金会框架

平谷高端网站开发在更进一步之前，重要的是要注意二基础网上提供的框架-遗址基金会和电子邮件基金会-我们将在整篇文章中关注后者。其主要卖点是其响应网格。这种类型的系统并不是革命性的，但是基金会的流行是基于它的易用性。

获取框架相当简单(即使您没有任何编码经验)，您可以在两个版本之间进行选择-一个基于级联样式表(CSS)另一个Sass。自然，Sass版本通过消除重复CSS样式的需要，可以节省更多的时间，但是是吗？需要熟悉一些Node.js.

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

主要特点：

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

价格：自由更多信息

如何使用电子邮件基金会创建现代设计(分4步)

正如我们提到的，有两个版本的电子邮件基金会。对于本节，我们将使用CSS变体，因为设置它所需的工作量较少。另外，最终的结果应该是一样的-所有的变化都是如何实现的。

如果您想要查看Sass版本的实际使用情况或了解更多有关如何使用它的知识，可以从这个伟大的教程.

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

首先，去基金会发电子邮件开始页，然后单击下载初学者工具包按钮下的按钮。CSS版本副标题：

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

现在，运行您的最喜欢的文本编辑器并打开index.html用它归档。应该是光秃秃的，但我们一会儿就会解决的。

步骤2：熟悉网格系统

电子邮件响应性的基础是其灵活的网格系统。如果你从零开始整理一封电子邮件，你会想要创建你自己的网格来分割你的电子邮件的部分。为此，我们将使用三个不同的组件：容器、行和列。

打开你的基金会index.html文件在文本编辑器中，然后向下滚动到体体部分：

正如您所看到的，您的电子邮件正文包含一个预设的桌子，我们是不会接触的。相反，我们只是将我们自己的网格元素添加到<!–  Your grid goes here  –>。让我们从您需要用于容器的代码开始：

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

最后，我们可以将该行划分为列：

请记住，每一行最多由12列组成。上面的代码告诉您的电子邮件客户端，它应该使用完整的12列显示您的内容。小的屏幕，如移动设备(小-12)，但在台式机上只占6台(大-6).

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

正如您所看到的，这两列基本上是相同的。但是，他们有两个不同的班，第一列和最后一栏。这些信息告诉您的电子邮件客户端，哪些列是行中的第一列和最后一列，而其中的任何列都不需要使用它们。

如果你现在打开你的index.html文件在浏览器中，如下所示：

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

步骤3：在电子邮件中添加组件

电子邮件包的基础有很多组件，最常用的是按钮、背景图像和副标题。它们很简单，所以让我们按顺序看一遍。要添加按钮，需要在一个或多个列中使用以下代码：

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

现在让我们继续讨论背景图像。这些更棘手，因为你需要使用包装器班级，等级使它们占用行的整个宽度，并为其指定特定的背景。使用CSS:

最后但并非最不重要的是，让我们谈谈副标题。这些都是最简单的-您所需要做的就是将您的文本包装在所需的标记中：

就这么简单！使用这三个元素就足以创建一些好看的电子邮件。当然，秘诀是用CSS对它们进行样式设置为你的心所满足，这使我们走到了最后一步。

步骤4：使用CSS设计电子邮件的样式

一些电子邮件客户端(如MicrosoftOutlook)从HTML文件中删除一些样式标记。这样做是为了使电子邮件呈现没有任何问题，以及消除潜在的安全威胁。然而，结果是除非您将CSS直接添加到HTML中，否则您的电子邮件将看起来非常无聊(或内联)。

这样，您的内容和样式都将作为一个文件加载，并且它们应该在大多数现代电子邮件客户端上都能很好地工作。下面是带有内联CSS的HTML元素的外观：

这可能会变得有点混乱，因此我们建议分别处理HTML和CSS文件，然后使用类似于基础衬砌为你把它们结合起来。只需粘贴您的代码，单击一个按钮，它将为您处理其余的。

一旦您有了内联的HTML文件，就可以继续测试它了。使用电子邮件营销工具，这总是一个好主意，然后再发送给你的订阅者。

结语

平谷高端网站开发有很多方法创建功能性和响应性电子邮件。但是，使用诸如电子邮件基金会如果你在寻找灵活性的话，这是一个很好的选择。它使您可以使用预先构建的组件从头开始设计电子邮件，或者通过使用模板。不管你选择什么，它都会大大减少你花在创建电子邮件上的时间。

综上所述，这里有四个步骤，您需要创建与电子邮件基金会现代电子邮件：

1. 下载框架的文件。
2. 熟悉网格系统。
3. 使用电子邮件组件。
4. 使用CSS样式您的电子邮件。