AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.
Este documento descreve algumas das práticas recomendadas em relação ao design de email, resultando em um template de campanha de email bem desenvolvido.
A campanha de demonstração disponível no AEM segue todas essas práticas recomendadas. Como as práticas recomendadas são implementadas na campanha de demonstração é descrito para cada prática recomendada.
Use essas práticas recomendadas ao criar seu próprio boletim informativo.
NOTE
Todo o conteúdo da campanha deve ser criado em um master página do tipo cq/personalization/components/ambitpage. Por exemplo, se você estiver planejando uma estrutura de campanha é algo como:
Ao criar um template de email para o Adobe Campaign, você deve incluir a propriedade acMapping com o valor mapRecipient no jcr:content do modelo, ou você não poderá selecionar o modelo do Adobe Campaign em Propriedades da página de AEM (o campo está desativado).
Codifique toda a estrutura usando o <table>elemento. Para layouts mais complicados, você deve aninhar tabelas para criar estruturas complexas.
O email deve ficar bom mesmo sem css.
Tabelas são usadas em todo o modelo para estruturar conteúdo. Atualmente usando no máximo quatro tabelas aninhadas (1 tabela base + máx. 3 níveis de aninhamento)
<div> tags são usadas somente no modo de criação para garantir a edição adequada do componente.
Use atributos de elemento (como preenchimento de celular, valência e largura) para definir dimensões de tabela. Isso força uma estrutura de modelo de caixa.
Todas as tabelas contêm atributos necessários, como border, alvéolo, espaçamento entre células e largura.
Para harmonizar o posicionamento de elementos dentro de tabelas, todas as células da tabela têm o atributo valign="top" sendo definido.
Se possível, considere a acessibilidade dos dispositivos móveis. Use consultas de mídia para aumentar os tamanhos do texto em telas pequenas e fornecer áreas de ocorrência de tamanho em miniatura para links.
Torne um email responsivo se o design permitir.
No que diz respeito aos estilos de CSS usados para ilustrar o design da demonstração, as consultas de mídia estão sendo usadas para oferecer uma versão compatível com dispositivos móveis.
O CSS em linha é melhor do que colocar todo o CSS no início.
Para demonstrar melhor a estrutura de HTML subjacente e facilitar a possibilidade de personalizar a estrutura do boletim informativo, apenas algumas definições de CSS foram incorporadas.
Os estilos básicos e as variações do modelo foram extraídos para um bloco de estilos no <head> da página. No envio final do boletim informativo, essas definições de CSS devem ser incluídas no HTML. Prevê-se um mecanismo automático de interligação, mas atualmente não está disponível.
Mantenha seu CSS simples. Evite declarações de estilo composto, código abreviado, propriedades de layout CSS, seletores complexos e pseudo-elementos.
No que diz respeito aos estilos de CSS usados para ilustrar o design da demonstração, as recomendações de CSS estão sendo seguidas.
Os emails devem ter de 600 a 800 pixels de largura máxima. Isso fará com que se comportem melhor dentro do tamanho do painel de visualização fornecido por muitos clientes.
O largura da tabela de conteúdo é limitada a 600px no design de demonstração.
Imagens images
/libs/mcm/campaign/components/image
Prática recomendada
Implementação
Adicionar alt atributos para imagens
O alt foi definido como obrigatório para o componente de imagem.
Use jpg em vez de png formato para imagens
As imagens sempre serão exibidas como JPG pelo componente de imagem.
Use <img> em vez de imagens de plano de fundo em uma tabela.
Nenhum dado de imagem de plano de fundo é usado nos modelos.
Adicione o atributo style="display block" nas imagens. Permite exibir bem no Gmail.
Todas as imagens contêm, por padrão, a variável style="display block" atributo.
Use html em vez de estilo em CSS (família de fontes)
O RichTextEditor (por exemplo, no componente textimage) agora é compatível com a escolha e aplicação de famílias de fontes e tamanhos de fonte a textos selecionados. Eles serão renderizados como tags.
Use fontes básicas e em várias plataformas, como Arial, Verdana, Geórgia e Times New Roman.
Depende do design do boletim informativo.
Para o design da demonstração, a fonte "Helvetica" é usada, mas voltará para a fonte sans-serif genérica, se não estiver presente.
Genérico generic
Prática recomendada
Implementação
Use o validador W3C para corrigir o código HTML. Certifique-se de que todas as tags abertas estejam fechadas corretamente.
O código foi validado. Para o XHTML transition Doctype somente o atributo xmlns ausente para o <html> elemento ausente.
Não se incomode com JavaScript ou Flash - essas tecnologias não são amplamente suportadas pelos clientes de email.
Nem o JavaScript nem o Flash são usados no modelo do informativo.
Adicione uma versão de texto simples para envio de várias partes.
Um novo widget foi criado nas propriedades da página para extrair facilmente uma versão de texto simples do conteúdo da página. Isso pode ser usado como ponto de partida para a versão final de texto simples.
Templates e exemplos de informativo do Campaign campaign-newsletter-templates-and-examples
AEM vem com vários modelos e componentes prontos para você criar boletins informativos do Campaign. Você pode usar esses modelos e componentes para criar seus boletins informativos personalizados.
Modelos templates
Para oferecer uma base sólida e ampliar a variedade de possibilidades de fluxo de conteúdo, há três tipos de modelo ligeiramente diferentes disponíveis imediatamente. Você pode usá-los facilmente para criar um boletim informativo personalizado.
Todos têm um header, a rodapé e corpo seção. Abaixo da seção de corpo, cada modelo difere em design de coluna (1, 2 ou 3 colunas).
Modelo de imagem do Dynamic Media Classic (antigo Scene7)
/libs/mcm/campaign/s7image
Referência direcionada
/libs/mcm/campaign/components/reference
NOTE
Esses componentes são otimizados para conteúdo de email; ou seja, seguem as práticas recomendadas descritas neste documento. O uso de outros componentes prontos para uso geralmente viola essas regras.
