O design de e-mail para celular começa pela ordem de leitura: sem dar zoom, o cliente deve entender a oferta, a condição importante e o próximo passo. Uma grade de produtos no Shopify que parece espaçosa no computador pode virar uma pilha de imagens minúsculas no celular. Comece pelo espaço menor e depois teste o que acontece quando o texto aumenta, as imagens falham ou as colunas se empilham.
Crie uma ordem de leitura clara
Use uma estrutura simples de coluna única para a mensagem principal. Organize a promessa, a explicação de apoio e a ação principal em uma sequência que continue fazendo sentido quando as imagens não estiverem disponíveis. Os blocos adicionais de produtos devem reforçar essa ação, não competir com ela.
Mantenha as informações importantes como texto selecionável. Quem lê não deveria precisar ampliar uma imagem promocional para descobrir a oferta ou as condições. Escolha uma fonte compatível com e-mail e um tamanho de corpo confortável; cerca de 16 pixels é um bom ponto de partida, mas teste a renderização real. Uma tradução mais longa pode precisar de mais espaço vertical, não de letras menores.
Organize a primeira tela em torno de uma decisão
Esboce primeiro a versão estreita, antes de montar uma grade para desktop. Em um lançamento de produto, a ordem pode ser: nome do produto, uma frase que explique o uso, imagem de apoio, informações de preço e botão. O leitor deve entender a proposta mesmo que só veja essa primeira parte. Um banner decorativo grande não deveria empurrar todos os detalhes úteis para várias telas abaixo.
Comece com um texto de corpo próximo a 16 pixels e com espaçamento entre linhas suficiente para separá-las confortavelmente; depois, confira o e-mail enviado. Esses valores são referências iniciais, não uma regra para que todas as etiquetas e os títulos tenham o mesmo tamanho. Diferencie bem o corpo dos títulos e mantenha um espaço confortável ao redor da ação principal. Reduzir o modelo inteiro para fazê-lo caber quase nunca é a solução para um layout apertado.
Em dois cartões de produto, mantenha imagem, título, preço e link dentro do mesmo componente. Quando os cartões se empilharem, o cliente deve ver um produto completo antes do próximo. Evite uma estrutura que mostre as duas imagens primeiro e as duas descrições depois; assim, o leitor teria de adivinhar quais informações pertencem a cada produto.
Deixe os componentes crescerem com o conteúdo
Evite áreas de texto com altura fixa e quebras de linha inseridas apenas para equilibrar um título no desktop. Dê aos botões espaço interno suficiente para acomodar rótulos mais longos e torne toda a área clicável confortável para tocar. Separe links próximos para que o dedo não selecione o destino errado.
Use texto alternativo descritivo nas imagens informativas e evite acrescentar ruído com imagens meramente decorativas. Confira o contraste do texto no fundo real, inclusive quando houver mudanças no modo escuro. Um rótulo claro que parece elegante no monitor pode ficar difícil de ler sob a luz do celular ao ar livre.
Use uma matriz de pré-visualização que revele os pontos fracos
Uma boa matriz inclui uma tela estreita de celular, uma tela maior, imagens indisponíveis, modo escuro quando compatível e dados realistas de clientes. Para as traduções, inclua a versão mais longa em vez de testar apenas a mais curta. Observe a mensagem inteira e depois confira as áreas com maior chance de falhar: nomes de produtos, valores, botões e links do rodapé.
- Se o texto do botão quebrar em linhas, aumente a altura e confira o espaçamento interno; não corte a palavra que indica a ação.
- Se o nome do produto encostar no próximo bloco, remova a altura fixa e permita que o texto ocupe mais linhas.
- Se informações importantes desaparecerem com as imagens, mova-as para o texto selecionável e use a imagem apenas como apoio.
- Se for difícil tocar em links próximos sem selecionar o errado, aumente a distância entre eles ou reduza o número de ações concorrentes.
Teste os problemas antes que seus clientes os encontrem
No Sendvio, pré-visualize o modelo com dados reais de clientes e confira a largura estreita. Teste um nome longo, um campo de personalização vazio, um valor maior e um produto com título excepcionalmente comprido. Depois, envie testes para os aplicativos de e-mail mais usados pelos seus clientes.
Em uma promoção com dois produtos, confira a ordem quando os blocos se empilharem: imagem, nome, preço e ação de cada produto devem permanecer juntos. Se ficarem separados, simplifique o componente. O objetivo não é reproduzir o layout de desktop a qualquer custo, mas preservar o sentido da mensagem e deixar a próxima ação óbvia, sem zoom, dúvidas ou rolagem horizontal.
Confira o contraste entre a combinação real de texto e fundo. Para textos comuns, uma proporção de contraste de pelo menos 4,5:1 é uma referência útil de acessibilidade; para texto grande o mínimo pode ser 3:1. Esses valores não substituem uma análise completa de acessibilidade, mas ajudam a tomar decisões de cor menos subjetivas. Avalie os rótulos cinza pequenos com o mesmo cuidado dado ao título principal.
Salve o componente corrigido no modelo reutilizável e teste-o de novo depois de mudanças importantes. Um bom modelo para celular faz mais do que evitar a rolagem horizontal: ele conserva a ordem de leitura, ajuda o cliente a entender a oferta e mantém uma próxima ação clara e utilizável nos ambientes de e-mail que você realmente atende.