電子郵件範本的最佳做法

本檔案說明電子郵件設計的一些最佳實務，以建立完備的電子郵件宣傳範本。

AEM中提供的示範促銷活動會遵循所有這些最佳實務。 針對每個最佳實務，說明如何在示範促銷活動中實作最佳實務。

建立您自己的電子報時，請使用這些最佳實務。

注意

所有促銷活動內容都應建立在master類型cq/personalization/components/ambitpage的頁面下。 例如，如果您要規劃促銷活動結構，則會類似：

  • /content/campaigns/teasers/en/campaign-promotion-global

您應確定它位於主版頁面下：

  • /content/campaigns/teasers/master/en/campaign-promotion-global
注意

建立Adobe Campaign的郵件範本時，您必須在範本的​jcr:content​節點中包含值​acMapping​的屬性​mapRecipient，否則您將無法在​的「頁面屬性」​中選取Adobe Campaigampapaign範本aem（欄位已停用）。

範本／頁面元件

/libs/mcm/campaign/components/campaign_newsletterpage

最佳實務 實施

指定檔案類型，以確保一致的轉譯。

在開頭加入DOCTYPE（HTML或XHTML）

可透過設計變更cq:doctype屬性（位於"/etc/designs/default/jcr:content/campaign_newsletterpage?lang=zh-Hant"）來設定

預設值為"XHTML":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

可變更為「HTML_5」:

<!DOCTYPE HTML>

指定字元定義，以確保正確轉譯特殊字元。

將CHARSET聲明（例如iso-8859-15、UTF-8）新增至<head>

設為UTF-8。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

使用<table>元素對所有結構進行編碼。 對於更複雜的版面，您應巢狀內嵌表格以建立複雜的結構。

即使沒有css，電子郵件看起來也不錯。

整個範本都使用表格來建構內容。 目前最多使用4個嵌套表（1個基表+最大）。 3個巢狀層級)

<div> 標籤僅用於作者模式，以確保正確編輯元件。
使用元素屬性（例如儲存格填補、驗證和寬度）來設定表格尺寸。 這會強制使用框模型結構。

所有表都包含必要的屬性，如border、cellpadding、cellspacing和width。

為了協調表內的元素定位，所有表單元格都設定了屬性valign="top"。

說明行動友好性（如果可能）。 使用媒體查詢來增加小螢幕上的文字大小，並為連結提供拇指大小的點擊區域。

在設計允許的情況下，讓電子郵件回應速度更快。

 就CSS樣式來展示示範設計而言，媒體查詢可用來提供適用於行動裝置的版本。
內嵌CSS比將所有CSS放在開頭要好。

為了更好地展示基礎HTML結構，並簡化自訂電子報結構的可能性，只內嵌了部分CSS定義。

基本樣式和範本變化已擷取至頁面<head>中的樣式區塊。 在最終提交電子報時，這些CSS定義應內嵌在HTML中。 已規劃自動啟動機制，但目前尚未推出。
讓CSS變得簡單。 避免複合樣式聲明、速記程式碼、CSS版面屬性、複雜的選擇器和偽元素。 就CSS樣式用於展示示範設計而言，CSS建議仍在遵循中。
電子郵件的寬度應為600-800像素。 這樣，在許多用戶端提供的預覽窗格大小中，他們的行為會更好。 內容表格的width在示範設計中限制為600px。

影像

/libs/mcm/campaign/components/image

最佳實務 實施
將​alt​屬性新增至影像 alt​屬性已定義為影像元件的必備屬性。
使用​jpg​取代​png​格式來處理影像 影像元件一律會以JPG格式提供影像。
請使用<img>元素，而非表格中的背景影像。 範本中未使用背景影像資料。
在圖片上新增屬性style="display block"。 讓Gmail顯示更好。 所有影像都依預設包含​style="display block"​屬性。

文字和連結

/libs/mcm/campaign/components/heading, /libs/mcm/campaign/components/textimage

最佳實務 實施
在CSS中使用html <font>而非樣式(font-family) RichTextEditor（例如，在textimage元件中）現在支援選擇字型系列和字型大小並套用至選取的文字。 它們會呈現為<font>標籤。
使用基本的跨平台字型，例如Arial、Verdana、Georgia和Times New Roman。

視電子報設計而定。

在示範設計中，使用「Helvetica」字型，但如果不存在，將返回一般的sans-serif字型。

通用

最佳實務 實施
使用W3C驗證器來修正HTML程式碼。 請確定所有開啟的標籤都已正確關閉。 代碼已驗證。 對於XHTML過渡Doctype,<html>元素的缺少xmlns屬性。
不需費心使用JavaScript或Flash —— 這些技術基本上不受電子郵件用戶端支援。 電子報範本中不使用JavaScript和Flash。
新增純文字版本以傳送多部份。 頁面屬性中已內建新介面工具集，以輕鬆從頁面內容擷取明文版本。 這可做為最終明文版的起點。

促銷活動電子報範本和範例

AEM隨附數個範本和元件，讓您建立促銷活動電子報。 您可以使用這些範本和元件來建立自訂電子報。

範本

為提供穩固的基礎並擴大內容流的各種可能性，現成可用的範本類型有三種稍微不同。 您可輕鬆使用這些工具來建立自訂的網頁。

所有檔案均具有​標題、頁尾​和​正文​部分。 在內文部分下方，每個範本在​欄設計（1、2或3欄）中不同。

chlimage_1-318

元件

目前有7個元件可用於促銷活動範本內。 這些元件都以Adobe標籤語言​HTL​為基礎。

元件名稱 元件路徑
標題 /libs/mcm/campaign/components/heading
影像 /libs/mcm/campaign/components/image
文字和個人化 /libs/mcm/campaign/components/personalization
文字貼文 /libs/mcm/campaign/components/textimage
連結 /libs/mcm/campaign/components/reference
Dynamic Media Classic（之前稱為Scene7）影像範本 /libs/mcm/campaign/s7image
定位參考 /libs/mcm/campaign/components/reference
注意

這些元件針對郵件內容進行了優化；也就是說，他們遵守本檔案中概述的最佳實務。 使用其他現成可用的元件通常會違反這些規則。

這些元件在Adobe Campaign元件中有詳細說明。

本頁內容