Show Menu
TÓPICOS×

Práticas recomendadas para modelos de e-mail

Este documento descreve algumas das práticas recomendadas para o design de e-mail, resultando em um modelo bem desenvolvido de campanha por e-mail.
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 você estiver planejando uma estrutura de campanha é algo como:
  • /content/campaigns/teasers/en/campaign-promotion-global
Certifique-se de que ela esteja em uma página mestre:
  • /content/campaigns/teasers/master/en/campaign-promotion-global
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, ou você não poderá selecionar o modelo do Adobe Campaign nas Propriedades da página do AEM (o campo está desativado).

Modelo/componente de página

/libs/mcm/campaign/components/campaign_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/campaign_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 consultas 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, as consultas de mídia estão sendo usadas para oferecer 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 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 visualização fornecido por muitos clientes. A largura da tabela de conteúdo é limitada a 600px no design de demonstração.

Imagens

/libs/mcm/campaign/components/image
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 não são amplamente suportadas pelos clientes de email.
Nem JavaScript nem 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 da campanha

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

Modelos

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 na caixa. Você pode usá-los facilmente para criar uma nova carta personalizada.
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 modelos de campanha. Esses componentes são baseados no idioma HTL da marcação da Adobe.
Nome do componente
Caminho do componente
Cabeçalho
/libs/mcm/campaign/components/header
Imagem
/libs/mcm/campaign/components/image
Texto e personalização
/libs/mcm/campaign/components/personalization
Textimage
/libs/mcm/campaign/components/textimage
Link
/libs/mcm/campaign/components/reference
Modelo de imagem do Scene7
/libs/mcm/campaign/s7image
Referência direcionada
/libs/mcm/campaign/components/reference
Esses componentes são otimizados para conteúdo de email; ou seja, seguem as melhores práticas descritas neste documento. O uso de outros componentes predefinidos normalmente violará essas regras.
Esses componentes são descritos em detalhes nos componentes do Adobe Campaign.