Este documento descreve algumas das práticas recomendadas para design de email, resultando em um modelo de campanha de email bem desenvolvido.
A campanha de demonstração disponível no AEM segue todas essas práticas recomendadas. A forma como as práticas recomendadas são implementadas na campanha de demonstração é descrita para cada prática recomendada.
Use essas práticas recomendadas ao criar seu próprio 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 a estrutura da campanha planejada for 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. Caso contrário, não será possível selecionar o modelo do Adobe Campaign em Propriedades da página de Experience Manager (campo desativado).
Componente de modelo/página template-page-component
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 o css.
As tabelas são usadas em todo o modelo para estruturar conteúdo. Atualmente usando um máximo de quatro tabelas aninhadas (1 tabela base + máx. 3 níveis de aninhamento)
<div> as tags são usadas apenas no modo de criação para garantir a edição adequada de componentes.
Use atributos de elemento (como preenchimento de célula, valência e largura) para definir dimensões de tabela. Esse método força uma estrutura de modelo de caixa.
Todas as tabelas contêm atributos necessários como borda, preenchimento celular, 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" definido.
Conte com facilidade de locomoção, se possível. Use consultas de mídia para aumentar o tamanho do texto em telas pequenas e fornecer áreas de ocorrência no tamanho de miniatura para links.
Tornar um email responsivo se o design permitir.
Na medida em que os estilos CSS estão sendo usados para ilustrar o design de demonstração, as consultas de mídia estão sendo usadas para oferecer uma versão móvel amigável.
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 informativo, apenas algumas definições de CSS foram incorporadas.
Os estilos base e as variações de modelo foram extraídos para um bloco de estilos no <head> da página. No envio final do informativo, essas definições de CSS são embutidas no HTML. Um mecanismo integrado automático está planejado, mas não está disponível no momento.
Mantenha seu CSS simples. Evite declarações de estilo composto, código abreviado, propriedades de layout CSS, seletores complexos e pseudoelementos.
Na medida em que os estilos CSS estão sendo usados para ilustrar o design de demonstração, as recomendações de CSS estão sendo seguidas.
Os emails devem ter no máximo 600-800 pixels de largura. Esse dimensionamento faz com que eles se comportem melhor dentro do tamanho do painel de visualização fornecido por muitos clientes.
A variável largura da tabela de conteúdo é limitada a 600 pixels no design de demonstração.
Imagens images
/libs/mcm/campaign/components/image
Prática recomendada
Implementação
Adicionar alt atributos para imagens
A variável alt o atributo foi definido como obrigatório para o componente de imagem.
Uso jpg em vez de png formato para imagens
As imagens são sempre servidas como JPG pelo componente de imagem.
Uso <img> elemento em vez de imagens de fundo em uma tabela.
Nenhum dado de imagem de fundo é usado nos modelos.
Adicione o atributo style="display block" nas imagens. Isso permite que eles sejam bem exibidos no Gmail.
Todas as imagens contêm, por padrão, o style="display block" atributo.
Usar html em vez de estilo em CSS (família de fontes)
O RichTextEditor (por exemplo, no componente de imagem de texto) agora é compatível com a escolha e a aplicação de famílias de fontes e tamanhos de fontes a textos selecionados. Eles são renderizados como tags.
Usar fontes básicas em várias plataformas, como Arial®, Verdana, Geórgia, e Times New Roman®.
Depende do design do informativo.
Para o design da demonstração, a fonte "Helvetica®" é usada, mas retorna para uma 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.
Código validado. Somente para Doctype de transição XHTML, o atributo xmlns ausente para o <html> elemento ausente.
Evite usar JavaScript ou Flash - essas tecnologias geralmente não são compatíveis com clientes de email.
O JavaScript ou Flash não é usado no modelo do informativo.
Adicione uma versão de texto sem formatação para envio de várias partes.
Um novo widget foi incorporado às propriedades da página para extrair facilmente uma versão de texto simples do conteúdo da página. Você pode usá-lo como ponto de partida para a versão final do texto sem formatação.
Modelos e exemplos do informativo da campanha campaign-newsletter-templates-and-examples
O AEM vem com vários modelos e componentes prontos para uso para você criar informativos da campanha. Você pode usar esses modelos e componentes para criar 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 prontos para uso. Você pode usar facilmente esses três tipos para criar um informativo personalizado.
Todos têm um cabeçalho, um rodapé, e uma corpo seção. Abaixo da seção do corpo, cada modelo difere em design da coluna (uma, duas ou três 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 o conteúdo de e-mail; ou seja, seguem as práticas recomendadas descritas neste documento. O uso de outros componentes prontos para uso geralmente viola essas regras.