Práticas recomendadas para modelos de email best-practices-for-email-templates

CAUTION
Este artigo se aplica aos componentes de email obsoletos do Foundation com base em AEM.
Os usuários são incentivados a usar os Componentes principais de email.

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
/content/campaigns/teasers/en/campaign-promotion-global
Verifique se ele reside em uma página master
/content/campaigns/teasers/master/en/campaign-promotion-global
NOTE
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

/libs/mcm/campaign/components/campaign_newsletterpage

Prática recomendada
Implementação

Especifique o tipo de documento para garantir uma renderização consistente.

Adicionar DOCTYPE no início (HTML ou XHTML)

É configurável por design alterando a propriedade cq:doctype em "/etc/designs/default/jcr:content/campaign_newsletterpage"

O padrão é "XHTML":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Pode ser alterado para "HTML_5":

<!DOCTYPE HTML>

Especifique a definição de caractere para garantir a renderização correta de caracteres especiais.

Adicione a declaração CHARSET (por exemplo, iso-8859-15, UTF-8) a <head>

Está definido como UTF-8.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

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".

/libs/mcm/campaign/components/header, /libs/mcm/campaign/components/textimage

Prática recomendada
Implementação
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).

Variantes de informativos possíveis

Componentes components

Atualmente, há sete componentes disponíveis para uso nos modelos de campanha. Todos esses componentes são baseados na linguagem de marcação Adobe HTL.

Nome do componente
Caminho do componente
Cabeçalho
/libs/mcm/campaign/components/header
Imagem
/libs/mcm/campaign/components/image
Text&Personalization
/libs/mcm/campaign/components/personalization
Textimage
/libs/mcm/campaign/components/textimage
Link
/libs/mcm/campaign/components/reference
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.

Estes componentes são descritos em detalhes em Adobe Campaign components.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2