Design de Email: Melhores Práticas para 2026

Entre 60% e 70% dos emails são abertos em dispositivos móveis. Se seu email não funciona bem no celular, você perde a maioria dos seus leitores antes mesmo deles lerem a primeira linha. O design mobile-first é, na prática, design de email — ponto final.

Fontes mínimas de 16px são essenciais. Tamanhos menores forçam o usuário a dar zoom, o que aumenta o atrito e reduz a chance de clique. Botões de toque devem ter pelo menos 44px de altura e largura. Qualquer coisa menor é difícil de acertar com o polegar.

Layouts de coluna única funcionam melhor em mobile. Emails com múltiplas colunas costumam quebrar em clientes de email mais antigos ou em telas pequenas. Se precisar de múltiplas colunas, use tabelas responsivas que se empilham em dispositivos móveis.

Teste sempre em dispositivos reais, não apenas em emuladores. O Gmail no iOS se comporta diferente do Gmail no Android. O Apple Mail tem suporte a CSS mais avançado que o Outlook. Conhecer essas diferenças evita surpresas desagradáveis na hora do envio.

Emails com muitas imagens e pouco texto têm problemas sérios de deliverability. Filtros de spam interpretam imagens pesadas como tentativa de esconder conteúdo suspeito. A regra de ouro é manter uma proporção de 80% texto e 20% imagem.

Use imagens para complementar, nunca para substituir o conteúdo. Se o email depende de uma imagem para transmitir a mensagem principal, usuários com bloqueio de imagens (ainda comuns em corporações) não entenderão nada. Sempre tenha texto equivalente para todo conteúdo visual importante.

Otimize o tamanho das imagens. Imagens grandes aumentam o tempo de carregamento e consumem dados móveis do usuário. Use formatos modernos como WebP quando possível, mas tenha fallback em JPEG ou PNG para clientes de email que não suportam WebP.

Evite embutir imagens como base64. Isso aumenta drasticamente o tamanho do email e pode fazer com que ele seja cortado pelo cliente de email. Hospede as imagens em um CDN confiável e use URLs absolutas.

Botões de CTA devem ser grandes, contrastantes e inconfundíveis. Use cores que destaquem do resto do email, mas que estejam alinhadas à sua identidade visual. O botão deve parecer clicável: bordas arredondadas, sombra sutil ou efeito de hover ajudam nessa percepção.

Deixe espaço em branco ao redor do botão. O CTA precisa respirar. Quando está cercado de texto e imagens, o olho não sabe onde focar. Um botão isolado em uma área limpa atrai a atenção naturalmente.

Um único CTA primário por email é ideal. Se você pedir para o usuário fazer três coisas diferentes, ele provavelmente não fará nenhuma. Se precisar de múltiplas ações, hierarquize: um CTA primário em destaque e secundários mais discretos.

O texto do CTA deve ser uma ação, não uma descrição. "Ver planos", "Baixar guia", "Agendar demonstração" funcionam melhor que "Clique aqui" ou "Saiba mais". Ações específicas criam clareza mental e aumentam a taxa de clique.

Acessibilidade em email não é apenas uma questão ética — é uma questão de alcance. Milhões de pessoas usam leitores de tela para consumir emails. Se sua mensagem não é acessível, você está excluindo uma parcela significativa da sua audiência.

Use contraste suficiente entre texto e fundo. O padrão WCAG recomenda uma razão de contraste mínima de 4.5:1 para texto normal. Texto cinza claro em fundo branco pode parecer elegante, mas é ilegível para muitas pessoas com baixa visão.

Adicione texto alternativo (alt text) em todas as imagens. Leitores de tela leem esse texto em voz alta. Um alt text descritivo como "Gráfico mostrando aumento de 40% na taxa de abertura" é infinitamente melhor que "imagem1.jpg".

Estruture o conteúdo com hierarquia clara usando headings (H1, H2) e parágrafos. Leitores de tela usam essa estrutura para navegar. Evite depender apenas de cor para transmitir informação — use ícones, texto ou formas como reforço.

Entre 30% e 40% dos usuários usam dark mode em seus dispositivos e clientes de email. Seu email deve funcionar bem em ambos os modos, ou você está entregando uma experiência quebrada para um terço da sua audiência.

O maior desafio do dark mode é a inversão automática de cores feita por clientes de email. Um fundo branco vira preto, e um texto preto vira branco. Imagens com fundo transparente ou texto embutido podem ficar ilegíveis após a inversão.

Para contornar isso, use cores com bom contraste em fundos claros e escuros. Evite imagens com texto embutido — prefira texto HTML sobre imagens. Se usar imagens com fundo branco, adicione uma borda sutil para que não fiquem flutuando no dark mode.

Teste sempre em ambos os modos antes de enviar. O Apple Mail, Gmail e Outlook tratam o dark mode de formas diferentes. O que funciona em um pode quebrar no outro. Prefira simplicidade visual: designs limpos se adaptam melhor a ambos os modos.

Seus emails devem ser reconhecíveis instantaneamente. Quando um usuário abre sua mensagem, ele deve saber quem enviou antes mesmo de ler o remetente. Consistência visual cria confiança e aumenta o engajamento ao longo do tempo.

Mantenha uma paleta de cores limitada. Duas ou três cores principais são suficientes para a maioria dos emails. Cores demais criam poluição visual e diluem a mensagem. Use sua cor de marca no header e nos CTAs, e tons neutros para o corpo do texto.

Use no máximo duas fontes: uma para títulos e outra para corpo. Web fonts nem sempre funcionam em todos os clientes de email. Tenha fontes de fallback seguras como Arial, Helvetica, Georgia e Times New Roman. Se a web font falhar, o design ainda deve funcionar.

Crie um template padronizado que sirva como base para todos os emails. Um header com logo, um corpo com espaço para conteúdo, um footer com links sociais e unsubscribe. Ter uma estrutura consistente reduz o tempo de criação e aumenta o reconhecimento da marca.