如何使用 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 提供。