文件AEM 6.5使用手冊

電子郵件範本的最佳實務 best-practices-for-email-templates

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • 管理員
CAUTION
本文適用於已棄用的Foundation元件型AEM電子郵件元件。
建議使用者使用現代核心元件電子郵件元件。

本檔案說明產生完善開發的電子郵件行銷活動範本的電子郵件設計相關最佳實務。

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

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

NOTE
所有行銷活動內容應建立於型別為cq/personalization/components/ambitpage的master頁面下。
例如，如果您的計畫行銷活動結構類似於
/content/campaigns/teasers/en/campaign-promotion-global
確定它位於master頁面下
/content/campaigns/teasers/master/en/campaign-promotion-global
NOTE
建立Adobe Campaign的郵件範本時，您必須將值為​ mapRecipient ​的屬性​ acMapping ​包含在範本的​ jcr：content ​節點中。 如果沒有該屬性，您就無法在Experience Manager的​ 頁面屬性 ​中選取Adobe Campaign範本（欄位已停用）。

範本/頁面元件 template-page-component

/libs/mcm/campaign/components/campaign_newsletterpage

最佳實務
實作

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

在開頭新增DOCTYPE (HTML或XHTML)

可透過設計變更 "/etc/designs/default/jcr：content/campaign_newsletterpage" 中的 cq：doctype 屬性進行設定

預設值為「XHTML」：

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

可變更為「HTML_5」：

<！DOCTYPEHTML>

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

將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>中的樣式區塊。 在最後提交Newsletter時，這些CSS定義會內嵌至HTML中。 已規劃自動內嵌機制，但目前無法使用。

保持您的CSS簡單。 避免使用複合樣式宣告、簡寫程式碼、CSS配置屬性、複雜選取器和偽元素。
就使用CSS樣式來說明示範設計而言，我們遵循CSS建議。
電子郵件的最大寬度應為600至800畫素。 此大小調整可讓它們在許多使用者端提供的預覽窗格大小內表現更佳。
內容表格的 寬度 在示範設計中限製為600畫素。

影像 images

/libs/mcm/campaign/components/image

最佳實務
實作
新增​ alt ​屬性至影像
alt ​屬性已定義為影像元件的必要屬性。
影像請使用​ jpg ​格式，而非​ png ​格式
影像元件一律會將影像當作JPG使用。
在表格中使用<img>元素而非背景影像。
範本中不使用任何背景影像資料。
在圖片上新增attribute style="display block"。 如此一來，它們就能在Gmail上正常顯示。
根據預設，所有影像都包含​ style="display block" ​屬性。

/libs/mcm/campaign/components/heading， /libs/mcm/campaign/components/textimage

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

取決於Newsletter設計。

對於示範設計，會使用「Helvetica®」字型，但它會回覆為一般無襯線字型（如果沒有）。

通用 generic

最佳實務
實作
使用W3C驗證器修正HTML代碼。 請確定所有開啟的標籤皆已正確關閉。
程式碼已驗證。 僅適用於XHTML可轉換Doctype，<html>專案遺失的xmlns屬性遺失。
避免使用JavaScript或Flash — 這些技術通常不受電子郵件使用者端支援。
新聞稿範本中未使用JavaScript或Flash。
新增純文字版本以進行多部分傳送。
頁面屬性中內建了新的Widget，以便輕鬆從頁面內容中擷取純文字版本。 您可以使用它作為最終純文字版本的起點。

行銷活動新聞稿範本和範例 campaign-newsletter-templates-and-examples

AEM隨附數種現成的範本和元件，方便您建立行銷活動電子報。 您可以使用這些範本和元件來建立自訂電子報。

範本 templates

為了提供堅實的基礎，並拓寬各種內容流動的可能性，現成可用的範本型別略有不同。 您可以輕鬆使用這三種型別來建立自訂電子報。

全部都有​ 頁首、頁尾 ​和​ 內文 ​區段。 在正文區段下方，每個範本在​ 欄設計 （一、二或三欄）中不同。

可能電子報的 變體

元件 components

目前有七個元件可在行銷活動範本中使用。 這些元件都是以Adobe標籤語言​ HTL ​為基礎。

元件名稱
元件路徑
標題
/libs/mcm/campaign/components/heading
影像
/libs/mcm/campaign/components/image
文字&Personalization
/libs/mcm/campaign/components/personalization
Textimage
/libs/mcm/campaign/components/textimage
連結
/libs/mcm/campaign/components/reference
Dynamic Media Classic (前身為Scene7)影像範本
/libs/mcm/campaign/s7image
目標引用
/libs/mcm/campaign/components/reference
NOTE
這些元件已針對郵件內容最佳化；也就是說，它們遵循本檔案中概述的最佳實務。 使用其他現成可用的元件通常違反這些規則。

這些元件在Adobe Campaign元件中有詳細描述。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2