Design av mejlhuvud med gradienter

Bra design av mejlhuvud börjar med inkorgens begränsningar. Gör huvudbilden 1200 gånger 600 pixlar och visa den i 600 pixlars bredd, så att den blir skarp på skärmar med hög täthet. Eftersom mejlklienter hanterar CSS-gradienter ojämnt lägger du gradienten inuti bilden och sätter en matchande enfärgad bakgrundsfärg bakom den. Lägg till beskrivande alt-text för läsare som har bilder avstängda, kontrollera i mörkt läge och behåll viktiga ord som levande text under bilden.

Den här guiden tar upp storlekar, bild eller CSS, mörkt läge, vikt och alt-text, med HTML du kan anpassa. För den tekniska sidan av gradienter i HTML-mejl, se gradienter i mejl.

Storlek på mejlhuvud

De flesta mejllayouter är omkring 600 pixlar breda, en bredd som ryms bekvämt i läsrutor på datorer och skalas ner på telefoner. Exportera huvuden i dubbla den storleken, 1200 gånger 600, och sätt bildens visningsbredd till 600 i HTML. Formen 2:1 lämnar plats för en kort rubrik eller logotyp utan att trycka ner innehållet under första skärmen på telefoner.

Mejlhuvud 1200×600

1200 × 600

Mejlsignatur 600×200

600 × 200

Bloggbanner 1200×600

1200 × 600

Bild eller CSS: så bygger du ett gradientmejlhuvud

På webben är en gradient en rad CSS. I mejl är den mindre pålitlig: vissa klienter renderar background-image: linear-gradient(...), andra ignorerar den. De praktiska alternativen finns nedan.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#2a1b6b"
        style="background-color:#2a1b6b; background-image:linear-gradient(135deg,#2a1b6b,#7c3aed);">
      <img src="https://example.com/header-1200x600.jpg"
           width="600" height="300"
           alt="Autumn edit: new colours for the season"
           style="display:block; width:100%; max-width:600px; height:auto; border:0;
                  color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
    </td>
  </tr>
  <tr>
    <td style="padding:24px; font-family:Arial, sans-serif; font-size:18px; line-height:1.5; color:#1c1733;">
      Our autumn colours are here. See the new range this weekend.
    </td>
  </tr>
</table>

Designa mejlhuvuden för mörkt läge

I mörkt läge ändrar många mejlappar färgerna i mejlet runt ditt huvud: vita bakgrunder kan bli mörka och mörk text ljus. Bilder lämnas oftast som de är. Det ger två klassiska problem: ett huvud med vit bakgrund som lyser som en ljuslåda i en mörk inkorg, och en genomskinlig logotyp i mörk färg som försvinner mot en nymörk bakgrund.

Gradienter från mellanton till djupton som dessa är det säkraste valet. De bländar inte i en mörk inkorg, och vit text i dem förblir läsbar i båda lägena. Design för mörkt läge tar upp de bredare principerna.

Vikt, alt-text och de ord som räknas

Håll huvudbilderna lätta: exportera JPEG för fotografiska eller korniga gradienter och PNG för platt grafik med text, och komprimera dem. Stora släta gradienter kan få band när de komprimeras hårt, och lite korn i designen hjälper dem att överleva. Se gradientband.

Skriv alt-text som säger vad huvudet säger, inte hur det ser ut: Höstens urval: nya färger för säsongen, inte lila banner. Formatera bildens typsnittsegenskaper så att alt-texten visas i läsbar storlek och färg på reservbakgrunden när bilder är avstängda.

Checklista för mejlhuvud

1. 1

   Designa i 1200 gånger 600

   Visa i 600 bredd. Håll orden tillräckligt stora för att kunna läsas på en telefon i den storleken.

2. 2

   Ge det en egen bakgrund

   Inget rent vitt och ingen genomskinlighet vid kanterna, så att mörkt läge inte kan göra det till en ljuslåda.

3. 3

   Sätt en reservfärg

   Ett bgcolor på cellen i en färg från gradienten, så att blockerade bilder ändå ser ut som varumärket.

4. 4

   Skriv riktig alt-text

   Budskapet, inte en beskrivning av bilden.

5. 5

   Upprepa budskapet som levande text

   Datum, erbjudanden och uppmaningar som HTML-text under huvudet.

6. 6

   Testa i båda lägena

   Skicka testmejl till de appar dina läsare använder, i ljust och mörkt läge, med bilder på och av.

I Gradiently finns storlekarna Mejlhuvud (1200 gånger 600) och signatur (600 gånger 200) inbyggda, och kopiera till storlekar gör ett färdigt socialt inlägg till ett matchande huvud för ditt mejl på lanseringsdagen.