HTML-Signatur erstellen: mit Code, der auch im klassischen Outlook hält

1. Geschäftliche E-Mail-Adresse eingeben. Signguin findet darüber die Website Ihrer Firma und übernimmt Logo, Markenfarben und Kontaktdaten. Ohne geschäftliche Adresse geben Sie Ihre Website ein oder tragen über Einfach so starten alles selbst ein.

2. Angaben ergänzen und Design wählen. Unter Über Sie tragen Sie Position, Telefon und Social-Media-Profile ein, unter Aussehen wählen Sie Design, Schriften und Icon-Stil. Die Vorschau zeigt die Signatur in einer realistischen E-Mail, umschaltbar zwischen Computer und Handy sowie Hell und Dunkel.

3. Kopieren. Im Schritt Installieren stehen zwei Buttons: Signatur kopieren kopiert die Signatur so, wie Sie sie sehen, HTML-Code kopieren den Quelltext. Darunter wählen Sie Ihr Programm und sehen die Schritte dafür.

Nicht jedes Programm hat ein Feld für Code. Outlook, Apple Mail und Gmail haben einen Signatur-Editor, der formatierten Text erwartet, keinen Quelltext. Fügen Sie dort den Quelltext ein, sehen Ihre Empfänger später <table> statt Ihres Logos.

Outlook: kein HTML-Feld, so geht es trotzdem

Outlook nimmt keinen Quelltext an. Beim Kopieren aus dem Browser überträgt die Zwischenablage aber die Formatierung: Tabellenaufbau, Farben, Links und Bildadressen. Deshalb klicken Sie für Outlook auf Signatur kopieren und fügen im Signatur-Editor mit Strg+V ein (auf dem Mac Cmd+V). Fügen Sie dabei nicht als reinen Text ein.

Haben Sie den HTML-Code selbst bearbeitet, gehen Sie denselben Weg über den Browser: Code als Datei mit der Endung .html speichern, die Datei per Doppelklick im Browser öffnen, die angezeigte Signatur markieren, kopieren und in Outlook einfügen.

Kommt die Signatur trotzdem als reiner Text an, schreibt Outlook Ihre E-Mails vermutlich im Format Nur-Text. Im klassischen Outlook stellen Sie das unter Datei > Optionen > E-Mail > Nachrichten in diesem Format verfassen auf HTML um. Alle Schritte für jede Version: Outlook-Signatur ändern. Welche Designs im klassischen Outlook am besten halten, zeigen die Outlook-Signatur-Vorlagen.

Thunderbird: Hier gehört der Code hin

1. In Signguin unter Ins E-Mail-Programm einfügen auf HTML-Code kopieren klicken.
2. In Thunderbird das Menü ≡ öffnen, Konten-Einstellungen wählen und links auf Ihre E-Mail-Adresse klicken.
3. Den Haken bei HTML verwenden (z.B.: <b>fett</b>) setzen.
4. Den Code in das Feld Signaturtext einfügen. Speichern müssen Sie nicht: Tab schließen und die Signatur in einer neuen Nachricht prüfen.

Ohne den Haken zeigt Thunderbird den Code als Text. Mehr dazu, auch zu Thunderbird für Android: Thunderbird-Signatur.

Apple Mail: Signatur statt Code einfügen

Auch Apple Mail auf dem Mac hat kein Code-Feld. Wählen Sie unter Mail > Einstellungen > Signaturen links Ihr Konto, legen Sie mit + eine Signatur an und entfernen Sie das Häkchen bei Standardschrift für E-Mails verwenden. Dann fügen Sie die Signatur, die Sie mit Signatur kopieren kopiert haben, mit Cmd+V ein. Für das iPhone gibt es nur einen inoffiziellen Weg, den Apple nicht dokumentiert. Beides steht in der Anleitung zur Apple-Mail-Signatur.

Das klassische Outlook für Windows stellt E-Mails mit der Engine von Microsoft Word dar. Layouts aus div-Containern oder mit Flexbox fallen dort auseinander. Signguin baut den Code deshalb so, wie E-Mail-Programme ihn verlangen:

• Tabellen für das Layout. Spalten sind Tabellenzellen, Abstände sitzen als Padding an der Zelle, weil Outlook für Windows Abstände an div-Elementen ignoriert.
• Inline-Styles statt Stylesheet. Jede Angabe steht direkt im style-Attribut des Elements und bleibt beim Kopieren erhalten. Einen <style>-Block, CSS-Klassen oder Skripte enthält der Code nicht.
• Farben doppelt. Farbige Flächen und Trennlinien haben zusätzlich das alte Attribut bgcolor, das Outlook zuverlässig liest.
• Schrift an der äußeren Zelle. Outlook übernimmt die Schrift nicht aus einem umschließenden div, deshalb steht sie an der Tabellenzelle.
• Bilder in fester Größe. Jedes Bild hat seine Breite als width im Code und liegt auf den Servern von Signguin. Logos speichert Signguin in doppelter Auflösung, damit sie auf Retina-Displays scharf bleiben.
• PNG statt SVG. SVG zeigen Outlook 2007 bis 2016 für Windows und Outlook 2016 für Mac nicht an. Die Social-Icons erzeugt Signguin deshalb als PNG in Ihrer Farbe.
• Systemschriften. Gmail und Outlook laden keine Webfonts. Jede Schriftauswahl beginnt mit einer Schrift, die unter Windows oder macOS installiert ist, etwa Arial oder Georgia.
• Buttons aus Tabellenzellen. Ein Anruf- oder Termin-Button ist eine farbige Zelle mit Text, kein Bild. Runde Ecken zeigt das klassische Outlook eckig, Farbe und Text bleiben.

So sieht ein vereinfachter Ausschnitt aus dem Design Klassisch aus:

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse">
  <tr>
    <td valign="middle" style="vertical-align:middle;padding-right:20px">[Logo]</td>
    <td width="2" bgcolor="#0e7c66" style="width:2px;background-color:#0e7c66;font-size:1px;line-height:1px">&nbsp;</td>
    <td valign="top" style="vertical-align:top;padding-left:20px">[Name, Position, Kontaktzeilen]</td>
  </tr>
</table>

Der Code gehört Ihnen: Sie können ihn in jedem Editor bearbeiten. Texte, Telefonnummern und Farbwerte ändern Sie ohne Risiko. Lassen Sie die Tabellenstruktur, die width-Angaben der Bilder und die Bildadressen stehen, sonst verschiebt sich das Layout in Outlook oder Bilder fehlen.

Für die meisten Änderungen ist der Editor schneller: Speichern Sie die Signatur mit Ihrer E-Mail-Adresse (kostenlos), öffnen Sie sie später unter Meine Signaturen, ändern Sie sie und kopieren Sie den Code neu. Die Pflichtangaben Ihrer Firma tragen Sie im Feld Rechtlicher Hinweis / Pflichtangaben ein; die Checkliste dazu steht unter E-Mail-Signatur erstellen.

Kostenlos sind die Designs Klassisch, Einfach und Handwerk, alle Einfügewege inklusive HTML-Code kopieren, die automatische Einrichtung in Gmail, Speichern und späteres Bearbeiten. Am Ende der Signatur steht ein kleiner Link „Erstellt mit Signguin“, den Sie im kostenlosen Tarif auch im Code nicht entfernen dürfen.

Premium ist eine Einmalzahlung für eine Person, kein Abo. Damit nutzen Sie alle Premium-Designs, Ihr Foto, einen Button, ein Banner und den Link Kontakt speichern (vCard), und der „Erstellt mit Signguin“-Link entfällt. In der Vorschau probieren Sie alles kostenlos aus.

Signguin erstellt Signaturen für eine Person. Wer eine Signatur zentral in alle Postfächer einer Firma verteilen will, braucht eine Software für Signaturverwaltung; einen Team-Tarif gibt es bei Signguin noch nicht, nur eine Warteliste. Animierte GIFs und QR-Codes bietet Signguin nicht. Wer ein Layout braucht, das keines der Designs bietet, nimmt den Code von Signguin als Ausgangspunkt und baut selbst weiter.