Fundos em gradiente no email: o que funciona no Gmail e no Outlook

Um fundo em gradiente no email funciona quando o constróis em camadas. Todos os clientes mostram uma cor de fundo lisa, muitos clientes modernos renderizam também um gradiente CSS por cima, e o Outlook clássico para Windows precisa de uma forma VML ou de uma imagem. Acerta nas camadas e cada leitor vê algo que parece intencional, mesmo que não seja o gradiente completo.

O email não é um navegador. Cada caixa de correio remove, reescreve ou ignora CSS diferente, e cada uma se atualiza ao seu ritmo. Este guia trata do que é fiável, do código de alternativa e de como manter o texto legível quando o modo escuro entra em ação. Para a arte do cabeçalho em si, vê design de cabeçalhos de email.

Que clientes de email mostram gradientes CSS

O suporte divide-se em três grupos. Os clientes construídos sobre motores de navegador tendem a renderizar os gradientes CSS com fidelidade. O Outlook clássico para Windows usa o Microsoft Word para compor o email e ignora-os por completo. O webmail e as aplicações de telemóvel ficam no meio: o que mantêm depende da aplicação, do tipo de conta e da forma como o CSS está escrito.

A pilha de alternativas, em código

Põe o gradiente numa célula de tabela, porque a composição em tabelas é o que todos os clientes entendem. Declara a cor três vezes, da mais antiga para a mais recente: o atributo bgcolor, depois background-color no estilo em linha, depois o gradiente como background-image. Um cliente que não entende o gradiente descarta essa declaração e mantém a cor.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td class="hero" bgcolor="#4c1d95"
        style="background-color:#4c1d95;
               background-image:linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #db2777 100%);
               padding:48px 32px;">
      <h1 style="margin:0; font-family:Arial, Helvetica, sans-serif;
                 font-size:32px; line-height:40px; color:#ffffff;">
        The autumn edit is here
      </h1>
    </td>
  </tr>
</table>

Escolhe a alternativa com cuidado. É a versão que muitos leitores vão realmente ver, por isso deve suportar texto branco ou escuro tão bem quanto o gradiente. Tirar uma cor do meio da transição costuma funcionar. Verifica-a com a cor do texto segundo as regras de contraste de cor: 4,5:1 para o texto corrido.

Gradientes no Outlook clássico com VML

O Outlook clássico para Windows ainda entende VML, um antigo formato vetorial da Microsoft. Dentro de um comentário condicional que só o Outlook lê, um retângulo VML pode pintar um gradiente de duas cores por trás do teu conteúdo. Todos os outros o ignoram.

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
        style="width:600px; height:240px;">
  <v:fill type="gradient" color="#1e1b4b" color2="#db2777" angle="135" />
  <v:textbox inset="0,0,0,0">
<![endif]-->

  <!-- your table cell content goes here -->

<!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->

Os gradientes VML são rudimentares: duas cores, tamanhos fixos e pouco controlo. Muitas equipas decidem que não vale o esforço e deixam o Outlook clássico mostrar a cor lisa. É um resultado perfeitamente aceitável se a cor lisa tiver sido bem escolhida.

Usar uma imagem em vez de um gradiente CSS

O outro caminho é exportar o gradiente, muitas vezes com o título incluído, como imagem. Todos os clientes que mostram imagens vão mostrá-la de forma idêntica, e pode ter grão, textura e letras que o CSS não consegue. As contrapartidas são que alguns leitores só veem imagens depois de as autorizarem, as palavras na imagem não podem ser lidas por leitores de ecrã nem pela pesquisa, e o ficheiro acrescenta peso.

Cabeçalho de email

1200 × 600

Assinatura de email

600 × 200

Um meio-termo comum: o gradiente como imagem de fundo da célula, com uma cor lisa a condizer por trás e o título como texto real por cima. Se exportares uma imagem com gradiente, guarda-a em PNG ou JPEG de alta qualidade. Os gradientes suaves são exatamente onde a compressão aparece em riscas; o banding em gradientes explica a solução.

Gradientes no email e modo escuro

O modo escuro é onde os emails com gradiente mais vezes se estragam. Alguns clientes deixam as tuas cores em paz, alguns só trocam fundos claros e texto escuro, e alguns ajustam tudo. Um gradiente em background-image fica muitas vezes intacto enquanto as cores do texto são alteradas, o que pode pôr texto escuro sobre um gradiente escuro.

1. 1

   Desenha primeiro o cabeçalho escuro

   Um gradiente profundo com texto claro já é o que o modo escuro quer, por isso os clientes têm pouco para mudar. Vê design para modo escuro para os princípios gerais.

2. 2

   Declara o suporte a esquemas de cor

   Acrescenta <meta name="color-scheme" content="light dark"> e estiliza uma versão escura dentro de @media (prefers-color-scheme: dark) para os clientes que o respeitam.

3. 3

   Põe o texto em HTML vivo, não só na imagem

   O texto vivo pode ser ajustado pelo cliente; as palavras gravadas numa imagem não podem, e desaparecem quando as imagens estão desligadas.

4. 4

   Testa nas aplicações reais

   Envia emails de teste para os clientes que a tua lista usa de facto, com as definições clara e escura, antes de enviares para toda a gente.

Por trás de tudo isto está um princípio de pôr texto sobre um gradiente: as palavras devem ler-se sobre a parte mais escura e a parte mais clara do fundo, e sobre a cor de alternativa. Se assim for, o email aguenta-se, decida a caixa de correio o que decidir.