Foundation

開始使用 Sass

開始使用由 Sass 支援的 ZURB 堆疊來撰寫 HTML 電子郵件。

Foundation for Emails 透過提供一套功能強大且經過測試的現成元件，讓開發 HTML 電子郵件變得輕鬆。這包括完全回應式網格、按鈕、標題、選單等。

Foundation for Emails 的 Sass 工作流程由 ZURB 電子郵件堆疊 支援，這是一個用於建立 HTML 電子郵件的一體化建置系統。此工作流程需要一些較多的前期設定，但此工具能讓編碼變得非常快速，並透過 Inky 中我們新的自訂 HTML 標籤讓您的程式碼保持極佳的乾淨度。

ZURB 堆疊工作流程也包含 Handlebars，讓您能將電子郵件寫成範本，而不是靜態檔案。最後，您可以使用 Sass 設定檔 輕鬆進行全面性的設計變更。以下是此範本中封裝的所有內容

  • Inky HTML
  • Sass
  • Handlebars 範本
  • BrowserSync
  • 影像壓縮
  • 內嵌

在這個入門指南中，我們將下載 Foundation for Emails，建立基本網格，然後將我們的電子郵件內嵌，以便準備測試。

需求

若要使用 Foundation for Emails 的 Sass 版本，您需要在電腦上安裝 Node.js。Node 與 Windows、OS X 和 Linux 相容，Node.js 網站 有每個作業系統的安裝程式。

安裝

我們將使用 Foundation CLI 來設定新的專案。如果您已經從 Foundation for Sites 安裝了 Foundation CLI，您可以略過這個第一個指令。

npm install --global foundation-cli

如果您在 OS X 或 Linux 上遇到任何權限錯誤 (EACCESS)，您可以嘗試在指令前加上 sudo。

sudo npm install --global foundation-cli

一旦在您的電腦上安裝了 CLI，啟動一個空白的 Foundation for Emails 專案非常容易。移到您儲存專案的資料夾，然後執行這個指令

foundation new --framework emails

CLI 會要求您輸入專案名稱，作為安裝資料夾的名稱。之後，專案範本將會下載，並安裝各種依賴項。整個過程需要一分鐘以上。

執行伺服器

安裝專案後，執行 cd project，其中 project 是剛才建立的專案名稱。然後執行

npm start

這將啟動建置程序，其中包括 HTML 解析、Sass、影像壓縮和伺服器。當初始建置完成時，您的瀏覽器將會彈出一個新的分頁，指向您的專案。您將會看到一個空白的 index.html 檔案。

檔案結構

您將在專案的 src 資料夾中完成所有工作。src 中的各種 HTML 檔案、Sass 檔案和影像會編譯成一個名為 dist/（意為「發行」）的新資料夾，其中包含電子郵件的最終 HTML 和 CSS。這些檔案是您將上傳到 Litmus、Campaign Monitor 等進行測試，或載入到您的電子郵件活動服務中的檔案。

以下是 src 資料夾中檔案的細目

  • assets/：Sass 和影像檔案。
  • layouts/：包裝所有電子郵件的樣板 HTML。
  • pages/：電子郵件的 HTML 檔案。
  • partials/：可以注入到頁面的可重複使用 HTML 片段。

樣板

在 src/layouts/default.html 中，您可以看到讓 HTML 運作所需的樣板。以下是我們對這個樣板的註解，說明什麼是什麼。

<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <!-- The character set should be utf-8 -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- Enables media queries -->
  <meta name="viewport" content="width=device-width"/>
  <!-- Link to the email's CSS, which will be inlined into the email -->
  <link rel="stylesheet" href="assets/css/foundation-emails.css">
</head>

<body>
  <!-- Injection point for the inline <style> element. Don't remove this comment! -->
  <!-- <style> -->
  <!-- Wrapper for the body of the email -->
  <table class="body" data-made-with-foundation>
    <tr>
      <!-- The class, align, and <center> tag center the container -->
      <td class="float-center" align="center" valign="top">
        <center>
          <!-- The body of each email you write is injected here -->
          {{> body}}
        </center>
      </td>
    </tr>
  </table>
</body>
</html>

網格基礎

Foundation for Emails 包含許多製作 HTML 電子郵件所需的常見元素：網格、字體樣式、按鈕、標示框等。

建立可在所有電子郵件用戶端運作的 HTML 電子郵件所需的標記很複雜，而且涉及撰寫許多表格。不過，ZURB Stack 包含 Inky，這是一種範本語言，可將簡單的 HTML 標籤轉換為元件所需的複雜 HTML。

讓我們建立一個基本的網格。

<container>
  <row>
    <columns small="12" large="6">Column One</columns>
    <columns small="12" large="6">Column Two</columns>
  </row>
</container>

這裡我們使用三個主要的版面元素：容器、列和欄。

容器會包覆電子郵件的內文。它會將電子郵件內文的寬度設定為最大值。

列用於將欄的組群組合在一起。欄會將您的版面分割成並排的水平區段。在小螢幕上，這些欄會堆疊在彼此上方以節省空間，除非您設定它們在小螢幕上保持其版面。

在上述範例中，我們在 <column> 標籤上使用屬性 large 來定義該欄的大小在大螢幕上。Foundation 使用 12 欄網格，而且由於 large="6"，這表示每欄會佔據列的一半寬度。在小螢幕上，每欄會是全寬，而第二欄會堆疊在下方。

內嵌

現在我們有了基本的電子郵件，在寄送之前我們需要做的最後一件事是內嵌它。這是將電子郵件的所有 CSS 注入 HTML 的過程，這樣它才能作為一個獨立檔案運作。

Gmail 和 Outlook 等電子郵件用戶端會從 <head> 中移除 <style> 標籤，而 Gmail 也會從電子郵件的 <body> 中移除它。最好將您的 CSS 內嵌在標記中。在樣式標籤中手動內嵌所有 CSS 會非常麻煩，而且會花費很長的時間。

預設情況下，建置程序不會內嵌。若要在建置時執行完整的內嵌程序，請結束在命令列中執行的程序，然後執行 npm run build。這會執行相同的建置程序，但在最後新增內嵌步驟。

您的電子郵件 CSS 會包含回應式樣式的媒體查詢，內嵌工具會將其移到 <body> 中，以便保留它們。

當電子郵件在瀏覽器中開啟時，它看起來會相同。但請嘗試檢視頁面的原始碼，您會看到像這樣一團亂的程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="https://www.w3.org/1999/xhtml" lang="en" xml:lang="en" style="background:#cacaca;min-height:100%"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">...

測試

現在您擁有內嵌電子郵件，您需要在實際電子郵件客戶端中測試它，以驗證它看起來是否正確。Foundation 的所有內建元件都已在每個主要的電子郵件客戶端中測試過，因此我們已為您完成許多工作。但是，您會希望在發送電子郵件給大眾之前先測試您的電子郵件。

測試電子郵件最受歡迎的工具是 Litmus。您只需貼上電子郵件的 HTML，即可在您想要的任何電子郵件客戶端中獲得即時預覽。

由您選擇哪些電子郵件客戶端對於測試很重要，但您可以 查看我們的相容性清單 以取得建議。

後續步驟

您已成功安裝 Foundation for Emails，並撰寫、內嵌和測試您的第一封電子郵件！若要繼續使用架構，您可以查看其他架構元件的文件，包括 按鈕、標示、選單。

如果您有興趣與 Foundation 團隊深入了解架構，查看我們的 Foundation for Emails 大師課程，這是一個按需影片系列，探討電子郵件設計工作流程的每個面向。

ZURB 大師課程 回應式電子郵件

在此線上課程中，您將學習如何快速設計和開發回應式電子郵件，讓它在幾乎每個螢幕、瀏覽器和電子郵件客戶端上都看起來很漂亮，甚至包括 Outlook。

學習 Foundation for Emails

Foundation for Emails

電子郵件基礎為回應式 HTML 電子郵件的架構，由位於加州坎貝爾的產品設計公司 ZURB 所建立。此架構是自 1998 年以來建置網路產品與服務的成果。

想要更多嗎？

與我們交談

在 Twitter 上發推文給我們
@ZURBfoundation

參與
我們令人驚豔的社群。

保持最新資訊

掌握 Foundation 的最新資訊。在 Github 上找到我們。

保持聯繫

© 1998‐2018 ZURB, Inc. 保留所有權利。