# Design de cabeçalhos de email com gradientes [Canonical HTML page](https://gradiently.design/pt-pt/guide/email-header-design) Um cabeçalho de email é a primeira coisa que alguém vê depois do assunto, numa caixa de entrada que não controlas. Desenhá-lo bem implica planear desde o início para imagens desligadas, modo escuro e ecrãs pequenos. ## The short version - 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. 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](https://gradiently.design/pt-pt/guide/gradients-in-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 Formatos do cabeçalho e da assinatura de email. O cabeçalho partilha o tamanho com um banner de blogue, por isso um só design serve os dois. > **Mais curto costuma ser melhor** Num telemóvel, um cabeçalho alto pode ocupar o primeiro ecrã inteiro. Se o teu cabeçalho é sobretudo atmosfera, considera um corte mais curto para a primeira linha do email se ver sem deslocar. ## 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 | A maioria das marcas usa o híbrido: a imagem leva o aspeto, 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 por trás da imagem, por isso as imagens bloqueadas ainda mostram a cor da marca e o texto alternativo estilizado. A mensagem repete-se como texto real por baixo. ## 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 - Violeta profundo: `linear-gradient(135deg, #2a1b6b 0%, #7c3aed 100%)` - Verde-azulado profundo: `linear-gradient(135deg, #0f3d3e 0%, #1f8a78 100%)` - Baga a coral: `linear-gradient(135deg, #7a1f3d 0%, #e0555c 100%)` - Noite a 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 encadear à noite, saturados o bastante para parecerem vivos de dia. 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](https://gradiently.design/pt-pt/guide/dark-mode-design) 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](https://gradiently.design/pt-pt/guide/gradient-banding). 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 email 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 email largo a anunciar a abertura ao domingo sobre um gradiente quente 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 `bgcolor` na 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](https://gradiently.design/pt-pt/guide/launch-day-graphics). ## FAQ ### 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.