Prácticas recomendadas para plantillas de correo electrónico

PRECAUCIÓN

AEM Los componentes de correo electrónico de la se han desaprobado. AEM Debido a la naturaleza del correo electrónico, que combina contenido y estilo, los componentes de correo electrónico proporcionados de forma predeterminada se convierten en de reutilización limitada para los clientes debido a la necesidad de implementar estilos personalizados en los componentes que sean necesarios para los proyectos.

AEM Los componentes de correo electrónico se pueden implementar en el nivel de proyecto, y los componentes de correo electrónico de la obsoleta ilustran cómo se puede lograr. Sin embargo, estos componentes obsoletos no deben utilizarse en proyectos.

Este documento describe algunas de las prácticas recomendadas en cuanto al diseño de correos electrónicos, lo que da como resultado una plantilla de campaña de correo electrónico bien desarrollada.

AEM La campaña de demostración disponible en la sección de la documentación de sigue todas estas prácticas recomendadas de administración de segmentos de mercado. Se describe cómo se implementan las prácticas recomendadas en la campaña de demostración para cada práctica recomendada.

Siga estas prácticas recomendadas al crear su propia newsletter.

NOTA

Todo el contenido de la campaña debe crearse en una master página de tipo cq/personalization/components/ambitpage.

Por ejemplo, si la estructura de la campaña planificada es similar a

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

Debe asegurarse de que reside en una master página

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

NOTA

Al crear una plantilla de correo electrónico para Adobe Campaign, debe incluir la propiedad acMapping con el valor mapRecipient en el jcr:contenido de la plantilla, o bien no podrá seleccionar la plantilla de Adobe Campaign en Propiedades de página AEM de (el campo está desactivado).

Componente de plantilla/página

/libs/mcm/campaign/components/campaign_newsletterpage

Práctica recomendada Implementación

Especifique el tipo de documento para garantizar una representación coherente.

Agregar DOCTYPE al principio (HTML o XHTML)

Es configurable por el diseño cambiando el cq:doctype propiedad en"/etc/designs/default/jcr:content/campaign_newsletterpage"

El valor predeterminado es "XHTML":

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

Se puede cambiar a "HTML_5":

<!DOCTYPE HTML>

Especifique la definición de caracteres para garantizar la correcta representación de los caracteres especiales.

Agregue la declaración CHARSET (por ejemplo, iso-8859-15, UTF-8) a <head>

Se establece en UTF-8.

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

Codifique toda la estructura utilizando <table>Elemento. Para diseños más complicados, debe anidar tablas para crear estructuras complejas.

El correo electrónico debería verse bien incluso sin css.

Las tablas se utilizan en toda la plantilla para estructurar el contenido. Actualmente se utiliza un máximo de cuatro tablas anidadas (1 tabla base + máx. 3 niveles de anidación)

<div> las etiquetas solo se utilizan en el modo de autor para garantizar la edición adecuada de los componentes.

Utilice atributos de elemento (como relleno de celda, validación y anchura) para establecer las dimensiones de la tabla. Esto fuerza una estructura de modelo de cuadro.

Todas las tablas contienen atributos necesarios como borde, cellpadding, espaciado de celdas y anchura.

Para armonizar la colocación de los elementos dentro de las tablas, todas las celdas de la tabla tienen el atributo valign="top" que se está configurando.

Tenga en cuenta la compatibilidad con dispositivos móviles, si es posible. Utilice consultas de medios para aumentar el tamaño del texto en pantallas pequeñas y proporcione áreas de visita en miniatura para los vínculos.

Hacer que un correo electrónico sea adaptable si el diseño lo permite.

En la medida en que los estilos CSS se utilizan para ilustrar el diseño de demostración, las consultas de medios se utilizan para ofrecer una versión compatible con dispositivos móviles.
CSS en línea es mejor que colocar todo el CSS al principio.

Para mostrar mejor la estructura del HTML subyacente y facilitar la posibilidad de personalizar la estructura del boletín informativo, solo se han insertado algunas definiciones CSS.

Los estilos base y las variaciones de plantilla se han extraído a un bloque de estilo en la <head> de la página. Al enviar la newsletter final, estas definiciones de CSS deben insertarse en el HTML. Se ha planificado un mecanismo automático de alineamiento, pero actualmente no está disponible.

Simplifique el código CSS. Evite las declaraciones de estilos compuestos, el código abreviado, las propiedades de diseño CSS, los selectores complejos y los pseudoelementos. En cuanto a los estilos CSS que se utilizan para ilustrar el diseño de demostración, se siguen las recomendaciones CSS.
Los correos electrónicos deben tener una anchura máxima de 600-800 píxeles. Esto hará que se comporten mejor dentro del tamaño del panel de vista previa proporcionado por muchos clientes. El anchura El número de tablas de contenido está limitado a 600 píxeles en el diseño de demostración.

Imágenes

/libs/mcm/campaign/components/image

Práctica recomendada Implementación
Añadir alt atributos a imágenes El alt El atributo se ha definido como obligatorio para el componente de imagen.
Uso jpg en lugar de png formato para imágenes El componente de imagen siempre actuará como JPG.
Uso <img> en lugar de imágenes de fondo en una tabla. No se utilizan datos de imagen de fondo en las plantillas.
Añadir el atributo style="display block" en las imágenes. Permite mostrar bien en Gmail. Todas las imágenes contienen de forma predeterminada el style="bloque de visualización" atributo.

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

Práctica recomendada Implementación
Utilice html en lugar de estilo en CSS (familia de fuentes) Ahora, RichTextEditor (por ejemplo, en el componente textimage) admite la selección y aplicación de familias de fuentes y tamaños de fuente a textos seleccionados. Se representarán como etiquetas.
Utilice fuentes básicas entre plataformas, como Arial, Verdana, Georgia y Times New Roman.

Depende del diseño de la newsletter.

Para el diseño de la demostración se utiliza la fuente "Helvetica", pero volverá a la fuente genérica sans-serif, si no está presente.

Genérica

Práctica recomendada Implementación
Utilice el validador W3C para corregir el código del HTML. Asegúrese de que todas las etiquetas abiertas estén correctamente cerradas. Se ha validado el código. Para el documento transitorio de XHTML, escriba solo el atributo xmlns que falta para <html> falta el elemento.
No se moleste en utilizar JavaScript o Flash, ya que estas tecnologías no son compatibles con los clientes de correo electrónico. En la plantilla de la newsletter no se utiliza ni JavaScript ni Flash.
Añada una versión de texto sin formato para el envío de varias partes. Se ha incorporado un nuevo widget en las propiedades de la página para extraer fácilmente una versión de texto sin formato del contenido de la página. Esto puede utilizarse como punto de partida para la versión final de texto sin formato.

Plantillas y ejemplos de newsletter de Campaign

AEM viene con varias plantillas y componentes listos para usar para que cree boletines de campaña. Puede utilizar estas plantillas y componentes para crear sus boletines personalizados.

Plantillas

Para ofrecer una base sólida y ampliar la variedad de posibilidades de flujo de contenido, hay tres tipos de plantillas ligeramente diferentes disponibles de forma predeterminada. Puede utilizarlas fácilmente para crear un boletín informativo personalizado.

Todos tienen un encabezado, a pie de página y una cuerpo sección. Debajo de la sección del cuerpo, cada plantilla difiere en diseño de columna (1, 2 o 3 columnas).

Componentes

Actualmente hay siete componentes disponibles para usar en plantillas de campaña. Todos estos componentes se basan en el lenguaje de marcado de Adobe HTL.

Nombre del componente Ruta del componente
Encabezado /libs/mcm/campaign/components/heading
Imagen /libs/mcm/campaign/components/image
Texto y personalización /libs/mcm/campaign/components/personalization
Textimage /libs/mcm/campaign/components/textimage
Vínculo /libs/mcm/campaign/components/reference
Plantilla de imagen de Dynamic Media Classic (anteriormente Scene7) /libs/mcm/campaign/s7image
Referencia de destino /libs/mcm/campaign/components/reference
NOTA

Estos componentes están optimizados para el contenido del correo; es decir, se adhieren a las prácticas recomendadas descritas en este documento. El uso de otros componentes listos para usar generalmente infringe estas reglas.

Estos componentes se describen en detalle en Componentes de Adobe Campaign.

En esta página