AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.
En este documento se describen algunas de las prácticas recomendadas relacionadas con el diseño de 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. Para cada práctica recomendada se describe cómo se implementan las prácticas recomendadas en la campaña de demostración.
Siga estas prácticas recomendadas al crear su propio boletín informativo.
NOTE
Todo el contenido de la campaña debe crearse en una master página de tipo cq/personalization/components/ambitpage. Por ejemplo, si está planeando una estructura de campaña, algo así como:
Al crear una plantilla de correo para Adobe Campaign, debe incluir la propiedad acMapping con el valor mapRecipient en el jcr:content de la plantilla, o no podrá seleccionar la plantilla Adobe Campaign en Propiedades de página de AEM (el campo está deshabilitado).
Componente de plantilla/página template-page-component
Codifique todas las estructuras utilizando la variable <table>elemento. Para diseños más complicados, debe anidar tablas para crear estructuras complejas.
El correo electrónico debería tener un aspecto adecuado 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)
<div> las etiquetas solo se utilizan en el modo de autor para garantizar la correcta edición de los componentes.
Utilice atributos de elemento (como el relleno de celdas, la validación y la anchura) para establecer las dimensiones de la tabla. Esto fuerza una estructura de modelo de caja.
Todas las tablas contienen atributos necesarios como borde, cellpadding, espaciado de celdas y width.
Para armonizar la colocación de elementos dentro de las tablas, todas las celdas de la tabla tienen el atributo valign="top" que se está configurando.
Tenga en cuenta la facilidad de uso del móvil, si es posible. 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 la medida en que se utilizan estilos CSS 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 poner toda la CSS al principio.
Para demostrar mejor la estructura del HTML subyacente y facilitar la posibilidad de personalizar la estructura del boletín, solo se han resaltado algunas definiciones de CSS.
Los estilos base y las variaciones de plantilla se han extraído a un bloque de estilos en la variable <head> de la página. En el envío final del boletín, estas definiciones de CSS deben incluirse en el HTML. Está previsto un mecanismo automático de inlineado, pero actualmente no está disponible.
Mantenga su CSS simple. 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 correos electrónicos deben tener una anchura máxima de 600-800 píxeles. Esto les hará comportarse mejor dentro del tamaño del panel de vista previa proporcionado por muchos clientes.
La variable width de la tabla de contenido está limitada a 600 px en el diseño de demostración.
Imágenes images
/libs/mcm/campaign/components/image
Práctica recomendada
Implementación
Agregar alt atributos a imágenes
La variable alt 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 servirá como JPG las imágenes.
Uso <img> en lugar de imágenes de fondo en una tabla.
En las plantillas no se utilizan datos de imagen de fondo.
Añada attribute style="display block" en imágenes. Permite mostrar bien en Gmail.
Todas las imágenes contienen de forma predeterminada la variable style="display block" atributo.
Utilizar html en lugar de estilo en CSS (font-family)
RichTextEditor (por ejemplo, en el componente textimage) ahora admite la selección y aplicación de familias de fuentes y tamaños de fuente a textos seleccionados. Se procesará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 demostración se utiliza la fuente "Helvetica", pero regresará a la fuente genérica sans-serif, si no está presente.
Genérica generic
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 validó el código. Para el tipo de documento de transición XHTML solo falta el atributo xmlns para la variable <html> falta el elemento .
No se preocupe por JavaScript o Flash: estos métodos no son compatibles con los clientes de correo electrónico.
Ni JavaScript ni el Flash se usan en la plantilla del boletín informativo.
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 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 boletines informativos de Campaign campaign-newsletter-templates-and-examples
AEM viene con varias plantillas y componentes listos para usar para crear boletines de campaña. Puede utilizar estas plantillas y componentes para crear boletines informativos personalizados.
Plantillas templates
Para ofrecer una base sólida y ampliar la variedad de posibilidades de flujo de contenido, hay tres tipos de plantilla disponibles de forma predeterminada. Puede utilizarlos fácilmente para crear un boletín personalizado.
Todos tienen un header, pie de página y body para obtener más información. Debajo de la sección del cuerpo, cada plantilla difiere en diseño de columna (1, 2 o 3 columnas).
Plantilla de imagen de Dynamic Media Classic (anteriormente Scene7)
/libs/mcm/campaign/s7image
Referencia de destino
/libs/mcm/campaign/components/reference
NOTE
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 normalmente infringirá estas reglas.
