Guia completo de boas práticas para design de e-mails (2026)

Quando se fala em campanhas de e-mail visualmente atraentes no email marketing, o conceito pode variar bastante. Alguns priorizam a estrutura, outros destacam o uso de elementos visuais e GIFs animados. Há ainda quem defenda que um bom design é aquele que funciona bem em qualquer cliente e dispositivo e, ao mesmo tempo, gera conversões. Com tantas visões diferentes, quem está começando na área costuma ficar em dúvida sobre o que realmente importa no design de e-mails.

Neste artigo, vamos explorar as melhores práticas de design de e-mails, incluindo dicas para linhas de assunto, botões de chamada para ação, adaptação para dispositivos móveis, fontes seguras para a web e outras técnicas eficazes de campanhas, com o objetivo de tornar seus e-mails mais atraentes e melhorar as taxas de conversão.  

Pontos principais 

1. O design de e-mails não se resume apenas à criação de mensagens visualmente atraentes, mas influencia todo o processo de comunicação, desde a entrega ao destinatário até a abertura e a realização da ação desejada. 
2. O assunto e o pré-cabeçalho influenciam diretamente se o destinatário vai abrir o e-mail e visualizar sua oferta. 
3. Ao utilizar uma única CTA principal em um e-mail, o destinatário foca em apenas uma ação de conversão, o que facilita o engajamento. 
4. Um modelo principal aliado a uma biblioteca de blocos modulares garante a consistência da identidade da marca, além de acelerar a produção de e-mails e evitar variações fora do padrão visual definido. 
5. Um design de e-mails otimizado para dispositivos móveis é fundamental, pois melhora a taxa de cliques e a experiência do usuário, considerando que hoje mais de metade dos e-mails é aberta em smartphones.
6. A personalização em email marketing não deve se limitar ao uso de nomes, mas sim incorporar segmentação comportamental e o uso de blocos de conteúdo dinâmico. 
7. Seguir padrões de acessibilidade como o contraste WCAG AA, o uso de textos alternativos descritivos e uma hierarquia lógica de títulos melhora a experiência de todos os usuários, não apenas daqueles que dependem de tecnologias assistivas. 

O que é design de e-mails e por que ele é tão importante? 

O design de e-mails consiste em estruturar textos, elementos visuais e interativos dentro de uma mensagem para que o usuário consiga ler, navegar e tomar ações em qualquer dispositivo ou caixa de entrada. Isso inclui aspectos como layout, tipografia, cores, imagens, posicionamento de CTAs, acessibilidade e compatibilidade entre diferentes clientes de e-mail.

O impacto em números para o negócio 

O e-mail segue como um dos canais com maior retorno sobre investimento no marketing. De acordo com o benchmark de ROI de 2026 da Omnisend, cada US$ 1 investido pode gerar entre US$ 36 e US$ 42 com destaque para setores como varejo e e-commerce. Além disso, o relatório State of Email 2025 da Litmus, publicado pela Validity, mostra que empresas que investem mais de 15% do orçamento de marketing em e-mail têm o dobro de probabilidade de alcançar taxas de abertura acima de 40%, em comparação com a média do mercado. 

Alguns dados adicionais importantes para considerar ao planejar o design da sua campanha de e-mail:

• em 2025, a taxa mediana global de abertura entre setores chegou a 43,46%, um aumento em relação aos 42,35% de 2024. Já a taxa mediana de cliques ficou em 2,09%, enquanto a taxa de clique para abertura atingiu 6,81%. Como o Mail Privacy Protection da Apple pode inflar os dados de abertura, é essencial analisar esses números junto com métricas de cliques e conversão para avaliar o engajamento de forma mais precisa;
• no e-commerce, 93% das vendas são atribuídas a envios de campanhas, e não a fluxos automatizados. No entanto, e-mails automáticos apresentam em média 47,82% de taxa de abertura e 16,88% de cliques, o que reforça a automação como um importante canal de nutrição ao lado das campanhas tradicionais;
• o design responsivo para mobile pode aumentar em até 15% a taxa de cliques em comparação com modelos não otimizados. Considerando que 55% dos e-mails já são abertos em celulares, a responsividade deixou de ser um diferencial e passou a ser uma exigência fundamental;
• O uso de conteúdo dinâmico em e-mails pode elevar a receita em até 22%, enquanto campanhas de e-commerce segmentadas registram taxas de cliques 267.21% superiores às campanhas não direcionadas;
• e-mails personalizados podem gerar taxas de conversão até 6 vezes maiores, e marcas que aplicam personalização de forma eficaz conseguem obter cerca de 17% mais receita proveniente de e-mail do que a média do mercado.

Em que o design de e-mails é diferente do design de sites 

Enquanto o design web se apoia em navegadores modernos, JavaScript e CSS Grid, o design de e-mails precisa lidar com clientes de e-mail que geralmente bloqueiam JavaScript, limitam o CSS moderno e interpretam o mesmo código de formas diferentes no Gmail, Outlook e Apple Mail. 

Talvez isso explique por que o design de modelos de e-mail evolui de forma mais lenta, já que depende de diversas ferramentas de produção e de testes constantes de novos elementos. Por isso, muitas das inovações de design aplicadas aos sites das marcas não podem ser usadas imediatamente em campanhas de e-mail. 

O que você vai encontrar neste guia 

Neste guia, você encontrará 17 seções organizadas para permitir tanto uma leitura completa quanto a navegação direta pelos tópicos desejados. Cada parte apresenta boas práticas de design de e-mails, explica por que elas são importantes e mostra exemplos práticos de aplicação. 

Fundamentos do design de e-mails: estrutura e hierarquia visual 

Antes de definir fontes ou cores, você precisa decidir a estrutura do e-mail e o fluxo visual de leitura. Essas duas escolhas influenciam diretamente se o usuário continuará lendo após a primeira dobra da tela. 

Os três tipos de layout e quando utilizar cada um 

Dependendo da forma como o e-mail é organizado, podemos identificar três tipos principais: 

1. O layout de coluna única é o mais comum em e-mails de marketing. Ele se adapta automaticamente ao mobile e mantém consistência entre diferentes clientes de e-mail. É ideal para newsletters, fluxos de boas-vindas, campanhas promocionais e grande parte dos e-mails transacionais.
2. O layout híbrido combina coluna única no mobile e múltiplas colunas no desktop usando consultas de mídia para ajustar e empilhar as colunas em telas menores. Ele é indicado para comparações lado a lado, como recursos de produtos ou planos, garantindo boa legibilidade em qualquer dispositivo..
3. O layout modular consiste em uma sequência de blocos de conteúdo independentes que podem ser reorganizados conforme cada envio. Ele é ideal para newsletters, especialmente quando diferentes conteúdos são enviados para segmentos distintos de público.

Design do fluxo de leitura: padrões F, Z e triângulo invertido 

O design do fluxo de leitura ajusta o layout aos padrões naturais de leitura visual, ajudando a direcionar a atenção do usuário.  

Pesquisas de rastreamento ocular mostram consistentemente três padrões de leitura: 

1. Padrão F: o leitor faz uma leitura horizontal no topo, depois uma segunda varredura mais curta mais abaixo e, por fim, uma leitura vertical pela esquerda. É ideal para newsletters mais densas, onde a leitura costuma ser mais rápida e superficial.
   
   

   
   (Fonte: Email Love)

2. Padrão Z: o olhar percorre em diagonal do topo esquerdo ao topo direito, desce até o canto inferior esquerdo e finaliza no canto inferior direito. É ideal para e-mails promocionais curtos, com um destaque principal, um bloco de apoio e uma única chamada para ação.
   
   

   
   (Fonte: Email Love)

    
3. Triângulo invertido: começa com uma área superior ampla e chamativa, com título e imagem principal; depois afunila no meio com o texto de benefícios; e termina em um único ponto de foco no rodapé, geralmente a CTA. É ideal quando o objetivo é direcionar toda a atenção para uma única ação.
   
   

   
   (Fonte: Email Love)

Defina o padrão de layout antes de pensar nos elementos visuais. Quando o layout é criado a partir de uma ideia visual primeiro, ele raramente se mantém consistente em testes A/B.

O espaço em branco como recurso de design, e não apenas como área vazia 

E-mails com layout “apertado” tendem a parecer de baixa qualidade, enquanto um bom espaçamento transmite sofisticação. O espaço em branco atua em três frentes: separa elementos para facilitar a leitura, reforça a hierarquia visual pela proximidade e melhora a usabilidade em mobile ao ampliar as áreas de toque. 

Como ponto de partida, recomenda-se usar 20-30 px de espaçamento entre blocos de conteúdo, 12-16 px entre parágrafos e no mínimo 24 px de espaço ao redor dos botões.

Carga cognitiva: como reduzir o esforço mental em cada e-mail 

Cada elemento adicional exige uma fração de segundo do leitor. Para reduzir a carga cognitiva, três táticas são fundamentais: 

• um e-mail, uma tarefa. Promova apenas um objetivo e direcione para uma única ação. Se houver cinco ofertas, o ideal é enviar cinco e-mails;
• estrutura previsível. Mantenha o mesmo padrão de layout para cada tipo de e-mail, para que o assinante não precise reaprender a navegação a cada envio;
• agrupamento visual. Organize conteúdos relacionados em blocos usando fundos, bordas ou espaçamento consistente, evitando que o leitor precise interpretar e agrupar as informações por conta própria.

Como criar o cabeçalho de um e-mail 

Um bom cabeçalho de e-mail cumpre duas funções principais: identificar o remetente e oferecer ao usuário acesso ao site completo ou à versão do e-mail no navegador. Ele deve ser simples e discreto, sem ocupar espaço do conteúdo principal logo abaixo.

Monte seu cabeçalho com: 

• nome e logotipo da empresa: facilitam o reconhecimento imediato do remetente e ajudam a distinguir seus e-mails dos concorrentes;
• menu de navegação: inclua links para as principais áreas do site, ofertas em destaque ou localizador de lojas. Limite-se a 3-5 itens para evitar poluir o layout;
• link “ver no navegador”: como nem todos os clientes de e-mail suportam bem elementos interativos ou GIFs, disponibilize uma opção para visualizar a versão completa do e-mail na web;
• link de descadastro: normalmente é colocado no rodapé, embora algumas marcas também o incluam no cabeçalho. O importante é que esteja visível e acessível com apenas um clique.

(Fonte: E-mail da Pandora)

Exemplo de cabeçalho de e-mail com logo da empresa 

O rodapé do e-mail marca o encerramento da mensagem, mas ainda pode ser usado para engajar o público e reforçar a marca. Ele deve incluir ícones de redes sociais, links para páginas importantes, dados de contato e o link de descadastro. 

Para cumprir as regras da CAN-SPAM nos Estados Unidos e do GDPR na União Europeia, o rodapé deve conter:

• um link ou botão de descadastro que funcione em um único clique; 
• uma explicação de por que o destinatário recebeu o e-mail (por exemplo, “Você se cadastrou em example.com");
• um endereço físico da empresa responsável pelo envio.

(Fonte: E-mail da Stripo)

Assunto e pré-cabeçalho: a primeira decisão de design do e-mail 

A maioria dos artigos trata as linhas de assunto como copywriting. Elas também são uma decisão de design, pois determinam se o restante do seu design de email marketing será visto. Estudos mostram que 47% dos destinatários de e-mail decidem abrir uma mensagem apenas com base na linha de assunto. Além disso, 69% dos destinatários enviam ofertas diretamente para a pasta de spam quando as linhas de assunto parecem comerciais.

Limite de caracteres por cliente de e-mail (Gmail, Apple Mail, Outlook) 

Lembre-se de que o tamanho da linha de assunto não é apenas uma questão visual, mas um fator importante para despertar o interesse do destinatário e incentivar a abertura do e-mail. O número de caracteres exibidos pode variar um pouco entre diferentes clientes de e-mail.

 

Desenvolva pensando no menor espaço de exibição (Gmail mobile, cerca de 30-40 caracteres) e deixe que clientes com mais largura mostrem mais conteúdo. As linhas de assunto de melhor desempenho têm, em média, 43,85 caracteres.

Fórmulas de assunto que aumentam a taxa de abertura 

Há diversas fórmulas de copywriting para criar assuntos e títulos. Somente por meio de testes é possível identificar quais funcionam melhor para o seu negócio e público. 

A seguir estão cinco das abordagens mais utilizadas que tendem a ter desempenho superior ao de opções genéricas: 

1. Lacuna de curiosidade: “O que aprendemos ao enviar 1,8 milhão de e-mails no Q4”.
2. Benefício específico: “Reduza o tempo de produção de e-mails em 3,7×”.
3. Pergunta: “Seu modo escuro está quebrando no Outlook?”.
4. Foco em números: “12 exemplos de design de e-mails que valem copiar”.
5. Personalização: “{First name}, seu relatório mensal está pronto”.

Como usar o pré-header como uma segunda linha de assunto 

Um pré-cabeçalho atrativo pode ser o fator decisivo entre um e-mail aberto ou ignorado. Ele normalmente complementa o assunto, funcionando como uma extensão que reforça a curiosidade ou ativa uma emoção no público. E há impacto direto: pré-cabeçalhos personalizados podem aumentar a taxa de abertura para 44,67%, contra 39,28% quando não são utilizados.

Algumas regras:

• não repita o assunto; use o pré-cabeçalho para complementar com informações, não para repetir o conteúdo;
  
  
• evite que o pré-cabeçalho seja definido automaticamente como a primeira linha do e-mail (“Ver no navegador…”); 
• utilize um pré-cabeçalho oculto quando quiser mostrar uma mensagem na caixa de entrada e outra diferente ao abrir o e-mail.
  
  

Assuntos dinâmicos: personalização em larga escala 

Assuntos estáticos tratam todos os assinantes de forma igual. Já os dinâmicos ajustam variáveis com base em segmentação, comportamento ou localização. 

Três exemplos eficazes: 

• geolocalizado: “Entrega grátis no mesmo dia em {city}”; 
• comportamental: “Você esqueceu {product} no carrinho”;
• ciclo de vida: “{First name}, seu primeiro ano com {brand} é por nossa conta”.

Design de e-mail priorizando dispositivos móveis 

55% dos e-mails são abertos em dispositivos móveis, o que torna o design responsivo uma exigência básica, e não mais um diferencial. 

Por que design priorizando mobile em vez de compatível com mobile 

“Compatível com mobile” significa criar primeiro para desktop e apenas garantir que o e-mail funcione no celular. Já o design priorizando mobile parte da tela do celular como base, com a versão para desktop sendo adaptada a partir dela. 

A diferença se manifesta em três aspectos: 

• hierarquia: e-mails com design priorizando mobile começam pelo bloco mais importante no topo, já que não existe barra lateral para complementar a estrutura;
• áreas de toque: botões já são projetados para o uso com os dedos (mínimo de 44 × 44 px), em vez de serem apenas reduzidos a partir de interações de hover no desktop;
• quantidade de texto: e-mails com foco em mobile tendem a ser mais curtos, já que ler 500 palavras em uma tela pequena exige mais esforço.

(Fonte: E-mail da Gucci)

Mesmo optando por design responsivo em vez de design priorizando mobile, adote estas boas práticas: 

• utilize layout de coluna única para melhor otimização. Estruturas com múltiplas colunas não são ideais para dispositivos móveis; 
• aumente o tamanho das fontes. O texto precisa ser fácil de ler sem necessidade de zoom;
• elimine alguns elementos visuais na versão mobile para ganhar espaço e evitar excesso de informações.

Coluna única vs. múltiplas colunas: regras para cada ponto de quebra 

O design de e-mails responsivos exige ajustes no layout em diferentes pontos de quebra para garantir boa legibilidade. A regra principal é que layouts com múltiplas colunas funcionam bem em telas largas, mas devem se reorganizar em uma única coluna em telas estreitas, evitando zoom forçado e rolagem horizontal. 

Aqui estão três principais grupos de tamanhos de layout de e-mail: 

• abaixo de 480 px (maioria dos celulares): layout de coluna única, imagens em largura total e CTAs empilhadas. Esse formato costuma ter melhor desempenho que layouts de múltiplas colunas no mobile, pois elimina rolagem horizontal e zoom, fatores que reduzem conversões;
• 481-768 px (celulares grandes e tablets pequenos): a coluna única ainda é a melhor escolha. Eleve o tamanho da fonte para pelo menos 16 px;
• a partir de 769 px (tablets e desktop): layouts de duas colunas funcionam bem para grades de produtos, comparações de funcionalidades e módulos de conteúdo em que a leitura lado a lado traz mais valor.

Tamanho das áreas de toque e CTAs otimizadas para toque 

As HIG da Apple recomendam um tamanho mínimo de área de toque de 44 × 44 px, enquanto as diretrizes do Material Design do Google indicam 48 × 48 dp. Use o maior valor como referência e adicione padding ao redor para garantir usabilidade.
Além disso, todo botão deve ter no mínimo 8-12 px de espaçamento em cada lado, evitando cliques acidentais por parte dos usuários.  

E uma regra adicional para dispositivos móveis: faça com que o botão de CTA ocupe toda a largura da tela no mobile, facilitando o toque e melhorando a usabilidade. 

Agora, vamos analisar o design de e-mail em desktops:

(Fonte: E-mail da Ryanair)

Este é o mesmo modelos de e-mail em um dispositivo móvel:

(Fonte: E-mail da Ryanair)

Testes em vários dispositivos: ferramentas e fluxo de trabalho 

Um fluxo de testes básico deve incluir Apple Mail no iOS (modo claro e escuro), Gmail no Android (modo claro e escuro), Gmail na web (Chrome e Firefox), Outlook no desktop (Windows) e Outlook na web. Essa é a matriz mínima recomendada de cobertura.

Este é o resultado, onde você pode visualizar imediatamente como o seu e-mail aparece em diferentes dispositivos, clientes de e-mail e no modo escuro.

Design de CTA: como direcionar cliques com propósito 

Botões de chamada para ação nunca perdem relevância e continuam sendo uma das principais boas práticas de design de e-mail para gerar conversões. Eles incentivam o público a acessar seu site ou conhecer melhor seus serviços. 

Como destacar os botões nas suas campanhas de e-mail?  

Vamos ver: 

• use cores contrastantes para destacar os botões de CTA em relação ao restante do conteúdo; 
• inclua links que levem os usuários a páginas específicas; 
• ajuste o tamanho para garantir que o botão seja facilmente clicável em desktop e dispositivos móveis.

(Fonte: E-mail da Baublebar)

Texto em HTML vs. CTAs em imagem: por que isso importa 

CTAs apenas em imagem deixam de aparecer quando o usuário bloqueia imagens. O Outlook no Windows ainda bloqueia imagens por padrão, e muitos firewalls corporativos removem imagens remotas. Se o seu único CTA estiver em um PNG, uma parte relevante do público não verá nenhuma ação disponível. 

CTAs em texto ao vivo (botões em HTML com cores de fundo via CSS) aparecem corretamente em qualquer situação, funcionam bem no modo escuro e permanecem clicáveis mesmo quando as imagens não carregam. Use esse formato como padrão e deixe CTAs em imagem apenas para campanhas especiais em que o visual é parte central da comunicação. 

Hierarquia entre CTA principal e secundário 

Cada e-mail deve ter um único objetivo, com um CTA principal. Caso exista uma ação secundária (“Saiba mais”, “Ver coleção”), ela deve ser apresentada como link de texto ou botão discreto, garantindo hierarquia visual abaixo do CTA principal. 

Lógica de hierarquia: 

• CTA principal: fundo sólido, cor da marca, texto de 16-18 px, ocupando toda a largura no mobile;
• CTA secundário: estilo contornado ou apenas texto, menor e posicionado abaixo ou ao lado;
• ações terciárias: links inseridos no próprio texto do conteúdo. 

Se o botão principal e o secundário tiverem a mesma aparência, nenhum deles será realmente o principal.

(Fonte: E-mail da Stripo)

Texto de botão: regra das 6 palavras 

Os melhores CTAs têm entre 1 e 4 palavras. Acima de 6 palavras, o botão vira praticamente uma frase disfarçada.  

Compare:

• ❌ "Clique aqui para iniciar seu teste gratuito hoje mesmo" (9 palavras, genérico);
• ✅ "Iniciar teste gratuito" (3 palavras, ação direta).

Começar com verbo é mais eficaz do que começar com substantivo. Especificidade supera generalidade. “Baixar o relatório” funciona melhor do que “Clique aqui”. “Ativar seu desconto” é mais forte do que “Enviar”.

Posicionamento de CTA: acima da dobra e ao longo da profundidade de rolagem 

Coloque o CTA principal acima da dobra no mobile, dentro dos primeiros 480 px de altura da tela. Repita o botão no final de e-mails mais longos, evitando que o usuário precise voltar ao topo para realizar a ação. 

Coloque os CTAs em áreas de fácil alcance do polegar em dispositivos móveis, geralmente no centro ou na parte inferior da tela.

(Fonte: Modelo do Stripo)

Personalização e conteúdo dinâmico no design de e-mails 

Envios genéricos vêm perdendo espaço a cada trimestre. Em 2025, 97% dos profissionais de marketing já incluíam ao menos um elemento interativo em seus e-mails, e 49% utilizavam IA generativa para produzir textos estáticos. 

Níveis de personalização: do nome aos blocos baseados em comportamento 

A personalização não é um botão de liga/desliga, mas um espectro:

• baseada em tokens: uso do primeiro nome no assunto ou na saudação, nível básico;
• baseada em segmentação: conteúdos distintos para diferentes listas (novos vs. recorrentes, gratuito vs. pago, localização geográfica); 
• baseada em comportamento: conteúdo que se adapta às ações recentes do assinante (ou à falta delas);
• baseada em previsão: conteúdo orientado por sinais de machine learning (próximo melhor produto, risco de cancelamento, otimização do horário de envio).

A maioria das equipes aplica personalização apenas nos dois primeiros níveis, enquanto poucas avançam e implementam em todos eles. 

Como criar blocos de conteúdo dinâmico que se adaptam por segmentação 

Um bloco de conteúdo dinâmico é composto por três elementos: uma versão padrão (para assinantes sem dados de segmentação), versões alternativas e uma regra que define qual delas será exibida.

Assuntos, banners e recomendações de produtos personalizados 

Três pontos de personalização que consistentemente melhoram os resultados: 

• variáveis no assunto: nome, cidade, produto visto recentemente;
• banner principal: imagens diferentes por segmento (masculino vs. feminino, iniciante vs. avançado);
• recomendações de produtos: geradas por um sistema de recomendação e atualizadas no momento da abertura com elementos inteligentes.

Como construir um modelo de e-mail personalizado no Stripo 

Uma receita rápida para uma campanha promocional segmentada: 

1. Monte o layout principal com dois ou três blocos de conteúdo definidos para segmentação. 
2. Insira um cartão de produto com Elemento Inteligente conectado à sua fonte de dados.
3. Configure condições de exibição em cada bloco (ex.: “exibir apenas se segment = returning_customer").
4. Associe merge tags ({first_name}, {city}, {last_product}) no assunto e no conteúdo do e-mail.
5. Faça testes no modo de pré-visualização com perfis simulados de assinantes antes de enviar.

Essa abordagem permite criar todo o modelo de e-mail em um único arquivo, em vez de cinco versões diferentes. Isso viabiliza uma personalização escalável. 

Consistência da marca em campanhas de e-mail 

Uma identidade de marca consistente fortalece a confiança. Hoje, 78% dos profissionais de marketing conseguem mensurar o ROI de suas estratégias de e-mail, e os melhores resultados vêm de marcas que combinam dados, consistência visual e comunicação personalizada para atender às necessidades de cada cliente.

Modelo mestre: a única fonte de verdade da sua marca 

Um modelo mestre é a versão padronizada da sua marca dentro de um arquivo de e-mail: inclui cabeçalho, rodapé, cores, tipografia, estilos de botões e espaçamentos base. Todo e-mail de campanha parte de uma cópia desse modelo. 

A disciplina não é apenas “usar o modelo mestre”, mas sim nunca modificá-lo dentro de uma campanha. Se houver necessidade de mudança, ela deve ser feita no modelo mestre e depois sincronizada. 

Regras de cores, tipografia e uso de logotipo em e-mails 

E-mail não é web: as cores podem renderizar de forma diferente, as fontes podem ser substituídas e os logotipos podem quebrar no modo escuro.  

Defina de forma fixa os seguintes elementos: 

• paleta de marca com 2-3 cores em HEX, incluindo variações para modos claro e escuro;
• escala tipográfica com fontes seguras para web e opções de fallback (detalhadas na seção de tipografia);
• uso do logotipo em fundos claros e escuros: um único PNG com fundo transparente e contorno de 1-2 px funciona bem em ambos os modos.

Usando o kit de diretrizes de marca do Stripo 

O Stripo disponibiliza o kit de Diretrizes de Marca, uma ferramenta que incorpora regras de marca diretamente aos fluxos de criação de e-mails, facilitando a construção e o uso de diretrizes específicas para campanhas. Com ele, é possível gerar um guia de marca a partir de modelos criados no próprio construtor do Stripo. O sistema monta automaticamente um documento com todos os elementos essenciais, que pode ser exportado em PDF ou salvo dentro do editor. Assim, toda a equipe consegue acessar essas diretrizes a qualquer momento, sem sair da plataforma.

Consistência em todos os canais: e-mail, web e redes sociais 

O design de e-mail não funciona de forma isolada. Um usuário que clica em um e-mail e chega a uma página de destino espera encontrar as mesmas cores, tipografia e tom de voz. Da mesma forma, alguém que vê seu story no Instagram deve conseguir reconhecer sua marca ao abrir a caixa de entrada. 

Verifique a consistência comparando três elementos lado a lado: um e-mail principal, uma página de destino e um post em rede social. Se a identidade visual não for reconhecida em até dois segundos, há uma lacuna no sistema de marca. 

Sistema de modelos de e-mail: como construir para escala 

Quando você envia mais de 4-5 campanhas por mês, o design improvisado deixa de ser eficiente. É necessário um sistema de design de e-mail que padronize e torne mais rápido o processo de criação. 

Modelo mestre vs. biblioteca de blocos modulares 

Para alcançar essa padronização, existem duas abordagens: o uso de modelos mestres e uma biblioteca de blocos modulares com elementos reutilizáveis de e-mail. 

Veja como distribuir as responsabilidades: 

• utilize um modelo mestre para e-mails transacionais, newsletters e envios de alto volume com estrutura consistente;
• utilize uma biblioteca de módulos para campanhas promocionais em que a estrutura varia, mas os componentes (seção principal, cartão de produto, depoimento, rodapé) são reutilizados.

Como criar blocos de conteúdo reutilizáveis 

Blocos de conteúdo reutilizáveis são responsivos, baseados em tokens e podem ser usados em qualquer parte do e-mail. Por exemplo, os Módulos do Stripo são blocos salvos, compartilháveis e nomeados que qualquer membro da equipe pode inserir em qualquer modelo. 

Os módulos sincronizados resolvem o desafio das atualizações: você atualiza um módulo uma vez e todos os modelos de e-mail que o utilizam são atualizados automaticamente. Em vez de repetir o mesmo processo de atualização várias vezes, isso é feito apenas uma vez. Assim, é possível reduzir significativamente os ciclos de revisão.

Padrões de nomenclatura de modelos e governança de equipe 

Uma convenção de nomenclatura essencial para qualquer equipe:

{campaign type}_{audience}_{variant}_{date}

Examples:

• promo_returning-customer_summer-sale-A_2026-05
• newsletter_all-subscribers_weekly_2026-05-12
• transactional_all_password-reset_master

Combine isso com controle de acesso baseado em funções: designers editam os módulos, profissionais de marketing montam modelos a partir deles e aprovadores realizam a aprovação final. As funções personalizadas do Stripo tornam esse fluxo aplicável na prática.

Como o catálogo de modelos do Stripo acelera a produção de e-mails 

Mais de 1.650 modelos prontos cobrem a maioria dos tipos de envio: boas-vindas, carrinho abandonado, newsletter, campanhas sazonais, lançamento de produto e reengajamento. Partir de um modelo validado e apenas adaptá-lo reduz o tempo de produção em aproximadamente 3,7× em relação à criação do zero.

Tipografia em e-mails: fontes, tamanhos e legibilidade 

É importante testar diferentes fontes ao criar e-mails. Algumas fonts web podem ser problemáticas, já que nem todos os clientes de e-mail as renderizam corretamente. 

Fontes seguras para web vs. fontes personalizadas: compromissos e alternativas de substituição 

Fontes seguras para web (Arial, Tahoma, Verdana, Trebuchet, Georgia, Times New Roman, Helvetica, Courier) são renderizadas em todos os clientes de e-mail. Não são as mais sofisticadas, mas funcionam em qualquer cenário.

Fontes personalizadas (Inter, Roboto, Poppins, Open Sans, ou qualquer fonte do Google Fonts) são renderizadas no Apple Mail, iOS Mail, Gmail web e em algumas versões do Outlook. Já no Outlook desktop e em outros clientes, elas são substituídas pela fonte padrão.

Escolha uma fonte personalizada para a tipografia do banner principal, se desejar, mas organize corretamente a pilha de fontes:

Se a fonte personalizada não carregar, a fonte de substituição deve ser o mais semelhante possível a ela.

Hierarquia de tamanhos de fonte: títulos, corpo do texto e legendas 

Uma escala tipográfica prática para e-mails de marketing: 

• banner principal/H1: 28-36 px;
• seção/H2: 22-26 px;
• subseção/H3: 18-20 px;
• corpo: mínimo de 16 px no mobile (14 px apenas para legal/rodapé); 
• legenda/rodapé: 12-13 px.

Texto do corpo abaixo de 14 px no mobile é uma das falhas mais comuns de legibilidade. Qualquer tamanho menor obriga o usuário a aplicar zoom, e a maioria não faz isso.

Altura de linha, espaçamento entre letras e largura de parágrafo 

Otimizar a tipografia em e-mails é essencial para garantir a legibilidade.  

Essas diretrizes ajudam a criar e-mails com boa legibilidade e sem risco de sobreposição de texto: 

• altura de linha: 1,4-1,6× o tamanho da fonte no corpo do texto. Valores menores dificultam a leitura; maiores deixam o texto mais leve; 
• espaçamento entre letras: mantenha o padrão, exceto em títulos em caixa alta, onde um ajuste de +0,5 a +1 px pode melhorar a leitura;
• largura do parágrafo: entre 50 e 75 caracteres por linha é o ideal. No mobile isso já é automático; no desktop, limite a largura do conteúdo a cerca de 600 px.

Tipografia e acessibilidade: o que não fazer 

Boas práticas de tipografia e acessibilidade em e-mails incluem:

• o uso de itálico pode prejudicar a acessibilidade, reduzindo a legibilidade para pessoas com dislexia e baixa visão;
• use no máximo duas famílias de fontes por e-mail (três é o limite);
• textos em caixa alta no corpo são mais difíceis de ler do que em caixa mista;
• evite justificar o texto; o alinhamento à esquerda oferece melhor leitura e evita espaços irregulares. 

Acessibilidade em e-mails: como projetar para todos os assinantes 

O design acessível em e-mail marketing não é apenas uma questão de conformidade legal. Ele mostra, acima de tudo, cuidado com as pessoas, especialmente aquelas que usam leitores de tela, têm baixa visão, acessam conteúdos em ambientes com pouca luz ou navegam com imagens desativadas.

Checklist de WCAG para designers de e-mail 

O checklist da WCAG para designers de e-mail apresenta etapas práticas para tornar seus e-mails em HTML mais intuitivos e compatíveis com os principais clientes de e-mail.

WCAG 2.2 AA, resumido para e-mails: 

• contraste: mínimo de 4.5:1 para texto de corpo e 3:1 para textos grandes (18 px+) e componentes de interface;
• redimensionamento de texto: o conteúdo deve permanecer legível mesmo com zoom de até 200%; 
• texto alternativo: todas as imagens relevantes devem ter alt descritivo; imagens decorativas devem usar alt vazio (alt="");
• estrutura semântica: utilize corretamente tags de título (H1, H2, H3) em ordem hierárquica, em vez de apenas estilização visual;
• navegação por teclado: todos os elementos interativos devem ser acessíveis e utilizáveis sem mouse;
• uso de cor: não dependa apenas da cor para transmitir informação (use também ícones, textos ou rótulos).

Contraste de cores: ferramentas e níveis mínimos recomendados

O nível AA da WCAG estabelece uma relação mínima de contraste de 4,5:1 para textos comuns e de 3:1 para textos grandes.  

Ferramentas para verificar o contraste de cores: 

• WebAIM Contrast Checker (gratuito e acessível pela web); 
• Stark (plugin para o Figma); 
• Adobe Color Contrast Analyzer (integrado ao Adobe XD). 

Verifique todas as combinações de cores do seu modelo mestre usando uma dessas ferramentas antes de aprovar o design. O contraste inadequado de cores é a violação de acessibilidade mais comum na web, presente em 79,1% das páginas iniciais. 

Compatibilidade com leitores de tela: uso correto da estrutura semântica 

Os leitores de tela interpretam a estrutura do HTML, não a aparência visual da página. Por isso: 

• utilize <h1>, <h2> e <h3> para títulos reais e respeite a hierarquia entre eles; não pule níveis apenas para obter um efeito visual; 
• use <table role="presentation"> em tabelas usadas apenas para layout, evitando que sejam interpretadas como estrutura de conteúdo; 
• configure o atributo lang="en" na tag <html> com o idioma correto do e-mail;
• inclua um <title> descritivo para que os leitores de tela informem claramente o objetivo da mensagem.

Boas práticas para textos alternativos em imagens e GIFs 

O texto alternativo atende a dois públicos: pessoas que utilizam tecnologias assistivas e assinantes que visualizam e-mails com imagens desativadas. 

Estas são as recomendações para escrever textos alternativos: 

• imagens decorativas: alt="" (vazio, mas presente);
• imagens informativas: descreva a mensagem transmitida pela imagem, e não apenas sua aparência (“Coleção de primavera: capas de chuva leves e botas impermeáveis”, em vez de “Foto de um casaco amarelo”); 
• imagens com CTA: descreva a ação esperada (“Comprar a coleção de primavera”);
• GIFs: explique o que acontece na animação; caso ela não seja carregada, o primeiro quadro e o texto alternativo devem continuar transmitindo a mensagem principal.

Imagens, GIFs e recursos visuais interativos

Ao utilizar imagens, GIFs e recursos visuais interativos em e-mails, é importante seguir algumas diretrizes para garantir uma boa exibição em diferentes clientes de e-mail e assegurar que os assinantes consigam visualizar o conteúdo corretamente. 

Tamanhos e especificações de otimização de imagens para cada dispositivo

O primeiro aspecto a considerar é o tamanho das imagens usadas no e-mail. 

Estas são as recomendações básicas para o uso de imagens em e-mails: 

• largura: 600-640 px para o corpo principal do e-mail e 1200-1280 px para telas retina (use tanto o atributo width quanto CSS); 
• formato: JPG para fotografias, PNG para logotipos e elementos com transparência, GIF para animações e WebP apenas quando houver compatibilidade comprovada com os clientes de e-mail do público;
• tamanho: mantenha o e-mail com menos de 100 KB no total e cada imagem com menos de 50 KB;
• compressão: ferramentas como TinyPNG e Squoosh removem metadados e reduzem o tamanho dos arquivos sem perda perceptível de qualidade. 

Boas práticas para banners e imagens principais em e-mails 

Considere os banners como um elemento de apoio ao conteúdo do e-mail e evite que eles dominem a comunicação. Uma boa estratégia consiste em usar imagens, links ou GIFs alinhados à identidade da marca para envolver o público e reforçar a mensagem da campanha.  

O mais importante é contar uma história, e não apenas tentar vender. Banners excessivamente promocionais podem gerar desconfiança, por isso é mais eficaz usar uma abordagem baseada em narrativa envolvente para transmitir a mensagem. 

Algumas recomendações para o uso de banners: 

• apesar de o padrão em desktops ser o uso de imagens entre 600 e 700 px de largura, vale a pena testar outros tamanhos, sempre considerando a adaptação para dispositivos móveis;
• explore recursos como carrosséis, vídeos e GIFs; 
• utilize imagens personalizadas com transparência ou colagens para dar um visual mais atual e diferenciado ao modelo do e-mail.

(Fonte: E-mail da Chanel)

Boas práticas para GIFs: tempo de carregamento, limite de animações intermitentes e quadro inicial de substituição. 

Os GIFs ajudam a tornar os e-mails mais dinâmicos e atrativos, mas seu uso exige alguns cuidados. Para evitar problemas de carregamento e compatibilidade, mantenha os arquivos abaixo de 1 MB, já que GIFs maiores podem não ser exibidos corretamente em determinados clientes de e-mail. Além disso, coloque a informação mais importante no primeiro quadro, pois algumas versões do Outlook para Windows mostram apenas essa imagem estática. Se a animação não for carregada, o texto alternativo deve ser suficiente para transmitir a mensagem principal ou a chamada para ação.

Evite efeitos de piscagem excessivos e mantenha as animações em no máximo duas piscadas por segundo, reduzindo o risco para pessoas com sensibilidade a estímulos visuais. Além disso, modere o uso de movimento no e-mail: mais de um GIF visível na mesma tela pode tornar a experiência confusa, distrativa e visualmente carregada.

(Fonte: E-mail da Tiffany & Co.)

Quando utilizar carrosséis, vídeos e módulos interativos em e-mails 

Vídeos e módulos interativos ajudam a destacar os e-mails em meio ao grande volume de campanhas promocionais recebidas pelos assinantes. Além de tornar a experiência mais memorável, esses recursos aumentam o engajamento e contribuem para melhores resultados em e-mail marketing.

Recomendações para usar esse tipo de conteúdo em e-mails: 

1. Utilize carrosséis (AMP) quando precisar exibir quatro ou mais produtos e sua base de assinantes utilizar principalmente o Gmail. Para clientes sem suporte a AMP, ofereça uma versão em grade estática.
2. Apresente vídeos por meio de uma imagem de capa com um botão de reprodução que leve ao vídeo hospedado. Embora alguns clientes de e-mail permitam reprodução direta, a compatibilidade ainda é limitada.
3. Aproveite módulos interativos, como pesquisas, questionários e imagens com áreas clicáveis, para aumentar o engajamento e coletar informações sem exigir que o usuário acesse uma página de destino.

(Fonte: E-mail da Stripo)

Como lidar com imagens no modo escuro: PNGs com transparência ou fundos sólidos? 

O modo escuro já representa cerca de 35% das aberturas de e-mails, e aproximadamente 82% dos usuários de smartphones utilizam essa configuração em seus dispositivos. 

Grande parte dos erros de exibição no modo escuro envolve imagens: 

1. Logotipos com texto escuro sobre fundo branco podem desaparecer ou sofrer inversão de cores.
   Como evitar: use PNGs com fundo transparente e adicione um contorno claro discreto para garantir boa visibilidade em qualquer tema.
2. Imagens com bordas brancas podem exibir um contorno branco indesejado no modo escuro.
   Como evitar: elimine as margens brancas da imagem ou ajuste a cor de fundo do e-mail para que ela se integre visualmente à foto.

Tipos de e-mail: quando utilizar cada formato 

Nem todos os e-mails exigem um design sofisticado. Em muitos casos, o mais importante é que sejam diretos, rápidos de consumir e facilmente identificáveis pelo destinatário. 

E-mails em texto simples: quando menos design gera melhores resultados 

Os e-mails em texto simples não dependem de imagens, mantêm uma aparência consistente em diferentes clientes de e-mail e passam uma impressão mais pessoal e autêntica. Por isso, costumam gerar mais respostas quando o objetivo é criar uma comunicação que pareça individual e não promocional.

E-mails em texto simples, ou com aparência de texto simples, costumam gerar melhores resultados em três cenários:

1. Comunicação direta entre pessoas: acompanhamentos de vendas, contatos de retorno e mensagens enviadas pelo fundador da empresa. 
2. Situações em que a entregabilidade é prioridade: especialmente após problemas com filtros de spam e necessidade de recuperar a reputação do domínio ou remetente.
3. Conteúdo com tom genuíno: newsletters escritas como uma conversa por e-mail, em vez de uma peça publicitária.

E-mail em HTML enriquecido: a abordagem de uma página de destino compacta

A maior parte dos e-mails de marketing pertence a essa categoria: seção de destaque, conteúdo principal, chamada para ação (CTA), blocos de suporte e rodapé. O HTML enriquecido é indicado quando há necessidade de reforçar a identidade visual, organizar hierarquias de informação e construir uma narrativa visual, como em campanhas promocionais, newsletters e lançamentos de produtos.

E-mail AMP e interativo: possibilidades e limitações 

O AMP para Email permite que os usuários interajam diretamente dentro da caixa de entrada, sem precisar sair do e-mail: preencher formulários, navegar em carrosséis, confirmar presença em eventos e visualizar estoque em tempo real. Em testes A/B da Stripo, formulários de feedback interativos com AMP tiveram 520% mais respostas do que formulários externos.

Compensações: 

• compatibilidade: Gmail e Yahoo oferecem suporte completo a AMP, enquanto Apple Mail e Outlook não são compatíveis; 
• versão alternativa: sempre inclua uma versão HTML para clientes que não suportam AMP. O AMP não é um substituto do HTML, mas uma camada adicional de melhoria;
• configuração: é necessário que o Google autorize o seu remetente para que e-mails em AMP sejam renderizados no Gmail.

E-mails transacionais vs. e-mails de marketing: diferentes regras de design 

E-mails de marketing e e-mails transacionais possuem objetivos distintos, o que exige abordagens diferentes no seu desenvolvimento.

 

Não estilize e-mails transacionais como se fossem e-mails de marketing. Recibos com aparência promocional tendem a reduzir a confiança do usuário rapidamente. 

Gamificação e recursos interativos 

Elementos interativos diferenciam um bom design de e-mail de um design excelente. Campanhas de e-mail com gamificação podem gerar até 48% mais engajamento dos destinatários, enquanto a gamificação também pode aumentar as taxas de abertura em até 30%.

Enquetes, pesquisas e quizzes incorporados diretamente no e-mail 

Enquetes de um único toque (com AMP) são ideais para feedback rápido e sem atrito (“Como foi sua experiência? 👍/👎”). Quizzes funcionam melhor para recomendações de produtos e segmentação de personas. Já pesquisas com três ou mais perguntas abertas devem ser direcionadas para uma página de destino, e não realizadas dentro do e-mail.

(Fonte: Modelo da Stripo)

Jogos e cartões raspáveis: métricas de conversão 

E-mails com gamificação elevam as taxas médias de conversão em cerca de 2,5% enquanto conteúdos interativos podem aumentar o valor médio de compra em até 15%. Além disso, o mercado global de gamificação deve alcançar 30,7 bilhões de dólares até 2025.

Mecânicas que costumam gerar bons resultados: 

• roletas “gire e ganhe” para revelar descontos (efetivas em primeiras compras); 
• cartões raspáveis para recompensas surpresa (ideais para programas de fidelidade);
• jogos de memória e combinação para aumentar picos de engajamento (úteis em campanhas de reativação);
• quizzes de personalização para recomendar o produto ideal (indicados para lançamentos de novos produtos).

(Fonte: Modelo da Stripo)

AMP vs. interatividade baseada apenas em CSS: matriz de compatibilidade 

AMP para e-mail e interatividade baseada apenas em CSS são duas abordagens diferentes para engajamento direto na caixa de entrada. O AMP permite funcionalidades dinâmicas em tempo real, com experiência semelhante a um aplicativo, mas depende de suporte específico dos clientes de e-mail e de liberação do remetente. Por outro lado, a interatividade via CSS tem maior compatibilidade, funcionando na maioria dos clientes modernos, mas se limita a efeitos visuais e interações estáticas.

 

Use AMP quando sua base de usuários for predominantemente do Gmail. Use interatividade baseada em CSS quando houver necessidade de compatibilidade com Apple Mail. Em todos os casos, inclua sempre uma versão HTML como alternativa.

Testes A/B aplicados a decisões de design de e-mail 

Grande parte das “boas práticas” representa apenas médias gerais. O melhor design para o seu público é aquele que foi validado por testes reais. 

O que testar: uma lista priorizada de elementos de design 

Teste nesta ordem, do maior para o menor impacto esperado: 

1. Assunto do e-mail (principal fator para a taxa de abertura). 
2. Imagem principal ou banner (responsável pela primeira impressão). 
3. Texto da chamada para ação (CTA), pequenas mudanças de verbo podem aumentar cliques em 10-30%. 
4. Cor do CTA (ajuste mais fino, com impacto geralmente menor). 
5. Nome do remetente (tem mais influência do que muitos esperam). 
6. Estrutura do layout (coluna única vs. layout híbrido). 
7. Nível de personalização (de tokens simples a comportamento do usuário). 

Como estruturar um teste válido: tamanho da amostra, duração e teste de uma única variável 

Três princípios que ajudam a evitar erros comuns em testes: 

• uma variável por experimento: ao alterar assunto e imagem ao mesmo tempo, não é possível identificar o que realmente influenciou o resultado; 
• o tamanho da amostra é essencial: para obter um intervalo de confiança de 95% em pequenas variações (5-10%), normalmente são necessários mais de 1.000 destinatários por versão; amostras pequenas podem distorcer as conclusões; 
• a duração deve cobrir todo o ciclo de abertura: embora a maioria das interações ocorra em 24 horas, públicos B2B podem levar de 48 a 72 horas para abrir o e-mail; encerrar antes disso pode comprometer a análise. 

Leitura de resultados: quais métricas devem guiar decisões de design

Nem todas as métricas de e-mail têm o mesmo nível de confiabilidade, por isso é essencial compreender o que cada uma realmente mede.

A taxa de abertura ainda serve para identificar tendências gerais, mas perdeu precisão com o Apple Mail Privacy Protection, devendo ser interpretada como um indicador orientativo, e não definitivo. Já a taxa de cliques é mais confiável para avaliar CTAs e a eficácia do layout. A CTOR (cliques por abertura) permite analisar o desempenho do conteúdo e do design de forma isolada, sem a influência da linha de assunto. 

Em termos de impacto nos negócios, a taxa de conversão permanece como a métrica mais relevante, já que relaciona diretamente o desempenho do e-mail à geração de receita ou ações desejadas. Em campanhas promocionais, a receita por e-mail (RPE) é frequentemente o indicador mais sólido da rentabilidade ao longo do tempo. 

As taxas de abertura perderam confiabilidade com o Apple Mail Privacy Protection, que impacta cerca de 50-60% das aberturas registradas. Por isso, profissionais de marketing mais estratégicos priorizam métricas como taxa de cliques, conversões e receita por e-mail como principais indicadores de desempenho.

Anotações no Gmail e estratégias de pré-visualização na caixa de entrada 

Embora muitos profissionais de e-mail marketing busquem posicionar suas campanhas na Caixa de entrada, a aba Promoções não deve ser vista como um problema. 

Como funcionam as anotações na aba Promoções do Gmail 

As anotações do Gmail são dados estruturados (JSON-LD ou microdados) inseridos no <head> do e-mail, que permitem ao Gmail exibir um cartão de pré-visualização acima do assunto no mobile e um carrossel no topo da aba Promoções.

Três tipos de anotações são relevantes: 

• código promocional: exibe um cupom de desconto diretamente na prévia da caixa de entrada; 
• selo de oferta: adiciona um destaque como “20% de desconto” ou “frete grátis”; 
• data de validade: indica quando a oferta expira, gerando urgência já na pré-visualização. 

Inclusão de selos de oferta, datas de validade e imagens promocionais 

Uma anotação básica do Gmail inclui imagem promocional (580×400 px), selo de desconto, data de expiração e logotipo. Crie esse componente uma vez, salve como módulo e reutilize em todas as campanhas promocionais. 

O Stripo oferece um gerador de anotações promocionais do Gmail, eliminando a necessidade de escrever o JSON manualmente.

Como medir o desempenho das anotações no Gmail 

O Gmail não fornece dados de cliques específicos para anotações, então a análise é feita via UTMs:

• use parâmetros UTM exclusivos para campanhas com anotações (ex.: utm_source=gmail&utm_medium=annotation);
• compare o CTR de campanhas com e sem anotações; 
• verifique principalmente o aumento de cliques em dispositivos móveis, onde as anotações têm maior impacto inicial.

Conclusão

O e-mail é um dos poucos canais em que boas práticas de design ainda impactam diretamente métricas de forma mensurável. Layouts pensados para mobile, hierarquia clara de CTAs, acessibilidade, adaptação ao modo escuro e um verdadeiro sistema de design de e-mails são fatores que diferenciam campanhas que geram resultados daquelas que acabam sendo ignoradas ou apagadas pelos assinantes.

Comece pelos fundamentos e, em seguida, adicione camadas de interatividade e personalização. Foque nos testes das variáveis que realmente influenciam os resultados (assunto, bloco principal e CTA), em vez de elementos com impacto mínimo, como o arredondamento dos botões. Estruture o processo em um sistema, para que cada nova campanha já parta de um modelo alinhado à identidade da sua marca.

Perguntas frequentes sobre design de e-mail 

1. Qual é a largura ideal de um e-mail? 

O padrão mais comum é 600 px para o corpo do e-mail em desktop, enquanto no mobile a renderização geralmente varia entre 320 e 480 px. A maioria dos modelos utiliza uma estrutura de 600 px, com blocos internos que se adaptam e se reorganizam em telas menores. Os modelos da Stripo já seguem essa largura como configuração padrão.

2. Quantas imagens um e-mail deve ter? 

Não há uma regra rígida, mas uma boa referência é manter uma proporção de 60/40 entre texto e imagens. Excesso de imagens pode levantar suspeitas em filtros de spam e prejudicar a visualização em clientes que bloqueiam imagens. Por outro lado, poucas imagens deixam o e-mail pouco atrativo. Em geral, de três a cinco imagens bem selecionadas são suficientes para a maioria das campanhas de marketing. 

3. Devo usar um construtor de e-mails sem código ou programar do zero? 

Um construtor sem código é ideal para quem envia mais de dois e-mails por mês e precisa de compatibilidade consistente entre clientes de e-mail. Já a codificação manual é mais adequada para campanhas pontuais e altamente personalizadas, ou para desenvolvedores que já trabalham com uma base própria de modelos. Para a maioria dos casos, o uso de um editor sem código pode reduzir o tempo de produção em cerca de 3,7 vezes, sem perda de qualidade na renderização. 

4. O que torna um e-mail otimizado para dispositivos móveis? 

Layout de coluna única em telas abaixo de 480 px, texto com tamanho mínimo de 16 px, áreas de toque de pelo menos 44×44 px, CTAs em largura total, imagens ajustadas em porcentagem ou com max-width: 100%, e testes realizados pelo menos no Gmail Android e no Apple Mail iOS. O detalhamento completo está na seção de abordagem com prioridade para dispositivos móveis acima. 

5. Como testar a renderização de e-mails em diferentes clientes? 

Como testar a renderização de e-mails em diferentes clientes?
Existem três opções, em ordem crescente de abrangência: enviar para suas próprias contas de teste (gratuito, porém limitado), usar uma ferramenta gratuita como o PutsMail (com visualização básica) ou recorrer a plataformas pagas como Litmus, Email on Acid ou o recurso integrado do Stripo para testes em clientes de e-mail (mais de 90 clientes em um único fluxo de trabalho). 

6. Qual é a diferença entre design de e-mail e e-mail marketing? 

E-mail marketing é a estratégia: para quem enviar, quando, por que e como medir os resultados. Já o design de e-mail é a forma como a mensagem é construída para que essa estratégia funcione dentro da caixa de entrada. É possível ter uma boa estratégia com um design fraco (alta taxa de abertura, mas baixo clique), assim como um ótimo design com uma estratégia ruim (visual atraente, mas sem abertura). São competências distintas, e as campanhas mais eficazes investem nas duas.