Design de e-mail

Layout, estrutura e estilo do e-mail pra ler bem e funcionar em qualquer cliente e aparelho.

Hard

O que é

Design de e-mail é desenhar a mensagem pra ela funcionar de verdade, pensando layout, tipografia, imagem e botão pra renderizar igual em Gmail, Outlook, Apple Mail e por aí vai. É um terreno de restrição técnica pesada, porque muita coisa que funciona na web simplesmente não funciona dentro de um e-mail.

Os princípios aqui são mobile-first, com layout de coluna única, hierarquia visual clara, conteúdo escaneável, em título, bullet e parágrafo curto, e bastante respiro. Além disso, entram cuidados como alt text pra quando a imagem vem bloqueada, fontes web-safe com fallback, e atenção à proporção entre imagem e texto pra não cair no spam.

Em uma frase

Esse template precisa de design de e-mail de verdade, coluna única e fallback, senão quebra no Outlook.

A pergunta que ele responde

Por que meu e-mail fica perfeito no Gmail e quebra todo no Outlook?

Quando usar

Ajuda em sequências de onboarding, anúncio de feature, reengajamento e em qualquer e-mail que carrega a marca.

Como não usar

O cuidado é desenhar como se fosse uma página web cheia de CSS. Boa parte dos clientes simplesmente ignora isso, e o layout quebra na mão de quem recebe.

Na prática

Pense num e-mail que fica perfeito no desktop e quebra no Outlook. O design feito pensando no cliente de e-mail já prevê isso, com layout simples e fallback pra segurar a peça em todo lugar.

Não confunda com

Vale separar design de e-mail de design web. O e-mail roda em clientes com suporte de CSS limitado e inconsistente, o que obriga uma técnica diferente da web. Parecem primos, mas o que sustenta um costuma quebrar o outro.

D

Em inglês

Email Design

Pronúncia

í-meil di-zái-n

Também chamado de

email design, design de e-mail, template de e-mail

Origem

n/a

Fonte

Saiba mais

Litmus, guia sobre design e renderização de e-mail