Responsive E-Mail-Signatur — auf jedem Bildschirm lesbar
Eine responsive E-Mail-Signatur passt sich der verfügbaren Breite an, statt sie zu erzwingen. Das klingt nach derselben Technik wie bei einer Website, ist aber eine andere: Breakpoints und Media Queries stehen in einer Signatur gar nicht zur Verfügung. Was bleibt, ist eine Handvoll Bauentscheidungen — Breite, Bilder, Schriftgrösse, Spalten —, die darüber entscheiden, ob die Signatur auf einem 375 Pixel breiten Display noch lesbar ankommt oder den Empfänger seitwärts scrollen lässt.
Was bedeutet responsiv bei einer E-Mail-Signatur?
Dass sie mitgeht, nicht dass sie umschaltet. Eine Website wechselt an definierten Breakpoints ihr Layout. Eine Signatur kann das nicht und muss es auch nicht: Sie ist ein kleiner Block am Ende einer Nachricht. Responsiv heisst hier, dass ihre Breite eine Obergrenze ist statt eine Vorgabe und dass jedes Element darin schrumpfen darf.
Der Unterschied ist keine Wortklauberei, sondern entscheidet über die Bauweise. Wer eine Signatur wie eine Miniatur-Website plant, baut Regeln ein, die im Postfach des Empfängers nie ausgeführt werden. Wer sie als fliessenden Block plant, kommt mit drei Eigenschaften aus.
- Obergrenze statt Festbreite: Die äussere Tabelle bekommt eine maximale Breite, keine feste. Auf einem breiten Bildschirm nutzt sie diese Grenze, auf einem schmalen gibt sie nach.
- Bilder mit einer einzigen Massangabe: Breite gesetzt, Höhe automatisch. Zwei Angaben verhindern, dass das Bild proportional mitschrumpft.
- Wenige Spalten: Eine Tabellenspalte bricht nicht um. Was nebeneinander steht, steht auch auf dem Handy nebeneinander — oder ragt hinaus.
Warum funktionieren Media Queries in Signaturen nicht?
Weil eine Signatur ein Fragment ist, das in ein fremdes Eingabefeld eingefügt wird. Media Queries leben in einem style-Block im Dokumentkopf, und genau den entfernen die Signatur-Editoren von Outlook, Gmail und Apple Mail beim Einfügen. Übrig bleiben die Formatierungen, die direkt an den Elementen hängen — und die kennen keine Bildschirmbreite.
Das ist der Punkt, an dem Anleitungen aus dem Newsletter-Umfeld in die Irre führen. Ein Newsletter ist ein vollständiges HTML-Dokument mit eigenem Kopf; dort greifen Media Queries, soweit der Client sie unterstützt. Google führt für Gmail auf, welche CSS-Eigenschaften überhaupt überleben — nachzulesen in der Referenz der unterstützten CSS-Eigenschaften. Eine Signatur durchläuft diesen Weg nie: Sie wird kopiert und eingefügt, nicht versendet.
Praktische Folge: Jede Signatur, die erst „ab 480 Pixel anders aussieht", ist auf dem Handy ungetestet. Was Sie im Browser bei schmalem Fenster sehen, sagt nichts darüber, was im Postfach ankommt.
Wer den Code selbst anpassen will, sollte deshalb wissen, was am Ende übrig bleibt. Der Generator gibt genau dieses reduzierte Markup aus — die HTML-Ausgabe für eigene Anpassungen enthält keine Klassen und keinen style-Block, weil beides ohnehin verloren ginge.
Welche Breite hält auf einem Handy?
Bis 600 Pixel ist die Obergrenze, 480 bis 520 die sichere Wahl. Ein iPhone im Hochformat stellt je nach Modell rund 375 bis 430 Pixel zur Verfügung, abzüglich der Ränder des Mailprogramms. Entscheidend ist aber nicht die Zahl allein, sondern ob sie als Maximum oder als feste Breite im Code steht.
- Feste Breite: Die Tabelle behält ihre Pixel, egal wie schmal das Display ist. Das Mailprogramm zoomt die ganze Nachricht heraus oder erzeugt eine horizontale Scrollleiste. Beides trifft nicht nur die Signatur, sondern den gesamten Mailtext darüber.
- Maximale Breite: Die Tabelle nutzt den Platz bis zur Grenze und gibt darunter nach. Der Text bricht um, die Nachricht bleibt lesbar.
Die zehn Vorlagen in diesem Generator arbeiten deshalb ausschliesslich mit Obergrenzen: 480 Pixel für die schlanken Textvarianten, 520 für die Standardlayouts, 600 für die Bannerkarte. Kein Layout setzt eine feste Aussenbreite.
Wenn Sie prüfen wollen, wie sich das anfühlt: Bauen Sie eine Signatur zusammen und öffnen Sie die Testmail auf dem eigenen Handy. Das dauert wenige Minuten und ersetzt jede Vermutung.
Was passiert mit Logo und Bildern auf schmalen Bildschirmen?
Sie skalieren nur dann mit, wenn genau eine Massangabe gesetzt ist. Steht am Bild eine Breite und zusätzlich eine feste Höhe, hält das Mailprogramm beide ein und staucht das Logo, sobald der Platz enger wird. Setzen Sie die Breite und lassen Sie die Höhe automatisch berechnen.
Outlook ist hier besonders eigenwillig: Es gewichtet ein Höhen-Attribut stärker als eine Anweisung, die Höhe automatisch zu bestimmen. Ein breites Querformat-Logo wird damit zum Quadrat zusammengedrückt. Welche Masse für ein Logo sinnvoll sind und in welchem Format es ausgeliefert werden sollte, steht unter wie das Logo in die Signatur kommt.
- Logobreite zwischen 100 und 160 Pixel — das reicht auch auf einem Retina-Display, wenn die Datei doppelt so gross hinterlegt ist.
- Keine berechnete Höhe im Code, solange die echten Bildmasse nicht bekannt sind.
- Symbole für Telefon und Mail als kleine Bilddateien statt als Schriftzeichen: Sie bleiben in jeder Grösse scharf und in jedem Client sichtbar.
- Bleibt ein Bild leer, liegt es fast nie an der Breite — die Ursachen stehen unter wenn die Signatur nicht erscheint.
Welche Schriftgrösse bleibt auf dem Handy lesbar?
Zwischen 13 und 15 Pixel für die Kontaktzeilen, etwas mehr für den Namen. Unterhalb von 13 Pixel greift auf iPhones die automatische Textvergrösserung ein: Das System skaliert einzelne Textblöcke selbstständig hoch, wodurch Zeilen unterschiedlich gross erscheinen und das sorgfältig gesetzte Layout auseinanderfällt.
Der Effekt überrascht regelmässig, weil er am Rechner unsichtbar bleibt. Eine Signatur mit 11 Pixel Fusszeile sieht im Browser fein aus und wirkt auf dem Handy plötzlich unruhig, weil genau diese Zeile vergrössert wurde und die anderen nicht.
- Name: 16 bis 20 Pixel, halbfett. Er ist die einzige Zeile, die aus der Distanz erkennbar sein muss.
- Position, Firma, Kontaktdaten: 13 bis 15 Pixel.
- Rechtliche Zusätze: nicht unter 12 Pixel, auch wenn sie unauffällig bleiben sollen.
- Systemschriften verwenden: Eine eingebettete Schrift wird auf dem Handy ohnehin ersetzt, und der Ersatz hat andere Masse als geplant.
Ein- oder zweispaltig — was überlebt die Handy-Ansicht?
Zwei Spalten funktionieren, solange ihre Summe unter der Obergrenze bleibt und keine davon eine feste Breite hat. Tabellenspalten brechen nicht untereinander um; was nebeneinander gesetzt ist, bleibt nebeneinander. Ein Logo links und drei Kontaktzeilen rechts sind unproblematisch. Ein Porträt, ein Textblock und ein Banner in einer Reihe sind es nicht.
Als Faustregel: Je schmaler die einzelne Spalte werden darf, desto besser überlebt sie. Eine Spalte mit einer Telefonnummer kann kaum umbrechen, eine Spalte mit einer langen Firmenadresse schon. Wer unsicher ist, baut einspaltig — das ist auf dem Handy nie falsch und wirkt auch am Rechner aufgeräumt.
Auf Mac und iPhone kommt eine Besonderheit dazu: Apple Mail synchronisiert Signaturen zwischen den Geräten nur unter Bedingungen, und die mobile Fassung entsteht oft separat. Die Signatur für Mac und iPhone bauen lässt sich deshalb einmal erzeugen und auf beiden Geräten identisch einsetzen.
Die Signatur auf dem Handy prüfen
- 1
Testmail an sich selbst senden
Schreiben Sie eine Mail an die eigene Adresse, mit der fertigen Signatur und einem kurzen Text darüber. Der Text darüber ist wichtig: Er zeigt, ob die Signatur die Breite der ganzen Nachricht bestimmt.
- 2
Auf dem Handy im Hochformat öffnen
Öffnen Sie die Mail in der Mailapp des Telefons, nicht im Browser. Halten Sie das Gerät hochkant — das ist der schmalste Fall und damit der aussagekräftigste.
- 3
Auf seitliches Scrollen prüfen
Wischen Sie nach links und rechts. Lässt sich die Nachricht seitwärts verschieben, ist die Signatur zu breit oder enthält ein Element mit fester Breite. Das ist der einzige Fehler, der auch den Mailtext betrifft.
- 4
Logo und Schriftgrössen kontrollieren
Ist das Logo verzerrt, steht im Code eine Höhe zu viel. Erscheinen einzelne Zeilen grösser als der Rest, liegt eine Schriftgrösse unter der Schwelle, ab der das System automatisch vergrössert.
Häufige Fragen
Ja, aber nicht über Media Queries. Die Signatur wird als Fragment in ein Eingabefeld eingefügt, und der zugehörige style-Block überlebt diesen Schritt nicht. Responsiv wird sie durch ihre Bauweise: eine maximale statt einer festen Breite, Bilder mit nur einer Massangabe und wenige Spalten.
Als Obergrenze gelten 600 Pixel, sicher sind 480 bis 520. Wichtiger als der genaue Wert ist, dass er als Maximum gesetzt ist. Eine Signatur mit fester Breite von 500 Pixel erzeugt auf einem schmalen Display eine horizontale Scrollleiste, eine mit maximal 500 Pixel nicht.
Meist wegen der automatischen Textvergrösserung. Fällt eine Schriftgrösse unter etwa 13 Pixel, skaliert iOS diesen Textblock eigenständig hoch, während die übrigen Zeilen unverändert bleiben. Das Ergebnis wirkt unregelmässig, obwohl im Code nichts falsch steht. Abhilfe: keine Schriftgrösse unter 13 Pixel für Fliesstext.
Nein, und es wäre auch schwer zu pflegen. Eine Signatur, die als fliessender Block gebaut ist, funktioniert auf beiden Seiten. Zwei getrennte Fassungen bedeuten dagegen zwei Stände, die auseinanderlaufen, sobald sich eine Telefonnummer ändert.
Weil ein Element in der Nachricht breiter ist als der Bildschirm — häufig die Signatur. Mailprogramme zoomen dann die gesamte Nachricht heraus, damit alles hineinpasst. Der Mailtext ist dadurch mitbetroffen, obwohl er selbst keine Breite vorgibt. Eine schmalere Signatur löst beides auf einmal.
Nur wenn sie zwei Massangaben tragen oder für ihre Anzeigegrösse zu klein hinterlegt sind. Setzen Sie die Breite und lassen Sie die Höhe automatisch bestimmen. Für scharfe Darstellung auf hochauflösenden Displays sollte die Bilddatei etwa doppelt so gross sein wie die angezeigte Breite.
Eine Testmail an sich selbst, geöffnet auf dem eigenen Telefon im Hochformat, deckt die allermeisten Fälle ab. Das Hochformat ist der schmalste reale Fall. Wer zusätzlich sichergehen will, bittet eine Kollegin mit einem anderen Betriebssystem um eine kurze Rückmeldung.
Wenn es danach immer noch bricht
Dann liegt es fast immer am HTML selbst. Der Generator erzeugt reine Tabellen mit Inline-Styles — das Einzige, was Outlook zuverlässig darstellt.
Ohne Registrierung · Aufbauen und Vorschau sind gratis
Weiterlesen
Zuletzt aktualisiert: 21. August 2026