# E-Mail-Header gestalten mit Farbverläufen [Canonical HTML page](https://gradiently.design/de/guide/email-header-design) Ein E-Mail-Header ist das Erste, was jemand nach der Betreffzeile sieht, in einem Postfach, das du nicht kontrollierst. Ihn gut zu gestalten heißt, von Anfang an mit blockierten Bildern, Dark Mode und kleinen Bildschirmen zu planen. ## The short version - Ein Standard-Headerbild für E-Mails hat 1200 mal 600 Pixel und wird in 600 Pixeln Breite angezeigt, damit es auf Bildschirmen mit hoher Pixeldichte scharf bleibt. - Die Unterstützung für CSS-Farbverläufe variiert zwischen E-Mail-Clients, deshalb ist ein Farbverlauf-Header meist ein Bild, mit einer einfarbigen Hintergrundfarbe als Fallback. - Manche E-Mail-Clients blockieren Bilder standardmäßig, deshalb braucht jeder Header einen beschreibenden Alt-Text und eine Hintergrundfarbe dahinter. - Der Dark Mode kann die Farben um einen Header ändern, meist aber nicht im Bild, gestalte Header also mit eigenem Hintergrund und teste in beiden Modi. - Setze wichtige Wörter wie Angebote, Daten und Handlungsaufforderungen als Live-HTML-Text unter den Header, nicht nur ins Bild. 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](https://gradiently.design/de/guide/gradients-in-email). ## 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 Formen von E-Mail-Header und Signatur. Der Header teilt seine Größe mit einem Blog-Banner, ein Design kann also beides bedienen. > **Kürzer ist oft besser** Auf dem Handy kann ein hoher Header den ganzen ersten Bildschirm füllen. Besteht dein Header überwiegend aus Atmosphäre, erwäge einen kürzeren Zuschnitt, damit die erste Zeile der E-Mail ohne Scrollen sichtbar ist. ## 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. | Ansatz | So funktioniert es | Abwägung | | --- | --- | --- | | Bild-Header | Farbverlauf und Grafik in einem 1200×600-Bild eingebacken | Sieht überall gleich aus, wo Bilder laden, Wörter darin verschwinden bei blockierten Bildern | | CSS-Farbverlauf und Live-Text | Eine Tabellenzelle mit Farbverlauf-Hintergrund und HTML-Text darüber | Leicht und barrierefrei, fällt dort auf eine einfarbige Fläche zurück, wo Farbverläufe nicht unterstützt werden | | Hybrid | Ein Farbverlauf-Bild für die Atmosphäre, Live-Text für die Botschaft darunter oder auf einem einfarbigen Fallback | Am robustesten: immer lesbar, meist schön | Die meisten Marken nutzen den Hybrid: Das Bild trägt den Look, das HTML trägt die Wörter. ```html
Autumn edit: new colours for the season
Our autumn colours are here. See the new range this weekend.
``` Ein Hybrid-Header. Die Zelle hat eine einfarbige Fläche und einen Farbverlauf hinter dem Bild, sodass blockierte Bilder trotzdem Markenfarbe und gestylten Alt-Text zeigen. Die Botschaft wird darunter als Live-Text wiederholt. ## 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. ### Vermeide - Header mit rein weißem Hintergrund - Transparente PNG-Logos in dunkler Tinte - Wichtige Wörter nur im Bild - Dünne helle Schrift auf einem blassen Farbverlauf ### Besser - Ein Header mit eigenem mittlerem oder tiefem Hintergrund - Logos auf einer einfarbigen Form oder in heller und dunkler Version - Die Botschaft als Live-Text wiederholt - Starker Kontrast im Bild selbst - Tiefes Violett: `linear-gradient(135deg, #2a1b6b 0%, #7c3aed 100%)` - Tiefes Türkis: `linear-gradient(135deg, #0f3d3e 0%, #1f8a78 100%)` - Beere zu Koralle: `linear-gradient(135deg, #7a1f3d 0%, #e0555c 100%)` - Nacht zu Blau: `linear-gradient(135deg, #1e2a52 0%, #3f6fd8 100%)` Header-Farbverläufe, die in hellen und dunklen Postfächern gut sitzen: tief genug, um nachts nicht zu blenden, gesättigt genug, um tagsüber hell zu wirken. 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](https://gradiently.design/de/guide/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](https://gradiently.design/de/guide/gradient-banding). 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. Ein breiter E-Mail-Header mit Newsletter-Titel und Ausgabennummer auf einem tiefen Farbverlauf Ein Newsletter-Header in 1200 mal 600: Titelkopf, Ausgabennummer und eine Zeile. Ein breiter E-Mail-Header, der die Sonntagsöffnung auf einem warmen Farbverlauf ankündigt Ein Ankündigungs-Header: Die Botschaft ist kurz genug, um sie darunter als Live-Text zu wiederholen. ## Checkliste für E-Mail-Header 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. **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. **Eine Fallback-Farbe setzen** Ein `bgcolor` auf der Zelle in einer Farbe aus dem Farbverlauf, damit blockierte Bilder trotzdem nach Marke aussehen. 4. **Echten Alt-Text schreiben** Die Botschaft, nicht eine Beschreibung des Bildes. 5. **Die Botschaft live wiederholen** Daten, Angebote und Handlungsaufforderungen als HTML-Text unter dem Header. 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](https://gradiently.design/de/guide/launch-day-graphics). ## FAQ ### Welche Größe sollte ein E-Mail-Header haben? 1200 mal 600 Pixel, im HTML der E-Mail in 600 Pixeln Breite angezeigt. Die doppelte Auflösung hält ihn auf Bildschirmen mit hoher Pixeldichte scharf. ### Funktionieren CSS-Farbverläufe in E-Mails? In manchen E-Mail-Clients, nicht in allen. Lege den Farbverlauf in ein Bild oder nutze CSS mit einem einfarbigen `bgcolor`-Fallback und teste in den Apps, die deine Lesenden nutzen. ### Wie sorge ich dafür, dass ein E-Mail-Header im Dark Mode funktioniert? Gib dem Header einen eigenen mittleren oder tiefen Hintergrund statt Weiß oder Transparenz, halte starken Kontrast im Bild und wiederhole wichtige Wörter als Live-Text. ### Was sollte der Alt-Text eines E-Mail-Headers sagen? Was der Header sagt, etwa die Überschrift oder das Angebot, damit Lesende mit blockierten Bildern trotzdem die Botschaft bekommen.