Resumindo
- A imagem de cabeçalho padrão de um e-mail tem 1200 por 600 pixels, exibida em 600 pixels de largura para ficar nítida em telas de alta densidade.
- O suporte a gradientes CSS varia entre os clientes de e-mail, então um cabeçalho com gradiente costuma ser uma imagem, com uma cor de fundo sólida como reserva.
- Alguns clientes de e-mail bloqueiam imagens por padrão, então todo cabeçalho precisa de um texto alternativo descritivo e de uma cor de fundo atrás dele.
- O modo escuro pode mudar as cores ao redor de um cabeçalho, mas em geral não dentro da imagem, então crie cabeçalhos com fundo próprio e teste nos dois modos.
- Coloque as palavras importantes, como ofertas, datas e chamadas para ação, em texto HTML vivo abaixo do cabeçalho, e não só dentro da imagem.
Nesta página
Um bom design de cabeçalho de e-mail começa pelas restrições da caixa de entrada. Faça a imagem do cabeçalho com 1200 por 600 pixels e exiba-a em 600 pixels de largura, para que fique nítida em telas de alta densidade. Como os clientes de e-mail tratam os gradientes CSS de modo inconsistente, ponha o gradiente dentro da imagem e defina atrás dela uma cor de fundo sólida combinando. Acrescente um texto alternativo descritivo para quem está com as imagens desligadas, confira no modo escuro e mantenha as palavras importantes como texto vivo abaixo da imagem.
Este guia trata de tamanhos, imagem contra CSS, modo escuro, peso e texto alternativo, com HTML que você pode adaptar. Para o lado técnico dos gradientes em e-mail HTML, veja gradientes em e-mail.
Tamanho do cabeçalho de e-mail
A maioria dos layouts de e-mail tem cerca de 600 pixels de largura, medida que cabe com folga nos painéis de leitura do desktop e reduz bem nos celulares. Exporte os cabeçalhos no dobro disso, 1200 por 600, e defina a largura de exibição da imagem em 600 no HTML. O formato 2:1 deixa espaço para um título curto ou um logotipo sem empurrar o conteúdo para baixo da dobra nos celulares.
Cabeçalho de e-mail 1200×600
1200 × 600
Assinatura de e-mail 600×200
600 × 200
Banner de blog 1200×600
1200 × 600
Imagem ou CSS: como construir um cabeçalho de e-mail com gradiente
Na web, um gradiente é uma linha de CSS. No e-mail ele é menos confiável: alguns clientes renderizam background-image: linear-gradient(...), outros ignoram. As opções práticas estão abaixo.
| Abordagem | Como funciona | Contrapartida |
|---|---|---|
| Cabeçalho em imagem | O gradiente e qualquer arte embutidos numa imagem de 1200×600 | Fica igual em todo lugar onde as imagens carregam; as palavras dentro dela somem com as imagens desligadas |
| Gradiente CSS e texto vivo | Uma célula de tabela com fundo em gradiente e texto HTML por cima | Leve e acessível; volta a uma cor sólida onde não há suporte a gradientes |
| Híbrido | Uma imagem de gradiente para a atmosfera e texto vivo para a mensagem, abaixo ou sobre uma reserva sólida | O mais robusto: sempre legível, em geral bonito |
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#2a1b6b"
style="background-color:#2a1b6b; background-image:linear-gradient(135deg,#2a1b6b,#7c3aed);">
<img src="https://example.com/header-1200x600.jpg"
width="600" height="300"
alt="Autumn edit: new colours for the season"
style="display:block; width:100%; max-width:600px; height:auto; border:0;
color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
</td>
</tr>
<tr>
<td style="padding:24px; font-family:Arial, sans-serif; font-size:18px; line-height:1.5; color:#1c1733;">
Our autumn colours are here. See the new range this weekend.
</td>
</tr>
</table>Desenhando cabeçalhos de e-mail para o modo escuro
No modo escuro, muitos apps de e-mail mudam as cores do e-mail ao redor do seu cabeçalho: fundos brancos podem escurecer e texto escuro pode clarear. As imagens costumam ficar como estão. Isso cria dois problemas clássicos: um cabeçalho com fundo branco brilhando como uma caixa de luz numa caixa de entrada escura e um logotipo transparente em tinta escura sumindo contra um fundo que acabou de escurecer.
Evite
- Cabeçalhos com fundo branco puro
- Logotipos em PNG transparente com tinta escura
- Palavras importantes só dentro da imagem
- Texto fino e claro sobre um gradiente pálido
Faça
- Um cabeçalho com fundo próprio, médio ou profundo
- Logotipos sobre uma forma sólida, ou uma versão clara e uma escura
- A mensagem repetida como texto vivo
- Contraste forte dentro da própria imagem
Gradientes de tom médio a profundo como estes são a escolha mais segura. Não ofuscam numa caixa de entrada escura, e o texto branco dentro deles continua legível nos dois modos. O design em modo escuro trata dos princípios mais amplos.
Peso, texto alternativo e as palavras que importam
Mantenha as imagens do cabeçalho leves: exporte em JPEG para gradientes fotográficos ou com grão e em PNG para gráficos chapados com texto, e comprima-as. Grandes gradientes lisos podem fazer banding quando muito comprimidos, e um pouco de grão no design ajuda a sobreviver; veja o banding em gradientes.
Escreva um texto alternativo que diga o que o cabeçalho diz, não como ele parece: Edição de outono: cores novas para a estação, e não banner roxo. Estilize as propriedades de fonte da imagem para que o texto alternativo apareça num tamanho e numa cor legíveis sobre o fundo de reserva quando as imagens estiverem desligadas.
Um cabeçalho de newsletter em 1200 por 600: título, número da edição e uma linha.
Um cabeçalho de anúncio: a mensagem é curta o bastante para ser repetida como texto vivo abaixo.
Checklist do cabeçalho de e-mail
- 1
Desenhe em 1200 por 600
Exiba em 600 de largura. Mantenha as palavras grandes o bastante para serem lidas num celular nesse tamanho.
- 2
Dê a ele um fundo próprio
Sem branco puro e sem transparência nas bordas, para que o modo escuro não o transforme numa caixa de luz.
- 3
Defina uma cor de reserva
Um
bgcolorna célula, numa cor do gradiente, para que mesmo com as imagens bloqueadas ele pareça da marca. - 4
Escreva um texto alternativo de verdade
A mensagem, não uma descrição da imagem.
- 5
Repita a mensagem em texto vivo
Datas, ofertas e chamadas para ação como texto HTML abaixo do cabeçalho.
- 6
Teste nos dois modos
Envie e-mails de teste para os apps que os seus leitores usam, nos modos claro e escuro, com as imagens ligadas e desligadas.
No Gradiently, os tamanhos de cabeçalho de e-mail (1200 por 600) e de assinatura (600 por 200) já vêm prontos, e copiar para tamanhos transforma um post social finalizado num cabeçalho combinando para o seu e-mail do dia de lançamento.
Perguntas frequentes
Qual deve ser o tamanho de um cabeçalho de e-mail?
1200 por 600 pixels, exibidos em 600 pixels de largura no HTML do e-mail. O dobro da resolução o mantém nítido em telas de alta densidade.
Gradientes CSS funcionam em e-mail?
Em alguns clientes de e-mail, não em todos. Ponha o gradiente numa imagem ou use CSS com uma reserva sólida em bgcolor e teste nos apps que os seus leitores usam.
Como faço um cabeçalho de e-mail funcionar no modo escuro?
Dê ao cabeçalho um fundo próprio, médio ou profundo, em vez de branco ou transparente, mantenha contraste forte dentro da imagem e repita as palavras importantes como texto vivo.
O que o texto alternativo de um cabeçalho de e-mail deve dizer?
O que o cabeçalho diz, como o título ou a oferta, para que quem está com as imagens bloqueadas receba a mensagem.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
