文件AEM 6.4Administering 指南

電子郵件範本最佳作法 best-practices-for-email-templates

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • Admin
CAUTION
AEM 6.4已結束延伸支援，本檔案不再更新。 如需詳細資訊，請參閱 技術支援期. 尋找支援的版本 此處.

本檔案說明電子郵件設計的一些最佳實務，以建立完善的電子郵件行銷活動範本。

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

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

NOTE
所有促銷活動內容應建立在 master 類型頁面 cq/personalization/components/ambitpage. 例如，如果您正在規劃促銷活動結構，則會類似：
  • /content/campaigns/teasers/en/campaign-promotion-global
您應確定它位於主版頁面下：
  • /content/campaigns/teasers/master/en/campaign-promotion-global
NOTE
為Adobe Campaign建立郵件範本時，您必須包含屬性 acMapping 值 mapRecipient 在 jcr:content 節點，或您將無法在 頁面屬性 的（欄位已停用）。

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

/libs/mcm/campaign/components/campaign_newsletterpage

最佳實務
實施

指定文檔類型以確保一致的呈現。

在開頭添加DOCTYPE(HTML或XHTML)

可透過設計變更 cq:doctype 屬性 "/etc/designs/default/jcr:content/campaign_newsletterpage"

預設為「XHTML」：

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

可變更為「HTML5」：

<!DOCTYPE HTML>

指定字元定義以確保正確呈現特殊字元。

將CHARSET聲明（例如iso-8859-15、UTF-8）添加到 <head>

設為UTF-8。

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

使用 <table>元素。 對於更複雜的佈局，應嵌套表以構建複雜結構。

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

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

<div> 標籤只會在製作模式中使用，以確保能正確編輯元件。

使用元素屬性（例如儲存格邊框間距、驗證和寬度）來設定表格維度。 這會強制一個盒型結構。

所有表都包含必要的屬性，如 邊框, 儲存, 儲存空間 和 寬度.

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

如果可能的話，可以考慮移動友好性。 使用媒體查詢增加小螢幕上的文字大小，為連結提供縮圖大小的點擊區域。

如果設計允許，請讓電子郵件回應。

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

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

基本樣式和範本變異已擷取至 <head> 頁面的下一個頁面。 在最終提交電子報時，這些CSS定義應內嵌在HTML中。 已規劃自動啟用機制，但目前不可用。

讓CSS保持簡單。 避免複合樣式聲明、速記代碼、CSS佈局屬性、複雜的選取器和偽元素。
就CSS樣式來說明示範設計而言，會遵循CSS建議。
電子郵件的寬度上限應為600-800像素。 這樣，在許多用戶端提供的預覽窗格大小內，它們的行為就會更好。
此 寬度 在示範設計中，內容表格的上限為600px。

影像 images

/libs/mcm/campaign/components/image

最佳實務
實施
新增 alt 屬性至影像
此 alt 屬性已定義為影像元件的必要屬性。
使用 jp 而非 png 影像格式
影像元件一律會將影像當作JPG。
使用 <img> 元素，而非表格中的背景影像。
範本中未使用背景影像資料。
在圖片上添加屬性style="display block"。 可在Gmail上正常顯示。
預設情況下，所有影像都包含 style="display block" 屬性。

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

最佳實務
實施
在CSS中使用html而非樣式(font-family)
RichTextEditor（例如，在文本時間元件中）現在支援選擇字型系列和字型大小，並將其應用於選定文本。 它們會呈現為標記。
使用基本、跨平台字型，例如 阿里亞爾、韋爾達納、喬治亞 和 《泰晤士報新羅馬》.

取決於電子報設計。

在示範設計中，字型「Helvetica」已使用，但若不存在，將回復為通用的無襯線字型。

通用 generic

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

行銷活動電子報範本和範例 campaign-newsletter-templates-and-examples

AEM隨附數個現成的範本和元件，供您建立campaign電子報。 您可以使用這些範本和元件來建立自訂電子報。

範本 templates

為了提供堅實的基礎並擴大內容流的可能性，現成可用的範本類型稍有不同。 您可以輕鬆使用這些工具來建置自訂網頁。

都有 標題, 頁腳 和 身體 區段。 在內文章節下方，每個範本的 欄設計 （1、2或3欄）。

chlimage_1-318

元件 components

目前有 在行銷活動範本中可用的七個元件. 這些元件都基於Adobe標籤語言 HTL.

元件名稱
元件路徑
標題
/libs/mcm/campaign/components/heading
影像
/libs/mcm/campaign/components/image
文字和個人化
/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
5ce3024a-cbea-458b-8b2f-f9b8dda516e8