Kleurverloop in e-mail: wat werkt in Gmail en Outlook

Een kleurverloop in e-mail werkt als je het in lagen bouwt. Elke client toont een effen achtergrondkleur, veel moderne clients renderen daarboven ook een CSS-kleurverloop, en klassiek Outlook voor Windows heeft een VML-vorm of een afbeelding nodig. Zitten de lagen goed, dan ziet elke lezer iets dat bewust oogt, ook als het niet het volledige kleurverloop is.

E-mail is geen browser. Elke inbox verwijdert, herschrijft of negeert andere CSS, en elke inbox werkt zichzelf bij op een eigen tempo. Deze gids behandelt wat betrouwbaar is, de code voor de reserve, en hoe je tekst leesbaar houdt als de donkere modus ingrijpt. Voor het beeld van de header zelf, zie een e-mailheader ontwerpen.

Welke e-mailclients CSS-kleurverlopen tonen

De ondersteuning valt in drie groepen uiteen. Clients die op browserengines zijn gebouwd, geven CSS-kleurverlopen meestal getrouw weer. Klassiek Outlook voor Windows gebruikt Microsoft Word om e-mail op te maken en negeert ze volledig. Webmail en telefoonapps zitten ertussenin: wat ze behouden hangt af van de app, het soort account en hoe de CSS is geschreven.

De lagen met reserves, in code

Zet het kleurverloop op een tabelcel, want een tabellay-out is wat elke client begrijpt. Declareer de kleur drie keer, van oud naar nieuw: het attribuut bgcolor, dan background-color in de inline stijl, dan het kleurverloop als background-image. Een client die het kleurverloop niet begrijpt, laat die ene declaratie vallen en houdt de kleur.

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

Kies de reservekleur met zorg. Het is de versie die veel lezers echt te zien krijgen, dus hij moet witte of donkere tekst net zo goed dragen als het kleurverloop. Een kleur uit het midden van het verloop nemen werkt meestal. Leg hem naast je tekstkleur met de regels voor kleurcontrast, 4,5:1 voor lopende tekst.

Kleurverlopen in klassiek Outlook met VML

Klassiek Outlook op Windows begrijpt nog VML, een oud vectorformaat van Microsoft. Verpakt in een voorwaardelijke opmerking die alleen Outlook leest, kan een VML-rechthoek een kleurverloop van twee kleuren achter je inhoud schilderen. Alle andere clients slaan het over.

<!--[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-kleurverlopen zijn grof: twee kleuren, vaste maten en weinig controle. Veel teams besluiten dat het de moeite niet waard is en laten klassiek Outlook de effen kleur tonen. Dat is een prima uitkomst als de effen kleur goed is gekozen.

Een afbeelding gebruiken in plaats van een CSS-kleurverloop

De andere route is het kleurverloop exporteren als afbeelding, vaak met de kop erin. Elke client die afbeeldingen toont, toont hem identiek, en hij kan korrel, textuur en lettering dragen die CSS niet aankan. De nadelen: sommige lezers zien afbeeldingen pas nadat ze die toestaan, de woorden in de afbeelding zijn niet leesbaar voor schermlezers of zoekfuncties, en het bestand voegt gewicht toe.

E-mailheader

1200 × 600

E-mailhandtekening

600 × 200

Een veelgebruikte middenweg: het kleurverloop als achtergrondafbeelding op de cel, met een bijpassende effen kleur erachter en de kop als echte tekst erbovenop. Exporteer je een afbeelding van een kleurverloop, sla hem dan op als PNG of als JPEG van hoge kwaliteit. Juist bij zachte kleurverlopen toont compressie zich als strepen. Banding in kleurverlopen legt de oplossing uit.

Kleurverlopen in e-mail en de donkere modus

In de donkere modus gaan e-mails met een kleurverloop het vaakst stuk. Sommige clients laten je kleuren met rust, sommige wisselen alleen lichte achtergronden en donkere tekst om, en sommige passen alles aan. Een kleurverloop in background-image blijft vaak onaangeroerd terwijl tekstkleuren wel veranderen, waardoor donkere tekst op een donker kleurverloop kan komen te staan.

1. 1

   Ontwerp de header eerst donker

   Een diep kleurverloop met lichte letters is al wat de donkere modus wil, dus clients hebben weinig te veranderen. Zie ontwerpen voor de donkere modus voor de bredere principes.

2. 2

   Geef aan dat je kleurenschema’s ondersteunt

   Voeg <meta name="color-scheme" content="light dark"> toe en stijl een donkere versie binnen @media (prefers-color-scheme: dark) voor de clients die dat volgen.

3. 3

   Zet tekst in echte HTML, niet alleen in de afbeelding

   Echte tekst kan door de client worden aangepast. Woorden die in een afbeelding zijn gebakken niet, en ze verdwijnen als afbeeldingen uit staan.

4. 4

   Test in de echte apps

   Stuur testmails naar de clients die je lijst echt gebruikt, in zowel de lichte als de donkere instelling, voordat je naar iedereen verstuurt.

Achter dit alles zit één principe uit tekst op een kleurverloop zetten: de woorden moeten leesbaar zijn tegen het donkerste en het lichtste deel van de achtergrond, en tegen de reservekleur. Is dat zo, dan houdt de e-mail stand, wat de inbox ook besluit te doen.