Nesta página: saiba como projetar seu conteúdo de email no Designer de email, as principais etapas para criá-lo do zero, codificar ou importar o HTML e as práticas recomendadas que mantêm seus emails renderizados entre clientes.
Para acessar o Designer de email e começar a criar o conteúdo do email, primeiro crie um email em uma jornada ou campanha.
É possível então usar os recursos de design de email do Journey Optimizer para importar conteúdo existente ou começar a criar emails responsivos do zero. Saiba mais
O Designer de email também permite:
-
Aproveitar o Adobe Experience Manager Assets Essentials para enriquecer seus emails e criar e gerenciar seu próprio banco de dados de ativos. Saiba mais
-
Encontrar fotos do Adobe Stock para criar seu conteúdo e melhorar o design de emails. Saiba mais
-
Melhore a experiência dos clientes criando mensagens personalizadas e dinâmicas com base em seus atributos de perfil. Saiba mais sobre personalização e conteúdo dinâmico.
➡️ Conheça este recurso no vídeo
Etapas principais para criar conteúdo de email key-steps
Após criar um email, é possível começar a projetar o conteúdo de email.
-
Na tela de configuração da jornada ou campanha, vá até a tela Editar conteúdo para acessar o Designer de email. Saiba mais
-
Na página inicial do Designer de email, escolha uma das seguintes opções para criar o design do email:
-
Projete seu email do zero através da interface do Designer de email e aproveite as imagens do Adobe Experience Manager Assets. Saiba como criar o design do conteúdo de email nesta seção.
-
Codifique ou cole um HTML bruto diretamente no Designer de email. Saiba como codificar seu próprio conteúdo nesta seção.
note NOTE Em uma campanha, você também pode selecionar o botão Editor de código da tela Editar conteúdo. Saiba mais -
Importar conteúdo HTML existente de um arquivo ou uma pasta .zip. Saiba como importar um conteúdo de email nesta seção.
-
Converter designs de imagem em modelos HTML usando o conversor de imagem para HTML viabilizado por IA. Saiba como transformar imagens estáticas em modelos de email editáveis nesta seção.
-
Selecionar um conteúdo existente de uma lista de modelos integrados ou personalizados. Saiba como trabalhar com modelos de email nesta seção.
-
-
Depois que o conteúdo de email for definido e personalizado, você poderá verificar seu conteúdo de email com as verificações automatizadas de conteúdo para capturar problemas de HTML e CSS — como tags não compatíveis, divs vazias e violações de limite de tamanho — diretamente no painel de criação, antes de enviar. Saiba mais
note NOTE O sistema também verifica as principais configurações conforme você cria e exibe alertas de avisos (recomendações e práticas recomendadas) e erros (bloqueando problemas que impedem teste ou ativação). Saiba mais sobre alertas de email 
-
Você também pode validar a qualidade do conteúdo para identificar possíveis problemas de legibilidade, coesão do conteúdo e eficácia. Saiba mais sobre validação da qualidade do conteúdo
-
Por fim, você pode exportar seu conteúdo para validação ou para uso posterior. Clique em Exportar HTML para salvar em seu computador um arquivo zip que contém o HTML e os ativos.
Práticas recomendadas de design de email best-practices
Ao enviar emails, é importante levar em consideração que os destinatários podem encaminhá-los, o que às vezes pode causar problemas na renderização do email. Isso acontece especialmente ao usar classes CSS que podem não ser compatíveis com o provedor de email usado para encaminhamento. Por exemplo, se estiver usando a classe CSS “is-desktop-hidden” para ocultar uma imagem em dispositivos móveis.
Para minimizar esses problemas de renderização, é recomendado manter a estrutura do design de emails o mais simples possível. Tente usar um único design que funcione bem tanto para desktops quanto para dispositivos móveis e evite usar classes CSS complexas ou outros elementos de design que possam não ser totalmente compatíveis com todos os clientes de email.
Ao seguir essas práticas recomendadas, você ajuda a garantir que seus emails sejam renderizados corretamente de forma consistente, independentemente de como sejam visualizados ou encaminhados pelos destinatários.
Consulte na tabela abaixo as práticas recomendadas de design de emails:
- Layouts estáticos baseados em tabela para a estrutura
- Tabelas em HTML e tabelas aninhadas para consistência do layout
- Larguras do modelo entre 600 px e 800 px
- CSS simples e em linha para o estilo
- Fontes seguras para a web para compatibilidade universal
- Imagens de fundo podem não aparecer em certas plataformas de email.
- Fontes da web personalizadas não têm compatibilidade universal.
- Layouts largos podem ser exibidos incorretamente em telas menores.
- Os mapas de imagem oferecem funcionalidade limitada.
- O CSS incorporado às vezes é removido durante a entrega do email.
- Geralmente, o JavaScript não é compatível com ambientes de email.
- Tags
<iframe>estão bloqueadas na maioria das plataformas. - O Flash está obsoleto e não é mais compatível.
- Áudios integrados muitas vezes não podem ser reproduzidos.
- Vídeos integrados são incompatíveis com várias plataformas de email.
- Formulários não funcionam nos emails.
- A disposição em camadas de
<div>pode causar problemas de renderização.
Medidas de proteção e limitações específicas email-guardrails
Mesmo emails bem estruturados podem ser renderizados de forma diferente dependendo do cliente ou do ambiente em que são abertos. As seções abaixo documentam as limitações conhecidas e os comportamentos específicos do cliente que devem ser considerados ao criar seus emails.
Limitações do navegador web para dispositivos móveis mobile-web-limitations
A renderização de email pode ser diferente quando os destinatários abrem o Gmail ou o Outlook por meio de um navegador da Web móvel (por exemplo, Chrome em um telefone), em vez de usar um aplicativo móvel nativo ou cliente de desktop. Essa é uma limitação conhecida dos ambientes de webmail móvel e não é específica do Journey Optimizer.
Essa diferença de renderização vem de como os clientes de webmail se comportam dentro de um navegador móvel. O navegador renderiza a interface do usuário do webmail de desktop completa primeiro, colocando o email em duas camadas, além do alcance de qualquer CSS responsivo ou consulta de mídia. O Gmail Web também desmonta blocos CSS <style> e envolve conteúdo de email em seu próprio <div>, o que pode substituir seus estilos e criar conflitos de alinhamento.
Os sintomas típicos incluem deslocamento de alinhamento de texto (texto alinhado à esquerda que aparece centralizado), linhas separadoras brancas extras entre seções de conteúdo e um layout geral que difere do design do modelo.
Esses problemas só ocorrem no Gmail Web e no Outlook Web quando acessados por um navegador móvel. Os aplicativos móveis nativos do Outlook e do Gmail, bem como todos os clientes de desktop, não são afetados.
-
Use layouts simples baseados em tabela com CSS totalmente incorporado.
-
Evite depender de consultas de mídia ou blocos
<style>para propriedades críticas de layout, como alinhamento de texto.
Considerações de renderização do Outlook outlook-tips
O Outlook tem vários caprichos de renderização que podem afetar seu layout de email se não forem considerados durante o design. Para ajudar a garantir que seus emails sejam renderizados corretamente no Outlook, siga estas práticas recomendadas:
- Use números pares para preenchimento, tamanhos de fonte e larguras. O Outlook converte pixels em pontos internamente, o que pode introduzir espaçamento desigual e linhas brancas indesejadas quando números ímpares são usados.
- Defina as larguras da tabela em pixels, não em porcentagens. Larguras baseadas em porcentagem podem quebrar o layout no Outlook. Aplique valores de largura diretamente no atributo style de cada tabela.
- Sempre defina larguras de imagem usando o atributo
width. O Outlook ignora as propriedades de CSSwidtheheightnas imagens e retorna às dimensões nativas do arquivo se nenhum atributo HTML estiver presente. - Incluir texto alternativo em todas as imagens. Isso evita problemas de exibição e segurança quando imagens são bloqueadas.
- Aplique bordas às células da tabela, não ao próprio elemento da tabela. Se uma borda não estiver renderizando como esperado, mova-a de
<table>para<td>. - Evite cantos arredondados. O CSS
border-radiusnão tem suporte confiável no Outlook — cantos quadrados são o padrão seguro.
Para considerações sobre design no modo escuro, incluindo como usar consultas de mídia e técnicas de troca de imagem específicas do Outlook.com, consulte esta página.
Vídeos tutoriais video
Saiba como criar conteúdo de email com o editor de mensagens.
Saiba como configurar experimentos de conteúdo para testes A/B e explorar o conteúdo de email que melhor impulsiona seus objetivos de negócios.