E-Mail-Header gestalten mit Farbverläufen

Gutes E-Mail-Header-Design beginnt bei den Einschränkungen des Postfachs. Mache das Headerbild 1200 mal 600 Pixel groß und zeige es in 600 Pixeln Breite an, damit es auf Bildschirmen mit hoher Pixeldichte scharf ist. Da E-Mail-Clients CSS-Farbverläufe uneinheitlich behandeln, lege den Farbverlauf ins Bild und setze dahinter eine passende einfarbige Hintergrundfarbe. Füge einen beschreibenden Alt-Text für Lesende ohne Bilder hinzu, prüfe es im Dark Mode und halte wichtige Wörter als Live-Text unter dem Bild.

Dieser Leitfaden behandelt Größen, Bild oder CSS, Dark Mode, Dateigewicht und Alt-Text, mit HTML, das du anpassen kannst. Zur technischen Seite von Farbverläufen in HTML-E-Mails siehe Farbverläufe in E-Mails.

Größe des E-Mail-Headers

Die meisten E-Mail-Layouts sind etwa 600 Pixel breit, eine Breite, die bequem in Lesebereiche am Desktop passt und auf Handys herunterskaliert. Exportiere Header in doppelter Größe, 1200 mal 600, und setze die Anzeigebreite des Bildes im HTML auf 600. Die 2:1-Form lässt Platz für eine kurze Überschrift oder ein Logo, ohne den Inhalt auf Handys unter den sichtbaren Bereich zu schieben.

E-Mail-Header 1200×600

1200 × 600

E-Mail-Signatur 600×200

600 × 200

Blog-Banner 1200×600

1200 × 600

Bild oder CSS: So baust du einen E-Mail-Header mit Farbverlauf

Im Web ist ein Farbverlauf eine Zeile CSS. In E-Mails ist das weniger verlässlich: Manche Clients rendern background-image: linear-gradient(...), andere ignorieren es. Die praktischen Optionen stehen unten.

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

E-Mail-Header für den Dark Mode gestalten

Im Dark Mode ändern viele E-Mail-Apps die Farben der E-Mail rund um deinen Header: Weiße Hintergründe werden womöglich dunkel und dunkler Text hell. Bilder bleiben meist unverändert. Das schafft zwei klassische Probleme: einen Header mit weißem Hintergrund, der wie ein Leuchtkasten in einem dunklen Postfach glüht, und ein transparentes Logo in dunkler Tinte, das vor einem neu dunklen Hintergrund verschwindet.

Mittlere bis tiefe Farbverläufe wie diese sind die sicherste Wahl. Sie blenden nicht in einem dunklen Postfach, und weißer Text darin bleibt in beiden Modi lesbar. Dark-Mode-Design behandelt die weiteren Prinzipien.

Dateigewicht, Alt-Text und die Wörter, auf die es ankommt

Halte Headerbilder leicht: Exportiere JPEG für fotografische oder körnige Farbverläufe und PNG für flache Grafiken mit Text und komprimiere sie. Große sanfte Farbverläufe können bei starker Kompression Banding zeigen, und etwas Körnung im Design hilft ihnen zu überleben, siehe Banding im Farbverlauf.

Schreibe Alt-Text, der sagt, was der Header sagt, nicht wie er aussieht: Herbst-Edit: neue Farben für die Saison, nicht lila Banner. Style die Schrifteigenschaften des Bildes so, dass der Alt-Text bei blockierten Bildern in lesbarer Größe und Farbe auf dem Fallback-Hintergrund erscheint.

Checkliste für E-Mail-Header

1. 1

   In 1200 mal 600 gestalten

   In 600 Breite anzeigen. Halte Wörter groß genug, um sie in dieser Größe auf dem Handy zu lesen.

2. 2

   Einen eigenen Hintergrund geben

   Kein reines Weiß und keine Transparenz an den Rändern, damit der Dark Mode ihn nicht in einen Leuchtkasten verwandeln kann.

3. 3

   Eine Fallback-Farbe setzen

   Ein bgcolor auf der Zelle in einer Farbe aus dem Farbverlauf, damit blockierte Bilder trotzdem nach Marke aussehen.

4. 4

   Echten Alt-Text schreiben

   Die Botschaft, nicht eine Beschreibung des Bildes.

5. 5

   Die Botschaft live wiederholen

   Daten, Angebote und Handlungsaufforderungen als HTML-Text unter dem Header.

6. 6

   In beiden Modi testen

   Sende Test-Mails an die Apps, die deine Lesenden nutzen, im hellen und dunklen Modus, mit Bildern an und aus.

In Gradiently sind die Größen E-Mail-Header (1200 mal 600) und Signatur (600 mal 200) eingebaut, und Auf Größen kopieren macht aus einem fertigen Social-Post einen passenden Header für deine E-Mail zum Launch-Tag.