# E-Mail-Signatur gestalten: 600×200 Banner, leicht [Canonical HTML page](https://gradiently.design/de/guide/email-signature-design) Deine Signatur steht unter jeder E-Mail, die du verschickst, und ist damit das am häufigsten gesehene Design, das du besitzt. So gestaltest du eine, die durchdacht aussieht, schnell lädt und nie zur Büroklammer wird. ## The short version - Eine gut gestaltete E-Mail-Signatur hält Name, Funktion und Kontaktdaten als echten Text und ergänzt höchstens einen kleinen Bildbanner. - Ein Signatur-Banner funktioniert gut in 600×200 Pixel, ein Streifen im Verhältnis 3:1, der auch in die schmalsten E-Mail-Layouts passt. - Exportierst du den Banner in doppelter Größe, 1200×400, und zeigst ihn mit 600 Pixel Breite an, bleibt er auf hochauflösenden Bildschirmen scharf. - Viele E-Mail-Programme blockieren Bilder, bis der Leser sie erlaubt, deshalb sollte nichts Wichtiges nur im Banner stehen. - Ein gehostetes Bild mit vollständiger https-Adresse hält jede E-Mail leicht, während ein eingefügtes Bild oft bei jeder Nachricht als Anhang mitgeschickt wird. Gute **E-Mail-Signatur-Gestaltung** ist vor allem Zurückhaltung: dein Name, deine Funktion und ein oder zwei Wege, dich zu erreichen, als echter Text, dazu ein kleiner Bildbanner in 600×200 Pixel, der deine Marke trägt. Halte den Banner leicht, verlinke ihn mit einer Seite und setze Telefonnummer oder E-Mail-Adresse nie nur ins Bild, denn viele Postfächer verbergen Bilder, bis der Leser etwas anderes sagt. ## Was in eine E-Mail-Signatur gehört Eine Signatur hat zwei Aufgaben: sagen, wer du bist und wie man dich erreicht, und daran erinnern, was du tust. Die erste Aufgabe ist Text. Die zweite kann ein Banner übernehmen. Alles darüber hinaus ist Ballast, den Leute zu überspringen lernen. | Element | Format | Hinweise | | --- | --- | --- | | Name | Text, fett | Das Einzige, was größer sein sollte | | Funktion und Firma | Text | Eine Zeile, durch ein Komma getrennt | | Telefon oder Buchungslink | Textlink | Ein Hauptweg zum Handeln, nicht vier | | Website | Textlink | Kurz und lesbar, ohne `https://` | | Banner | Bild, 600×200 | Optional; verlinkt auf eine Seite | | Social-Media-Icons | Kleine Bilder | Höchstens zwei oder drei, oder lass sie weg | Erst Text, dann Bild. Würden alle Bilder nicht laden, sollte die Signatur trotzdem funktionieren. ## Größe und Gewicht von E-Mail-Signatur-Bannern Gestalte den Banner in 600×200 Pixel, ein Streifen im Verhältnis 3:1. Sechshundert Pixel ist die Breite, auf die klassische E-Mail-Vorlagen ausgelegt sind, also passt ein Banner dieser Größe ohne Skalierung in die Mail-App eines Handys und in die Lesespalte am Desktop. Für hochauflösende Bildschirme exportierst du dasselbe Design in doppelter Größe, 1200×400, und lässt die E-Mail es mit 600 Pixel Breite anzeigen. - Signatur-Banner 600×200: 600 × 200 - E-Mail-Header 1200×600: 1200 × 600 - Visitenkarte 1050×600: 1050 × 600 Ein Signatur-Banner neben einem Newsletter-Header und einer Visitenkarte, maßstabsgetreu. Der Banner ist ein schlanker Streifen, kein Poster. Das Gewicht zählt mehr, als du denkst, weil das Bild in einem langen Verlauf bei jeder Antwort mitreist. Halte die Datei deutlich unter 100 KB. Ein Verlaufsbanner lässt sich wunderbar als hochwertiges JPEG exportieren; nimm PNG nur, wenn du Transparenz oder sehr feine Schrift brauchst. Machst du auch einen Newsletter, behandelt die Anleitung [E-Mail-Header gestalten](https://gradiently.design/de/guide/email-header-design) das größere Format. ## Den Banner gestalten Ein Banner, den man hundertmal pro Woche sieht, sollte eine Sache sagen und sie ruhig sagen. Am besten funktioniert er als leise Werbung: dein nächstes Event, eine neue Leistung, ein Buchungslink oder einfach der Look deiner Marke mit einer kurzen Zeile. Ändere die Worte mit der Jahreszeit und behalte den Hintergrund. Ein schlanker E-Mail-Signatur-Banner für ein Fotostudio mit dem Text Jetzt Frühlingshochzeiten buchen auf einem sanften Verlauf Der Banner einer Fotografin: eine aktuelle Zeile und der Name des Studios. Ein E-Mail-Signatur-Banner, der ein kostenloses Webinar am 12. November ankündigt Eine Beratung, die ein Event bewirbt. Ist es vorbei, tauschst du die Zeile aus. ### Besser nicht - Kontaktdaten nur im Bild - Ein Banner mit mehreren hundert Kilobyte - Animierte GIFs, die endlos laufen - Zitate, Disclaimer und fünf Social-Media-Icons - Kleiner grauer Text, der im Dunkelmodus verschwindet ### Besser so - Name und Links als echter Text - Ein leichter Banner in 600×200, unter 100 KB - Ein Standbild oder höchstens eine sanfte Schleife - Ein Call-to-Action - Ein Banner mit eigenem Hintergrund, der im hellen und dunklen Modus lesbar ist Der Dunkelmodus ist eine echte Falle. Manche Mail-Apps kehren helle Farben um oder tönen sie, sodass ein Logo auf transparentem Hintergrund in einem dunklen Postfach verschwinden kann. Ein Banner mit eigenem vollflächigem Hintergrund, etwa einem satten Verlauf, sieht in beiden Modi gleich aus. [Design für den Dunkelmodus](https://gradiently.design/de/guide/dark-mode-design) und [Verläufe in E-Mails](https://gradiently.design/de/guide/gradients-in-email) gehen näher darauf ein, wie Programme mit Farbe umgehen. ## HTML für eine E-Mail-Signatur, die zusammenhält E-Mail-Programme sind beim Layout altmodisch, deshalb baut man Signaturen mit einfachen Tabellen und Inline-Styles. Dieses Beispiel funktioniert in den gängigen Programmen: Füge es in eine HTML-Datei ein, öffne sie im Browser, markiere alles und kopiere es in die Signatureinstellungen deiner Mail-App. ```html
Maya Okafor
Founder, Studio Alder
Book a call · example.com
Studio Alder: now booking spring weddings
``` Angaben als echter Text, ein gehosteter Banner, der mit 600×200 aus einer Datei in 1200×400 angezeigt wird, mit Alt-Text, der auch bei blockierten Bildern noch Sinn ergibt. > **Hoste das Bild, füge es nicht ein** Wenn du ein Bild direkt in eine Signatur einfügst oder hochlädst, senden manche Mail-Apps es bei jeder Nachricht als Anhang mit, was als Büroklammer auftaucht und Postfächer füllt. Ein Link auf ein Bild auf deiner eigenen Website mit vollständiger https-Adresse verhindert das. ## Deine Signatur einrichten, Schritt für Schritt 1. **Den Textblock schreiben** Name, Funktion und Firma, ein Link zum Handeln, deine Website. Lies es laut vor und streiche alles, was du nicht sagen würdest. 2. **Den Banner in 600×200 gestalten** Nimm deinen Markenhintergrund und eine kurze Zeile. Halte die Worte in der Mitte, mit Platz an beiden Enden. 3. **In 1200×400 exportieren** Ein hochwertiges JPEG für Verläufe und Fotos, PNG für Transparenz. Prüfe, dass die Datei unter 100 KB liegt. 4. **Auf deine Website hochladen** Lege ihn in einen stabilen Ordner wie `/email/`, damit sich die Adresse nie ändert und alte E-Mails ihren Banner behalten. 5. **HTML bauen und einfügen** Passe den Code oben an, setze die Breite auf 600, schreibe echten Alt-Text und füge alles in deine Mail-App ein. 6. **Richtig testen** Schick ihn an eine Gmail- und eine Outlook-Adresse, öffne ihn auf dem Handy, schalte den Dunkelmodus an und aus und antworte zweimal auf den Verlauf. ## Signaturen im Team einheitlich halten Signaturen laufen auseinander: Einer fügt ein Zitat hinzu, eine andere nutzt das Logo vom letzten Jahr. Gib dem Team eine HTML-Vorlage und einen Banner und tausche den Banner zentral aus, wenn sich die Botschaft ändert. Dieselbe Disziplin wie in [Markenkonsistenz](https://gradiently.design/de/guide/brand-consistency) gilt hier, nur kleiner. Gradiently hat im Studio die Größe E-Mail-Signatur in 600×200 bereit, und eine eigene Größe in 1200×400 deckt den hochauflösenden Export ab. Kostenlose Exporte tragen ein kleines Wasserzeichen, ein sauberer Banner braucht also Pro, das auch das Markenkit mitbringt: Logo, Farben und Schriften an einem Ort. Der Mark hinter dem Banner ist derselbe wie auf deinen Social-Media-Beiträgen und [Visitenkarten](https://gradiently.design/de/guide/business-card-design), sodass eine Antwort im Postfach eines anderen unverkennbar wie der Rest deiner Marke aussieht. ## FAQ ### Welche Größe sollte ein E-Mail-Signatur-Banner haben? Gestalte ihn in 600×200 Pixel. Exportiere in 1200×400 und setze die Bildbreite auf 600, damit er auf hochauflösenden Bildschirmen scharf bleibt. ### Wie groß darf die Bilddatei einer E-Mail-Signatur sein? Halte sie deutlich unter 100 KB. Das Bild wird mit jeder E-Mail und jeder Antwort gesendet oder geladen, eine schwere Datei summiert sich also schnell. ### Warum wird das Bild meiner E-Mail-Signatur als Anhang angezeigt? Manche Mail-Apps hängen eingefügte oder hochgeladene Bilder an jede Nachricht an. Hoste das Bild stattdessen auf deiner Website und verlinke es mit einer vollständigen https-Adresse. ### Sollte ich meine Telefonnummer ins Signaturbild setzen? Nein. Viele E-Mail-Programme blockieren Bilder standardmäßig, und Text in einem Bild lässt sich nicht antippen oder kopieren. Halte Kontaktdaten als echten Text. ### Kann ich ein animiertes GIF in meiner E-Mail-Signatur nutzen? Du kannst, aber halte es klein und dezent. Eine endlose Animation unter jeder E-Mail in einem langen Verlauf lenkt schnell ab, und manche Programme zeigen nur das erste Bild.