Gradientbakgrunn i e-post: hva som fungerer i Gmail og Outlook

En gradientbakgrunn i e-post fungerer når du bygger den i lag. Alle klienter viser en ensfarget bakgrunnsfarge, mange moderne klienter tegner også en CSS-gradient oppå, og klassisk Outlook for Windows trenger enten en VML-form eller et bilde. Får du lagene riktig, ser hver leser noe som virker bevisst, selv om det ikke er hele gradienten.

E-post er ikke en nettleser. Hver innboks fjerner, skriver om eller ignorerer ulik CSS, og hver oppdateres etter sin egen plan. Denne guiden går gjennom hva som er pålitelig, koden for reserveløsningen, og hvordan du holder teksten leselig når mørk modus griper inn. For selve grafikken i toppteksten, se design av e-posttopptekst.

Hvilke e-postklienter viser CSS-gradienter

Støtten faller i tre grupper. Klienter bygget på nettlesermotorer tegner som regel CSS-gradienter trofast. Klassisk Outlook for Windows bruker Microsoft Word til å sette opp e-post og ignorerer dem helt. Nettbasert e-post og mobilapper ligger imellom: hva de beholder, avhenger av appen, kontotypen og hvordan CSS-en er skrevet.

Reservestabelen, i kode

Legg gradienten på en tabellcelle, for tabelloppsett er det alle klienter forstår. Deklarer fargen tre ganger, fra eldst til nyest: attributtet bgcolor, så background-color i den innebygde stilen, så gradienten som background-image. En klient som ikke forstår gradienten, dropper den ene deklarasjonen og beholder fargen.

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

Velg reservefargen med omhu. Det er versjonen mange lesere faktisk kommer til å se, så den bør bære hvit eller mørk tekst like godt som gradienten gjør. Å ta en farge fra midten av overgangen fungerer som regel. Sjekk den mot tekstfargen din med reglene for fargekontrast, 4,5:1 for brødtekst.

Gradienter i klassisk Outlook med VML

Klassisk Outlook for Windows forstår fortsatt VML, et gammelt vektorformat fra Microsoft. Pakket inn i en betinget kommentar som bare Outlook leser, kan et VML-rektangel male en tofarget gradient bak innholdet ditt. Alle andre hopper over 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 er grove: to farger, faste størrelser og begrenset kontroll. Mange team kommer fram til at innsatsen ikke er verdt det, og lar klassisk Outlook vise den ensfargede fargen. Det er et helt greit resultat hvis den ensfargede fargen er godt valgt.

Bruk et bilde i stedet for en CSS-gradient

Den andre veien er å eksportere gradienten, ofte med overskriften inni, som et bilde. Alle klienter som viser bilder, viser det identisk, og det kan bære korn, tekstur og bokstavbehandling som CSS ikke kan. Ulempene er at noen lesere først ser bilder etter at de har tillatt dem, at ordene i bildet ikke kan leses av skjermlesere eller søk, og at filen gir mer vekt.

E-posttopptekst

1200 × 600

E-postsignatur

600 × 200

En vanlig mellomvei: gradienten som bakgrunnsbilde på cellen, med en tilsvarende ensfarget farge bak og overskriften som ekte tekst oppå. Eksporterer du et gradientbilde, lagrer du det som PNG eller JPEG i høy kvalitet. Myke gradienter er nettopp der komprimering vises som striper; banding i gradienter forklarer løsningen.

Gradienter i e-post og mørk modus

Mørk modus er der gradienter i e-post oftest går i stykker. Noen klienter lar fargene dine være, noen bytter bare lyse bakgrunner og mørk tekst, og noen justerer alt. En gradient i background-image blir ofte stående urørt mens tekstfargene endres, og det kan gi mørk tekst på en mørk gradient.

1. 1

   Design toppteksten mørk først

   En dyp gradient med lys skrift er allerede det mørk modus vil ha, så klientene har lite å endre. Se design for mørk modus for de bredere prinsippene.

2. 2

   Deklarer støtte for color-scheme

   Legg til <meta name="color-scheme" content="light dark">, og stil en mørk versjon inni @media (prefers-color-scheme: dark) for klientene som respekterer det.

3. 3

   Ha teksten i levende HTML, ikke bare i bildet

   Levende tekst kan justeres av klienten; ord som er bakt inn i et bilde, kan ikke det, og de forsvinner når bilder er slått av.

4. 4

   Test i de ekte appene

   Send test-e-poster til klientene listen din faktisk bruker, i både lyse og mørke innstillinger, før du sender til alle.

Bak alt dette ligger ett prinsipp fra tekst på en gradient: ordene bør kunne leses mot den mørkeste og den lyseste delen av bakgrunnen, og mot reservefargen. Gjør de det, holder e-posten uansett hva innboksen bestemmer seg for.