A versão curta
- Uma imagem de cabeçalho de email padrão tem 1200 por 600 píxeis, mostrada com 600 píxeis de largura para se manter nítida em ecrãs de alta densidade.
- O suporte para gradientes CSS varia entre clientes de email, por isso um cabeçalho em gradiente costuma ser uma imagem, com uma cor de fundo sólida definida como recurso.
- Alguns clientes de email bloqueiam imagens por defeito, por isso cada cabeçalho precisa de texto alternativo descritivo e de uma cor de fundo por trás.
- O modo escuro pode mudar as cores à volta de um cabeçalho mas normalmente não dentro da imagem, por isso desenha os cabeçalhos com o seu próprio fundo e testa nos dois modos.
- Põe as palavras importantes, como ofertas, datas e apelos à ação, em texto HTML real por baixo do cabeçalho e não só dentro da imagem.
Nesta página
Um bom design de cabeçalhos de email começa pelas limitações da caixa de entrada. Faz a imagem do cabeçalho com 1200 por 600 píxeis e mostra-a com 600 píxeis de largura, para ficar nítida em ecrãs de alta densidade. Como os clientes de email tratam os gradientes CSS de forma inconsistente, põe o gradiente dentro da imagem e define uma cor de fundo sólida a condizer por trás. Junta texto alternativo descritivo para leitores com imagens desligadas, verifica no modo escuro e mantém as palavras importantes como texto real por baixo da imagem.
Este guia trata de tamanhos, imagem contra CSS, modo escuro, peso e texto alternativo, com HTML que podes adaptar. Para o lado técnico dos gradientes em email HTML, vê os gradientes em email.
Tamanho do cabeçalho de email
A maioria dos layouts de email tem cerca de 600 píxeis de largura, uma largura que cabe bem nos painéis de leitura de computador e reduz nos telemóveis. Exporta os cabeçalhos ao dobro, 1200 por 600, e define a largura de apresentação da imagem como 600 no HTML. A proporção 2:1 deixa espaço para um título curto ou um logótipo sem empurrar o conteúdo para baixo da dobra nos telemóveis.
Cabeçalho de email 1200×600
1200 × 600
Assinatura de email 600×200
600 × 200
Banner de blogue 1200×600
1200 × 600
Imagem ou CSS: como construir um cabeçalho de email em gradiente
Na web, um gradiente é uma linha de CSS. No email é menos fiável: alguns clientes desenham background-image: linear-gradient(...), outros ignoram-no. As opções práticas estão abaixo.
| Abordagem | Como funciona | Compromisso |
|---|---|---|
| Cabeçalho em imagem | O gradiente e qualquer ilustração cozidos numa imagem de 1200×600 | Parece igual em todo o lado onde as imagens carregam; as palavras dentro dela desaparecem com as imagens desligadas |
| Gradiente CSS e texto real | Uma célula de tabela com fundo em gradiente e texto HTML por cima | Leve e acessível; recua para uma cor sólida onde os gradientes não são suportados |
| Híbrido | Uma imagem em gradiente para a atmosfera, texto real para a mensagem, por baixo ou sobre um fundo sólido de recurso | O mais robusto: sempre legível, normalmente 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>Desenhar cabeçalhos de email para o modo escuro
No modo escuro, muitas apps de email mudam as cores do email à volta do teu cabeçalho: os fundos brancos podem escurecer e o texto escuro clarear. As imagens costumam ficar como estão. Isso cria dois problemas clássicos: um cabeçalho com fundo branco a brilhar como uma caixa de luz numa caixa de entrada escura, e um logótipo transparente em tinta escura a desaparecer contra um fundo que passou a escuro.
Evita
- Cabeçalhos com fundo branco puro
- Logótipos PNG transparentes em tinta escura
- Palavras importantes só dentro da imagem
- Texto fino e claro sobre um gradiente pálido
Faz
- Um cabeçalho com o seu próprio fundo médio ou profundo
- Logótipos sobre uma forma sólida, ou uma versão clara e uma escura
- A mensagem repetida como texto real
- Contraste forte dentro da própria imagem
Gradientes de médios a profundos como estes são a escolha mais segura. Não encadeiam 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
Mantém as imagens do cabeçalho leves: exporta em JPEG para gradientes fotográficos ou com grão e em PNG para gráficos lisos com texto, e comprime-as. Os gradientes grandes e suaves podem criar faixas quando muito comprimidos, e um pouco de grão no design ajuda-os a sobreviver; vê as faixas em gradientes.
Escreve texto alternativo que diga o que o cabeçalho diz, não o que parece: Edição de outono: novas cores para a estação, não banner roxo. Define as propriedades de fonte da imagem para o texto alternativo aparecer num tamanho e cor legíveis sobre o fundo de recurso quando as imagens estão 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 se repetir como texto real por baixo.
Lista de verificação do cabeçalho de email
- 1
Desenha em 1200 por 600
Mostra com 600 de largura. Mantém as palavras grandes o bastante para se lerem num telemóvel a esse tamanho.
- 2
Dá-lhe o seu próprio fundo
Sem branco puro e sem transparência nas margens, para o modo escuro não o transformar numa caixa de luz.
- 3
Define uma cor de recurso
Um
bgcolorna célula com uma cor do gradiente, para as imagens bloqueadas continuarem a parecer da marca. - 4
Escreve texto alternativo a sério
A mensagem, não uma descrição da imagem.
- 5
Repete a mensagem em texto real
Datas, ofertas e apelos à ação como texto HTML por baixo do cabeçalho.
- 6
Testa nos dois modos
Envia emails de teste para as apps que os teus leitores usam, em modo claro e escuro, com imagens ligadas e desligadas.
Na Gradiently, os tamanhos de Cabeçalho de email (1200 por 600) e de assinatura (600 por 200) já vêm incluídos, e copiar para tamanhos transforma uma publicação social acabada num cabeçalho a condizer para o teu email do dia de lançamento.
Perguntas frequentes
Que tamanho deve ter um cabeçalho de email?
1200 por 600 píxeis, mostrado com 600 píxeis de largura no HTML do email. A resolução dupla mantém-no nítido em ecrãs de alta densidade.
Os gradientes CSS funcionam em email?
Em alguns clientes de email, não em todos. Põe o gradiente numa imagem ou usa CSS com um bgcolor sólido de recurso, e testa nas apps que os teus leitores usam.
Como faço um cabeçalho de email funcionar no modo escuro?
Dá ao cabeçalho o seu próprio fundo médio ou profundo em vez de branco ou transparente, mantém um contraste forte dentro da imagem e repete as palavras importantes como texto real.
O que deve dizer o texto alternativo de um cabeçalho de email?
O que o cabeçalho diz, como o título ou a oferta, para os leitores com imagens bloqueadas receberem na mesma a mensagem.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
