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.
NOTE
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
Al crear una plantilla de correo electrónico para Adobe Campaign, debe incluir la propiedad acMapping con el valor mapRecipient en el jcr:contenido nodo de la plantilla. Si no lo hace, no puede seleccionar la plantilla Adobe Campaign en Propiedades de página del Experience Manager (el campo está desactivado).
Componente de plantilla/página template-page-component
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. Este método 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 personalización de la estructura del boletín informativo, solo se han insertado algunas definiciones de 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 se insertan en el HTML. Se ha planificado un mecanismo de inline automático, 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. Este tamaño hace que se comporten mejor dentro del tamaño del panel de vista previa proporcionado por muchos clientes.
El anchura El tamaño de la tabla de contenido está limitado a 600 píxeles en el diseño de demostración.
Imágenes images
/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 sirve como JPG a las imágenes.
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. Al hacerlo, se muestran bien en Gmail.
Todas las imágenes contienen de forma predeterminada el style="bloque de visualización" atributo.
Utilice html en lugar de estilo en CSS (familia de fuentes)
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 representan 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 vuelve a una fuente sans-serif genérica, 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 ha validado el código. Solo para el tipo de documento XHTML transitorio, falta el atributo xmlns para el <html> falta el elemento.
Evite utilizar JavaScript o Flash: estas tecnologías suelen ser incompatibles con los clientes de correo electrónico.
JavaScript o Flash no se utilizan 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 la página para extraer fácilmente una versión de texto sin formato del contenido de la página. Puede utilizarlo como punto de partida para la versión final de texto sin formato.
Plantillas y ejemplos de newsletter de Campaign campaign-newsletter-templates-and-examples
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 templates
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 utilizar fácilmente estos tres tipos para crear un boletín informativo personalizado.
Todos tienen un encabezado, a pie de página, y a cuerpo sección. Debajo de la sección del cuerpo, cada plantilla difiere en diseño de columna (una, dos o tres 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 generalmente infringe estas reglas.
