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 é definido e personalizado, você pode 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 configurações importantes durante o processo de criação e exibe alertas para avisos (recomendações e práticas recomendadas) e erros (problemas impeditivos que inviabilizam testes ou a ativação). Saiba mais sobre alertas por 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
-
Finalmente, você pode exportar seu conteúdo para validação ou 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 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 apresenta várias peculiaridades de renderização que podem afetar o layout do email se não forem levadas em conta 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 de estilo 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.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to design email content in the Email Designer — building from scratch, code, or imported HTML — verify it with automated content checks and content quality validation, export it, and follow rendering best practices and client-specific limitations.
Intents:
- Choose how to design an email: from scratch, code/paste raw HTML, import existing HTML, convert image designs to HTML, or select an existing content template
- Verify email content with automated content checks before sending
- Validate content quality for readability, cohesiveness, and effectiveness
- Export email content as a zip file containing HTML and assets
- Apply email design best practices to keep emails rendering well across clients
- Account for mobile web browser and Outlook rendering limitations
Glossary:
- Email Designer: The Journey Optimizer interface used to import content or build responsive emails from scratch, code, or imported HTML (product-specific)
- Automated content checks: A check that catches HTML and CSS issues — such as unsupported tags, empty divs, and size limit violations — directly in the authoring panel, before sending (product-specific)
- Content quality validation: A validation that identifies potential issues with readability, content cohesiveness, and effectiveness (product-specific)
- Image to HTML converter: An AI-powered converter that transforms static image designs into editable email templates (product-specific)
- Export HTML: An action that saves a zip file to your computer including your HTML and assets (product-specific)
Guardrails:
- Recommended template widths are between 600px and 800px (recommended).
- Recommended practices: static, table-based layouts; HTML tables and nested tables; simple, inline CSS; web-safe fonts.
- Use with care (may not render everywhere): background images, custom web fonts, wide layouts, image maps, and embedded CSS (embedded CSS is sometimes removed during email delivery).
- Not recommended (generally unsupported in email): JavaScript,
<iframe>tags, Flash, embedded audio, embedded video, forms, and<div>layering. - Alerts distinguish warnings (recommendations and best practices) from errors (blocking issues that prevent testing or activation).
- Mobile web rendering differences occur only in Gmail Web and Outlook Web when accessed via a mobile browser; Gmail/Outlook native mobile apps and all desktop clients are not affected.
- Outlook rendering: use even numbers for padding, font sizes, and widths; set table widths in pixels not percentages; set image widths using the
widthattribute; include Alt text on all images; apply borders to<td>not<table>; avoidborder-radius(rounded corners).
Terminology:
- Canonical name: Email Designer — Acronym: n/a — variants: message editor, email design capabilities
- Synonyms: “automated content checks” = “content check”
- Do not confuse: “automated content checks” (HTML/CSS issue detection) ≠ “content quality validation” (readability, cohesiveness, effectiveness)
- Do not confuse: “warnings” (recommendations and best practices) ≠ “errors” (blocking issues that prevent testing or activation)
FAQ:
- Q: What options are available for designing an email? — Design from scratch, code or paste raw HTML, import existing HTML from a file or .zip, convert image designs to HTML templates, or select an existing built-in or custom template.
- Q: How can I catch HTML and CSS issues before sending? — Use automated content checks, which flag unsupported tags, empty divs, and size limit violations in the authoring panel.
- Q: What template width is recommended? — Between 600px and 800px.
- Q: Why does my email look different in Gmail or Outlook on a phone browser? — This is a known limitation of Gmail Web and Outlook Web via a mobile browser; use simple table-based layouts with fully inlined CSS and avoid relying on media queries or
<style>blocks for critical layout. - Q: How do I export my content? — Click Export HTML to save a zip file containing your HTML and assets to your computer.