Show Menu
TÓPICOS×

Práticas recomendadas para modelos de e-mail

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.
Todo o conteúdo da campanha deve ser criado em uma master página 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 master página
/content/campaigns/teasers/master/en/campaign-promotion-global
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 do 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"
O padrão é "XHTML":
<!DOCTYPE html PÚBLICO "-//W3C//DTD XHTML 1.0 Transição//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)
As tags <div> 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 atributos necessários como borda , preenchimento de celular, espaçamento de célula e largura .
Para harmonizar o posicionamento do elemento dentro das tabelas, todas as células da tabela têm o atributo valign="top" 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 largura da tabela de conteúdo é limitada a 600px no design de demonstração.

Imagens

/libs/mcm/campanha/componentes/imagem
Prática recomendada
Implementação
Adicionar atributos alternativos a imagens
O atributo alt foi definido como obrigatório para o componente de imagem.
Usar 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" .

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 <html> elemento 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 boletins informativos de 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 um cabeçalho , um rodapé e uma seção de corpo . Abaixo da seção body, cada modelo difere no design da coluna (1, 2 ou 3 colunas).

Componentes

Atualmente, há sete componentes disponíveis para uso dentro dos 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
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 nos componentes da Adobe Campaign.