电子邮件模板的最佳实践

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

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​节点中包含具有值​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> 标记仅在创作模式下使用,以确保正确编辑组件。

使用元素属性(如单元格边距、有效性和宽度)设置表尺寸。 这会强制使用箱型结构。

所有表都包含必要属性,如bordercellpaddingcellspacingwidth

要协调表内的元素定位,所有表单元格都设置了属性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、GeorgiaTimes New Roman

取决于新闻稿设计。

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

通用

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

活动新闻稿模板和示例

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

模板

为了优惠实底并扩大内容流的各种可能性,现有的三种模板类型略有不同。 您可以轻松使用这些工具构建自定义浏览器。

所有文件都具有​脚注​和​正文​部分。 在正文部分下方,每个模板在​列设计(1、2或3列)中有所不同。

chlimage_1-318

组件

当前有七个组件可用于活动模板内部。 这些组件都基于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
注意

这些组件针对邮件内容进行了优化;即他们遵守本文档中概述的最佳做法。 使用其他现成的组件通常会违反这些规则。

Adobe Campaign组件中详细介绍了这些组件。

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now