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 página de master 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 nodo jcr:content de la plantilla. Si no lo hace, no podrá seleccionar la plantilla Adobe Campaign en Propiedades de página del Experience Manager (el campo está deshabilitado).
Componente de plantilla/página template-page-component
Codifique toda la estructura utilizando 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 utiliza 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 la correcta edición 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 border, cellpadding, cellspacing y width.
Para armonizar la colocación de elementos dentro de las tablas, todas las celdas de la tabla tienen establecido el atributo valign="top".
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 el <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.
La anchura de la tabla de contenido está limitada a 600 píxeles en el diseño de demostración.
Imágenes images
/libs/mcm/campaign/components/image
Prácticas recomendadas
Implementación
Agregar atributos alt a imágenes
El atributo alt se ha definido como obligatorio para el componente de imagen.
Usar jpg en lugar del formato png para imágenes
El componente de imagen siempre sirve como JPG a las imágenes.
Utilice el elemento <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 atributo style="display block".
Utilice html <font> 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 representan como etiquetas <font>.
Utilice fuentes básicas en varias 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ácticas recomendadas
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 transitorio XHTML, falta el atributo xmlns que falta para el elemento <html>.
Evite utilizar JavaScript o Flash: los clientes de correo electrónico suelen no admitir estas tecnologías.
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 una sección header, footer y body. 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.
