本文档介绍有关电子邮件设计的一些最佳实践,这些最佳实践可生成一个完善的电子邮件促销活动模板。
AEM中提供的演示营销活动遵循所有这些最佳实践。 介绍了每个最佳实践在演示营销活动中如何实施最佳实践。
创建您自己的新闻稿时,请使用这些最佳实践。
所有营销活动内容都应在cq/personalization/components/ambitpage
类型的master
页面下创建。 例如,如果您计划的营销活动结构类似于:
/content/campaigns/teasers/en/campaign-promotion-global
您应该确保它位于主控页面下:
/content/campaigns/teasers/master/en/campaign-promotion-global
为Adobe Campaign创建邮件模板时,必须在模板的jcr:content节点中包含值为mapRecipient的属性**,否则将无法在AEM的**页面属性中选择Adobe Campaign模板(字段处于禁用状态)。
/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"> 可更改为“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像素。 这样,它们就可以在许多客户端提供的预览窗格大小内更好地运行。 | 在演示设计中,内容表的宽度限制为600像素。 |
/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>标记。 |
使用基本的跨平台字体,如Arial、Verdana、Georgia和Times New Roman。 | 取决于新闻稿的设计。 在演示设计中,使用了字体“Helvetica”,但将回退到通用的无衬线字体(如果不存在)。 |
最佳实践 | 实施 |
---|---|
使用W3C验证器更正HTML代码。 确保已正确关闭所有打开的标记。 | 已验证代码。 对于XHTML transitional Doctype,只缺少<html> 元素的缺少xmlns属性。 |
无需费心使用JavaScript或Flash — 这些技术基本上不受电子邮件客户端的支持。 | 新闻稿模板中不使用JavaScript和Flash。 |
为多部分发送添加纯文本版本。 | 已在页面属性中构建了一个新小组件,以便轻松地从页面内容中提取纯文本版本。 这可用作最终纯文本版本的起点。 |
AEM随附了多个模板和组件,供您开箱即用来创建营销活动新闻稿。 您可以使用这些模板和组件创建自定义新闻稿。
为了提供坚实的基础并扩大各种内容流可能性,开箱即用的模板类型有三种略有不同。 您可以轻松使用这些组件来构建自定义新闻稿。
所有页眉都具有标题、页脚和body部分。 在正文部分下方,每个模板在列设计(1列、2列或3列)中有所不同。
目前有七个组件可在营销活动模板中使用。 这些组件都基于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 |
这些组件针对邮件内容进行了优化;也就是说,他们遵循本文档中概述的最佳实践。 使用其他现成的组件通常会违反这些规则。
Adobe Campaign组件中对这些组件进行了详细描述。