电子邮件模板的最佳实践

注意

AEM电子邮件组件已弃用。由于电子邮件的性质将内容和样式合并，AEM现成提供的电子邮件组件对客户的重复使用有限，因为需要将自定义样式应用到项目所需的任何组件中。

可在项目级别实施电子邮件组件，已弃用的AEM电子邮件组件说明了如何实现这一点。但是，这些已弃用的组件不应用于项目。

本文档介绍有关电子邮件设计的一些最佳实践，从而生成一个完善的电子邮件活动模板。

AEM中提供的演示活动遵循所有这些最佳实践。介绍了如何在演示活动中实施最佳实践，以了解每种最佳实践。

创建您自己的新闻稿时，请使用这些最佳实践。

注意

所有活动内容都应在master类型cq/personalization/components/ambitpage的页面下创建。

例如，如果您的计划活动结构类似于

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

应确保它位于master页面下

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

注意

创建Adobe Campaign邮件模板时，必须在模板的jcr:content节点中包含具有值mapRecipient的属性**，或者您将无法在模板的**页面属性中选择Adobe Campaign模板（已禁用字段）)。

模板／页面组件

/libs/mcm/活动/components/活动_newsletterpage

最佳实践	实施
指定文档类型以确保一致的渲染。在开头添加DOCTYPE（HTML或XHTML）	可通过设计更改"/etc/designs/default/jcr:content/活动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”: <!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> 标记仅在创作模式下使用，以确保正确编辑组件。
使用元素属性（如单元格边距、有效性和宽度）设置表尺寸。这会强制使用箱型结构。	所有表都包含必要属性，如border、cellpadding、cellspacing和width。要协调表内的元素定位，所有表单元格都设置了属性valign="top"。
尽可能说明移动友好性。使用媒体查询增加小屏幕上的文本大小，为链接提供缩略图大小的点击区域。在设计允许的情况下使电子邮件具有响应性。	就CSS样式用于演示设计而言，媒体查询用于优惠移动友好版本。
内嵌CSS比将所有CSS放在开头要好。	为了更好地演示基础HTML结构并简化自定义新闻稿结构的可能性，只嵌入了一些CSS定义。基本样式和模板变量已提取到页面<head>中的样式块。在最终提交新闻稿时，这些CSS定义应嵌入到HTML中。已计划自动联机机制，但当前不可用。
使CSS保持简单。避免复合样式声明、速记代码、CSS布局属性、复杂的选择器和伪元素。	就使用CSS样式来说明演示设计而言，正在遵循CSS建议。
电子邮件的最大宽度应为600-800像素。这将使它们在许多客户提供的预览窗格大小中表现得更好。	在演示设计中，内容表的宽度限制为600px。

图像

/libs/mcm/活动/components/image

最佳实践	实施
向图像添加alt属性	alt属性已定义为图像组件的必需属性。
对图像使用jpg格式，而不是png格式	图像组件始终将图像用作JPG。
使用`<img>`元素代替表中的背景图像。	模板中不使用背景图像数据。
在图片上添加属性style="display block"。允许在Gmail上显示良好。	默认情况下，所有图像都包含style="display block"属性。

文本和链接

/libs/mcm/活动/components/heading, /libs/mcm/活动/components/textimage

最佳实践

实施

在CSS中使用html <font>而不是样式（字体系列）

RichTextEditor（例如，在文本时间组件中）现在支持选择字体系列并将字体大小和字体大小应用到选定文本。它们将呈现为<font>标记。

使用基本的跨平台字体，如Arial、Verdana、Georgia和Times New Roman。

取决于新闻稿设计。

对于演示设计，使用字体“Helvetica”，但将返回到通用的sans-serif字体（如果不存在）。

通用

最佳实践	实施
使用W3C validator更正HTML代码。确保正确关闭所有打开的标记。	已验证代码。对于XHTML transitional Doctype，仅`<html>`元素缺少xmlns属性。
不用再使用JavaScript或Flash-电子邮件客户端大多不支持这些技术。	新闻稿模板中不使用JavaScript和Flash。
为多部件发送添加纯文本版本。	在页面属性中构建了一个新构件，以便从页面内容轻松提取纯文本版本。这可用作最终纯文本版本的起点。

AEM附带了多个现成的模板和组件，供您创建活动新闻稿。您可以使用这些模板和组件创建自定义新闻稿。

模板

为了优惠实底并扩大内容流的各种可能性，现有的三种模板类型略有不同。您可以轻松使用这些组件构建自定义新闻稿。

所有文件都具有头、脚注和正文部分。在正文部分下方，每个模板在列设计（1、2或3列）中有所不同。

组件

当前有七个组件可用于活动模板内部。这些组件都基于Adobe标记语言HTL。

组件名称	组件路径
标题	/libs/mcm/活动/components/heading
图像	/libs/mcm/活动/components/image
文本与个性化	/libs/mcm/活动/components/personalization
文本图像	/libs/mcm/活动/components/textimage
链接	/libs/mcm/活动/components/reference
Dynamic Media经典(前Scene7)图像模板	/libs/mcm/活动/s7image
目标引用	/libs/mcm/活动/components/reference