Práticas recomendadas para modelos de e-mail

CUIDADO

Os componentes de e-mail AEM foram descontinuados. Devido à natureza do e-mail, que une o conteúdo e o estilo, os componentes de e-mail fornecidos prontos para uso AEM tornam-se de reutilização limitada para clientes devido à necessidade de implementar estilos personalizados em quaisquer componentes necessários para projetos.

Os componentes de email podem ser implementados no nível do projeto, e os componentes de email AEM obsoletos ilustram como isso pode ser feito. No entanto, esses componentes obsoletos não devem ser usados em projetos.

Este documento descreve algumas das práticas recomendadas para o design de e-mail, resultando em um template de campanha de e-mail 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 são descritas para cada prática recomendada.

Use essas práticas recomendadas ao criar seu próprio boletim informativo.

Observação

Todo o conteúdo da campanha deve ser criado em uma página master do tipo cq/personalization/components/ambitpage.

Por exemplo, se sua estrutura de campanha planejada é algo como

/content/campaigns/teasers/en/campaign-promotion-global

Certifique-se de que ela esteja em uma página master

/content/campaigns/teasers/master/en/campaign-promotion-global

Observação

Ao criar um modelo de email para Adobe Campaign, você deve incluir a propriedade acMapping com o valor mapRecipient no nó jcr:content do modelo, ou você não poderá selecionar o modelo Adobe Campaign em Propriedades da página AEM (o campo está desativado).

Modelo/componente de página

/libs/mcm/campanha/components/campanha_newsletterpage

Práticas recomendadas Implementação

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

Adicionar DOCTYPE no início (HTML ou XHTML)

É configurável alterando o design da propriedade cq:doctype em"/etc/designs/default/jcr:content/campanha_newsletterpage?lang=pt-BR"

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.

Adicionar declaração CHARSET (ex: 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.

E-mail 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> as tags são usadas somente no modo de autor para garantir a edição adequada do componente.

Use atributos de elemento (como preenchimento de célula, valor e largura) para definir dimensões de tabela. Isso força uma estrutura de modelo de caixa.

Todas as tabelas contêm os atributos necessários, como border, cellpadding, cellspacing e width.

Para harmonizar o posicionamento do elemento dentro das tabelas, todas as células da tabela têm o atributo valign="top" sendo definido.

Se possível, considere a acessibilidade móvel. Use query de mídia para aumentar os tamanhos de texto em telas pequenas, fornecer áreas de ocorrência de tamanho mínimo para links.

Faça com que um email responda se o design permitir.

No que diz respeito aos estilos CSS usados para ilustrar o design de demonstração, os query de mídia estão sendo usados para oferta de 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 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 de 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 incorporadas no HTML. Está planejado um mecanismo automático de infiltraçã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 CSS usados para ilustrar o design de demonstração, as recomendações do CSS estão sendo seguidas.
Os emails devem ter largura máxima de 600 a 800 pixels. Isso fará com que eles se comportem melhor dentro do tamanho do painel de pré-visualização fornecido por muitos clientes. A width da tabela de conteúdo está limitada a 600px no design de demonstração.

Imagens

/libs/mcm/campanha/componentes/imagem

Prática recomendada Implementação
Adicionar atributos alt a imagens O atributo alt foi definido como obrigatório para o componente de imagem.
Use o formato jpg em vez do formato png para imagens As imagens sempre serão servidas como JPG pelo componente de imagem.
Use <img> elemento 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, o atributo style="display block".

/libs/mcm/campanha/componentes/cabeçalho, /libs/mcm/campanha/componentes/textimage

Prática recomendada Implementação
Use html <font> em vez do estilo em CSS (font-family) O RichTextEditor (por exemplo, no componente de tempo de texto) agora oferece suporte à escolha e aplicação de famílias de fontes e tamanhos de fonte a textos selecionados. Eles serão renderizados como tags <font>.
Use fontes básicas e em várias plataformas, como Arial, Verdana, Georgia e Times New Roman.

Depende do design de boletins informativos.

Para o design de demonstração, a fonte "Helvetica" é usada, mas voltará para a fonte sans-serif genérica, se não estiver presente.

Genérico

Prática recomendada Implementação
Use o validador W3C para corrigir o código HTML. Verifique se todas as tags abertas estão fechadas corretamente. O código foi validado. Apenas para o Doctype de transição XHTML o atributo xmlns ausente para o elemento <html> está ausente.
Não se incomode com JavaScript ou Flash - essas tecnologias geralmente não são suportadas pelos clientes de e-mail. Nem o JavaScript nem o Flash são usados no modelo do boletim 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.

Modelos e exemplos de newsletters da campanha

AEM vem com vários modelos e componentes prontos para uso para criar newsletters de campanha. Você pode usar esses modelos e componentes para criar seus boletins personalizados.

Modelos

Para oferta de uma base sólida e para ampliar a variedade de possibilidades de fluxo de conteúdo, há três tipos de modelo ligeiramente diferentes disponíveis na caixa. Você pode usá-los facilmente para criar um boletim informativo personalizado.

Todos têm uma seção header, footer e body. Abaixo da seção de corpo, cada modelo difere no design de coluna (1, 2 ou 3 colunas).

Componentes

Atualmente, há sete componentes disponíveis para uso em templates de campanha. Esses componentes são baseados na linguagem de marcação de Adobe HTL.

Nome do componente Caminho do componente
Cabeçalho /libs/mcm/campanha/componentes/cabeçalho
Imagem /libs/mcm/campanha/componentes/imagem
Texto e personalização /libs/mcm/campanha/componentes/personalização
Textimage /libs/mcm/campanha/componentes/textimage
Link /libs/mcm/campanha/componentes/referência
Modelo de imagem do Scene7 /libs/mcm/campanha/s7image
Referência direcionada /libs/mcm/campanha/componentes/referência
Observação

Esses componentes são otimizados para conteúdo de email; ou seja, eles seguem as práticas recomendadas descritas neste documento. O uso de outros componentes predefinidos normalmente violará essas regras.

Esses componentes são descritos detalhadamente em componentes do Adobe Campaign.

Nesta página