Show Menu
TEMAS×

Prácticas recomendadas para plantillas de correo electrónico

Los componentes de correo electrónico AEM han quedado obsoletos. Debido a la naturaleza del correo electrónico, que combina contenido y estilo, los componentes de correo electrónico proporcionados de forma predeterminada por AEM se vuelven de uso limitado para los clientes debido a la necesidad de implementar estilos personalizados en los componentes que sean necesarios para los proyectos.
Los componentes de correo electrónico se pueden implementar a nivel de proyecto y los componentes de correo electrónico AEM obsoletos ilustran cómo se puede lograr. Sin embargo, estos componentes desaprobados no deben usarse en proyectos.
Este documento describe algunas de las prácticas recomendadas en torno al diseño del correo electrónico, lo que resulta en una plantilla de campaña de correo electrónico bien desarrollada.
La campaña de demostración disponible en AEM sigue todas estas prácticas recomendadas. La forma en que se implementan las prácticas recomendadas en la campaña de demostración se describe para cada práctica recomendada.
Siga estas prácticas recomendadas para crear su propia newsletter.
Todo el contenido de campaña debe crearse en una master página de tipo cq/personalization/components/ambitpage .
Por ejemplo, si la estructura de campaña planificada es algo 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
Al crear una plantilla de correo para Adobe Campaign, debe incluir la propiedad acMapping con el valor mapRecipient en el nodo jcr:content de la plantilla o no podrá seleccionar la plantilla Adobe Campaign en Propiedades de página de AEM (el campo está deshabilitado).

Plantilla/componente de página

/libs/mcm/campaña/components/campaña_newsletterpage
Práctica recomendada Implementación
Especifique el tipo de documento para garantizar una representación coherente.
Añadir DOCTYPE al principio (HTML o XHTML)
Se puede configurar mediante diseño, cambiando la propiedad cq:doctype en "/etc/designs/default/jcr:content/campaña_newsletterpage"
El valor predeterminado es "XHTML":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES" "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 representación correcta de caracteres especiales.
Añadir la declaración CHARSET (p. ej. iso-8859-15, UTF-8) en <head>
Se establece en UTF-8.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Codifique toda la estructura mediante el elemento <table>. 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 está utilizando un máximo de cuatro tablas anidadas (1 tabla base + máx.). 3 niveles de anidación)
Las etiquetas <div> solo se utilizan en el modo de autor para garantizar una adecuada edición de componentes.
Utilice atributos de elemento (como relleno de celdas, validación y ancho) para definir las dimensiones de la tabla. Esto fuerza una estructura de modelo de caja.
Todas las tablas contienen atributos necesarios como borde , relleno de celdas, espaciado de celdas y ancho .
Para armonizar la posición del elemento dentro de las tablas, todas las celdas de la tabla tienen el atributo valign="top" definido.
Si es posible, tenga en cuenta la facilidad de uso de los dispositivos móviles. Utilice consultas de medios para aumentar el tamaño del texto en pantallas pequeñas y proporcione áreas de visita del tamaño de la miniatura para los vínculos.
Haga que un correo electrónico responda si el diseño lo permite.
En cuanto a los estilos CSS que se utilizan para ilustrar el diseño de demostración, se utilizan consultas de medios para realizar la oferta de una versión móvil compatible.
La CSS en línea es mejor que colocar toda la CSS al principio.
Para demostrar mejor la estructura HTML subyacente y facilitar la posibilidad de personalizar la estructura de la newsletter, solo se han subrayado algunas definiciones de CSS.
Los estilos base y las variaciones de plantilla se han extraído a un bloque de estilo en el <encabezado> de la página. En el envío final de la newsletter, estas definiciones de CSS deben insertarse en el HTML. Está previsto un mecanismo automático de inlineado, pero actualmente no está disponible.
Mantenga la CSS sencilla. Evite declaraciones de estilo compuestas, código abreviado, propiedades de diseño CSS, selectores complejos y pseudoelementos. En cuanto a los estilos CSS que se utilizan para ilustrar el diseño de demostración, se siguen las recomendaciones CSS.
Los mensajes de correo electrónico deben tener una anchura máxima de 600-800 píxeles. Esto hará que se comporten mejor dentro del tamaño del panel de previsualización proporcionado por muchos clientes. El ancho de la tabla de contenido está limitado a 600 px en el diseño de demostración.

Imágenes

/libs/mcm/campaña/components/image
Práctica recomendada
Implementación
Añadir atributos alt a imágenes
El atributo alt se ha definido como obligatorio para el componente de imagen.
Usar jpg en lugar de formato png para imágenes
El componente de imagen siempre servirá como JPG las imágenes.
Utilice <img> elementos en lugar de imágenes de fondo en una tabla.
No se utilizan datos de imagen de fondo en las plantillas.
Añada attribute style="display block" en imágenes. Permite mostrar bien en Gmail.
Todas las imágenes contienen de forma predeterminada el atributo style="display block" .

Genérico

Práctica recomendada
Implementación
Use el validador de W3C para corregir el código HTML. Asegúrese de que todas las etiquetas abiertas estén correctamente cerradas.
Se validó el código. En el caso de Doctype de transición XHTML, solo falta el atributo xmlns que falta para el <html> elemento.
No se preocupe por JavaScript o Flash: los clientes de correo electrónico no admiten estas tecnologías.
No se utiliza JavaScript ni Flash en la plantilla de newsletter.
Añada una versión de texto sin formato para el envío de varias partes.
Se ha incorporado una nueva utilidad en las propiedades de la página para extraer fácilmente una versión de texto sin formato del contenido de la página. Se puede utilizar como punto de partida para la versión final de texto sin formato.

Ejemplos y plantillas de newsletter de campaña

AEM incluye varias plantillas y componentes listos para usar para crear newsletters de campaña. Puede utilizar estas plantillas y componentes para crear boletines informativos personalizados.

Plantillas

Para oferta de una base sólida y ampliar la variedad de posibilidades de flujo de contenido, hay tres tipos de plantilla ligeramente diferentes disponibles de forma predeterminada. Puede utilizarlos fácilmente para crear una newsletter personalizada.
Todos tienen un encabezado , un pie de página y una sección de cuerpo . Debajo de la sección body, cada plantilla difiere en el diseño de columna (1, 2 o 3 columnas).

Componentes

Actualmente hay siete componentes disponibles para su uso dentro de plantillas de campaña . Todos estos componentes se basan en el lenguaje de marcado Adobe HTL .
Nombre del componente
Ruta del componente
Encabezado
/libs/mcm/campaña/components/heading
Imagen
/libs/mcm/campaña/components/image
Texto y personalización
/libs/mcm/campaña/components/personalization
Textimage
/libs/mcm/campaña/components/textimage
Vínculo
/libs/mcm/campaña/components/reference
Plantilla de imagen de Scene7
/libs/mcm/campaña/s7image
Referencia de objetivo
/libs/mcm/campaña/components/reference
Estos componentes están optimizados para el contenido del correo; es decir, se adhieren a las mejores prácticas descritas en este documento. El uso de otros componentes listos para usar generalmente infringe estas reglas.
Estos componentes se describen en detalle en los componentes de Adobe Campaign.