3. Februar 2024

So erstellst du HTML-E-Mail-Signaturen für Outlook, die überall gleich aussehen

Eine E-Mail-Signatur für Outlook zu erstellen ist verrückterweise eine echte Herausforderung. Egal ob in Word oder Outlook, ob auf Mac oder Windows, die Signatur sieht immer überall anders aus. Im schlimmsten Falle sind Logos auch noch verzerrt und Links blau unterstrichen.

Mit diesen Tipps sollte es dir gelingen eine Signatur zu erstellen, die in den meisten Mail-Clients gut aussieht.

Standard-Schriften
Benutze nur Standard-Schrifen, die auf jedem System installiert sind, also Arial, Verdana & Co.

Benutze Inline-CSS
Genau wie in Newslettern, sollten Styles ausschließlich inline angegeben werden. Hierbei sollten mindestens font-family, font-size & line-height definiert werden. z.B.:

<p style="color:#000; font-family:'Arial', sans-serif; margin-bottom:0; font-size:16px; line-height:22px;"><b>Max Mustermann</b></p>

Ergänze folgenden Code bei Links
Standardmäßig unterstreicht Outlook alle Links blau – sogar Bilder. Mit folgendem „Hack“ kannst du das verhindern:

<a href="https://www.fbnfrtg.de" style="color:#000; text-decoration:none;"><strong style="font-weight:normal;">www.fbnfrtg.de</strong></a>

Innerhalb des Links musst du <strong style=“font-weight:normal;“> nutzen. Das ergibt zwar überhaupt keinen Sinn, aber so ist das nun mal manchmal im Windows-Universum… 😉

Konvertiere Bilder in Base64
Bilder in E-Mails von unbekannten Absendern werden standardmäßig in Outlook erst nach Aufforderung angezeigt. Deshalb solltest du Bilder in der Signtur, z.B. Logos, unbedingt in Base64 konvertieren. So sind sie direkt im Code gespeichert und müssen nicht von einem externen Server geladen werden.
www.base64-image.de

Bildgrößen definieren
Gib die Größe der Bilder innerhalb des image-Tags mit den Attributen „width“ und „height“ an.

Vermeide CSS in Image-Tags
Es liegt nahe, Bildern per CSS einen Abstand zuzuweisen. Leider sieht Outlook das etwas anders und ignoriert Angaben wie „margin-top:20px“. Leg das Bild lieber 20px größer an und berücksichtige den Abstand im Bild.