Gradientbakgrunder i mejl: vad som fungerar i Gmail och Outlook

En gradientbakgrund i mejl fungerar när du bygger den i lager. Varje klient visar en solid bakgrundsfärg, många moderna klienter renderar också en CSS-gradient ovanpå den, och klassiska Outlook för Windows behöver antingen en VML-form eller en bild. Får du lagren rätt ser varje läsare något som ser genomtänkt ut, även om det inte är hela gradienten.

Mejl är inte en webbläsare. Varje inkorg tar bort, skriver om eller ignorerar olika CSS, och var och en uppdateras i sin egen takt. Den här guiden tar upp vad som är pålitligt, koden för reserverna och hur du håller texten läsbar när mörkt läge ingriper. För själva sidhuvudsgrafiken, se design av mejlhuvuden.

Vilka mejlklienter som visar CSS-gradienter

Stödet delas in i tre grupper. Klienter byggda på webbläsarmotorer tenderar att rendera CSS-gradienter troget. Klassiska Outlook för Windows använder Microsoft Word för att lägga ut mejl och ignorerar dem helt. Webbmejl och telefonappar ligger däremellan: vad de behåller beror på appen, kontotypen och hur CSS:en är skriven.

Reservstacken, i kod

Lägg gradienten på en tabellcell, eftersom tabelllayout är vad varje klient förstår. Ange färgen tre gånger, från äldst till nyast: attributet bgcolor, sedan background-color i den inbäddade stilen och sedan gradienten som background-image. En klient som inte förstår gradienten släpper den enda deklarationen och behåller färgen.

<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>

Välj reserven med omsorg. Det är den version många läsare faktiskt kommer att se, så den ska bära vit eller mörk text lika bra som gradienten gör. Att ta en färg från övergångens mitt fungerar oftast. Kontrollera den mot din textfärg med reglerna för färgkontrast, 4,5:1 för brödtext.

Gradienter i klassiska Outlook med VML

Klassiska Outlook på Windows förstår fortfarande VML, ett gammalt vektorformat från Microsoft. Insvept i en villkorlig kommentar som bara Outlook läser kan en VML-rektangel måla en tvåfärgsgradient bakom ditt innehåll. Alla andra hoppar över den.

<!--[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]-->

VML-gradienter är trubbiga: två färger, fasta storlekar och begränsad kontroll. Många team bestämmer sig för att mödan inte är värd det och låter klassiska Outlook visa den solida färgen. Det är ett alldeles utmärkt resultat om den solida färgen valdes väl.

Använda en bild i stället för en CSS-gradient

Den andra vägen är att exportera gradienten, ofta med rubriken inuti, som en bild. Varje klient som visar bilder visar den identiskt, och den kan bära korn, textur och bokstäver som CSS inte kan. Nackdelarna är att vissa läsare bara ser bilder efter att de tillåtit dem, att orden i bilden inte kan läsas av skärmläsare eller sökning och att filen ger extra vikt.

Mejlhuvud

1200 × 600

Mejlsignatur

600 × 200

En vanlig mellanväg: gradienten som bakgrundsbild på cellen, med en matchande solid färg bakom och rubriken som riktig text ovanpå. Om du exporterar en gradientbild, spara den som PNG eller en JPEG i hög kvalitet. Mjuka gradienter är exakt där komprimering syns som ränder; gradientbandning förklarar lösningen.

Gradienter i mejl och mörkt läge

Mörkt läge är där gradientmejl oftast går sönder. Vissa klienter lämnar dina färger ifred, vissa byter bara ljusa bakgrunder och mörk text, och vissa justerar allt. En gradient i background-image lämnas ofta orörd medan textfärger ändras, vilket kan ge mörk text på en mörk gradient.

1. 1

   Designa sidhuvudet mörkt först

   En djup gradient med ljus text är redan vad mörkt läge vill ha, så klienter har lite att ändra. Se design för mörkt läge för de bredare principerna.

2. 2

   Ange stöd för färgschema

   Lägg till <meta name="color-scheme" content="light dark"> och stilsätt en mörk version inuti @media (prefers-color-scheme: dark) för de klienter som respekterar det.

3. 3

   Lägg texten i live-HTML, inte bara i bilden

   Live-text kan justeras av klienten; ord som bakats in i en bild kan inte det, och de försvinner när bilder är avstängda.

4. 4

   Testa i de riktiga apparna

   Skicka testmejl till de klienter din lista faktiskt använder, i både ljust och mörkt läge, innan du skickar till alla.

Bakom allt detta ligger en princip från text på en gradient: orden ska läsas mot både den mörkaste och den ljusaste delen av bakgrunden, och mot reservfärgen. Om de gör det klarar mejlet sig vad inkorgen än bestämmer sig för att göra.