# Design de cabeçalho de e-mail com gradientes [Canonical HTML page](https://gradiently.design/pt-br/guide/email-header-design) O cabeçalho é a primeira coisa que alguém vê depois do assunto, numa caixa de entrada que você não controla. Desenhá-lo bem é planejar desde o início para imagens desligadas, modo escuro e telas pequenas. ## The short version - 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. 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](https://gradiently.design/pt-br/guide/gradients-in-email). ## 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 Formatos de cabeçalho e de assinatura de e-mail. O cabeçalho tem o mesmo tamanho de um banner de blog, então um único design serve aos dois. > **Mais curto costuma ser melhor** Num celular, um cabeçalho alto pode ocupar a primeira tela inteira. Se o seu cabeçalho é sobretudo atmosfera, considere um recorte mais curto para que a primeira linha do e-mail apareça sem rolar. ## 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 | A maioria das marcas usa o híbrido: a imagem leva o visual, o HTML leva as palavras. ```html
Autumn edit: new colours for the season
Our autumn colours are here. See the new range this weekend.
``` Um cabeçalho híbrido. A célula tem uma cor sólida e um gradiente atrás da imagem, então mesmo com as imagens bloqueadas aparecem a cor da marca e o texto alternativo estilizado. A mensagem é repetida como texto vivo abaixo. ## 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 - Violeta profundo: `linear-gradient(135deg, #2a1b6b 0%, #7c3aed 100%)` - Verde-azulado profundo: `linear-gradient(135deg, #0f3d3e 0%, #1f8a78 100%)` - Amora ao coral: `linear-gradient(135deg, #7a1f3d 0%, #e0555c 100%)` - Noite ao azul: `linear-gradient(135deg, #1e2a52 0%, #3f6fd8 100%)` Gradientes de cabeçalho que ficam bem em caixas de entrada claras e escuras: profundos o bastante para não ofuscar à noite, saturados o bastante para parecerem vivos de dia. 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](https://gradiently.design/pt-br/guide/dark-mode-design) 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](https://gradiently.design/pt-br/guide/gradient-banding). 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 e-mail largo com o título de uma newsletter e o número da edição sobre um gradiente profundo Um cabeçalho de newsletter em 1200 por 600: título, número da edição e uma linha. Um cabeçalho de e-mail largo anunciando a abertura aos domingos sobre um gradiente quente 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 `bgcolor` na 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](https://gradiently.design/pt-br/guide/launch-day-graphics). ## FAQ ### 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.