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 uma página master do tipo cq/personalization/components/ambitpage.
Por exemplo, se a estrutura da campanha planejada for algo como
Ao criar um modelo de email para o Adobe Campaign, você deve incluir a propriedade acMapping com o valor mapRecipient no nó jcr:content do modelo. Caso contrário, você não poderá selecionar o modelo Adobe Campaign em Propriedades da página de Experience Manager (o campo está desabilitado).
Componente de modelo/página template-page-component
Codifique toda a estrutura usando o elemento <table>element. 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)
As tags <div> são usadas apenas no modo de autor 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 de célula, espaçamento de célula 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.
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 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 atributos de alt a imagens
O atributo alt foi definido como obrigatório para o componente de imagem.
Use o formato jpg em vez do png para imagens
As imagens são sempre servidas como JPG pelo componente de imagem.
Usar elemento <img> em vez de imagens de plano 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 atributo style="display block".
Use html <font> em vez de style no CSS (font-family)
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 <font>.
Use fontes básicas em várias plataformas, como Arial®, Verdana, Georgia 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 elemento <html> está ausente.
Evite usar o JavaScript ou o Flash - essas tecnologias geralmente não são compatíveis com os clientes de email.
O JavaScript ou o Flash não é usado no modelo de boletim 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 uma seção cabeçalho, um rodapé e uma seção corpo. Abaixo da seção do corpo, cada modelo difere no design de 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.
