Identifique a versão
Inclua a versão do template ou o número do build no fim do assunto para não confundir mensagens antigas da fila com o resultado atual.
Prévia de e-mail HTML
Analise um e-mail em seis camadas
Não basta perguntar se “parece certo”. Observe cada camada, da caixa de entrada ao fallback em texto simples, para encontrar problemas no assunto, no layout, nos links e na acessibilidade.
Painel de inspeção
Cada camada representa uma interface que o usuário pode encontrar. Altere uma variável por vez para comparar os resultados dos novos testes.
01 Lista de mensagensO assunto está completo? O remetente parece confiável? O preheader revela algum texto do template?
02 Cabeçalho do e-mailA marca, a hierarquia e as cores de fundo continuam reconhecíveis quando as imagens estão bloqueadas?
03 Estrutura do conteúdoTítulos, texto, espaços e ordem de leitura permanecem claros em telas estreitas?
04 Botão de açãoO texto do botão deixa claro o resultado? O destino do link e os parâmetros de rastreamento estão corretos?
05 Mídia e strings longasImagens grandes, URLs longas e números de pedido estouram o conteúdo ou são cortados de forma inadequada?
06 Fallback em texto simplesMesmo sem HTML, deve haver informações completas, links copiáveis e uma ordem de leitura clara.
Prepare seus exemplos
Torne cada prévia reproduzível
O e-mail de teste deve incluir um identificador exclusivo, o horário exato do disparo e resultados esperados que possam ser conferidos. Não altere o template, o endereço de recebimento e as configurações de envio ao mesmo tempo.
Guarde as evidências do envio
Registre o ID da tarefa de envio, o endereço de destino e o horário do disparo. Em caso de atraso, será possível consultar a fila e os bounces.
Defina os critérios de aprovação
Especifique antes o tamanho do assunto, o destino do botão, as quebras de linha no celular e o conteúdo em texto simples. Não encerre o teste com um “está bom o suficiente”.
Aprovado visualmente não significa aprovado em conteúdo
Um HTML bonito pode esconder links errados, um preheader ausente ou um código de verificação impossível de copiar. Confira os fatos antes de avaliar a hierarquia visual.
- O assunto e o conteúdo transmitem a mesma mensagem
- A validade do código de verificação corresponde à interface do produto
- O cancelamento da assinatura e as informações de segurança funcionam de verdade
O que a prévia isolada resolve
E-mails reais trazem seus próprios estilos. Ao colocar o conteúdo em um quadro restrito, você evita que o CSS do site reescreva o template e impede a execução direta de scripts do e-mail.
- As imagens se ajustam à largura da área de leitura
- Strings longas podem quebrar linha com segurança
- O conteúdo recua para texto simples quando o HTML está ausente
Registro de resultados
Registre as conclusões como “sintoma — evidência — correção”
“O botão está quebrado” não ajuda o próximo testador. Informe a largura do cliente, o link real, as etapas para reproduzir e a versão do template.
Em uma área de leitura de 390 px, o texto do botão principal quebrou em duas linhas e reduziu o espaço vertical.
Registre o assunto do e-mail, a versão do template, a captura de tela e a URL de destino do botão.
Encurte o texto da ação, aumente o padding horizontal do botão e envie uma nova versão.
Use um endereço novo para receber uma amostra com identificador exclusivo e confirme que o e-mail antigo não entrou na conclusão.