Zu Content springen
Deutsch
Anmelden
https://cslonz.de/
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

KB: HTML‑E‑Mail‑Signatur mit Bild & festem Layout

Ziel: Eine robuste HTML‑Signatur erstellen, die in Outlook (Windows/Mac/Web), Apple Mail und Gmail gut rendert. Prinzip: Tabellen‑Layout, Inline‑CSS, absolute Bild‑URLs.

1) Grundprinzipien (Kompatibilität)
  • Tabellen statt Div‑Layouts nutzen; Outlook rendert mit Word‑Engine.
  • Inline‑Styles (z. B. style="font-family:Arial; line-height:20px") statt <style> oder externe CSS.
  • Bilder: per HTTPS‑URL einbinden; width als Attribut + style="display:block; border:0;".
  • Retina‑Schärfe: Bild in doppelter nativer Breite bereitstellen (z. B. 240 px hochladen, 120 px anzeigen).
  • Links: mailto: und tel: verwenden.
  • Farbkontrast/Dark‑Mode: Logos als PNG mit transparentem Hintergrund + ausreichend Kontrast.
  • Vermeiden: Margins, komplexe Shorthands, background-image, Web‑Fonts.
2) Minimal‑Vorlage (kopieren & anpassen)
Logos/Icons auf öffentliches HTTPS hosten (CDN/Website). Platzhalter in FETT ersetzen.
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#222;">
 <tr>
   <td valign="top" style="padding:0 16px 0 0;">
     <img src="https://**IHRE-DOMAIN**/assets/logo.png" width="120" alt="**UNTERNEHMEN**" style="display:block; border:0; outline:none; text-decoration:none;">
   </td>
   <td valign="top" style="border-left:1px solid #e0e0e0; padding-left:16px;">
     <p style="margin:0; font-size:16px; line-height:22px; font-weight:bold;">**VORNAME NACHNAME**</p>
     <p style="margin:0; color:#555;">**POSITION** | **ABTEILUNG**</p>
     <p style="margin:8px 0 0 0;">
       <a href="tel:+49**NUMMER**" style="color:#1a73e8; text-decoration:none;">+49 **NUMMER**</a>
       · <a href="mailto:**EMAIL**" style="color:#1a73e8; text-decoration:none;">**EMAIL**</a>
     </p>
     <p style="margin:0;">
       <a href="https://**DOMAIN**" style="color:#1a73e8; text-decoration:none;">**DOMAIN**</a>
       · **UNTERNEHMEN** · **STRASSE NR**, **PLZ ORT**
     </p>
     <p style="margin:8px 0 0 0;">
       <a href="https://www.linkedin.com/company/**HANDLE**" style="text-decoration:none;">
         <img src="https://**IHRE-DOMAIN**/assets/icons/linkedin.png" width="16" height="16" alt="LinkedIn" style="display:inline-block; border:0; vertical-align:middle;">
       </a>
       <a href="https://www.x.com/**HANDLE**" style="text-decoration:none;">
         <img src="https://**IHRE-DOMAIN**/assets/icons/x.png" width="16" height="16" alt="X" style="display:inline-block; border:0; vertical-align:middle; margin-left:8px;">
       </a>
     </p>
   </td>
 </tr>
</table>
<!-- Optionaler Disclaimer -->
<p style="font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:16px; color:#777; margin:12px 0 0 0;">
 Hinweis: Diese E‑Mail kann vertrauliche Informationen enthalten. Wenn Sie nicht der richtige Empfänger sind, informieren Sie uns bitte und löschen Sie diese Nachricht.
</p>
Tipps:
  • Logo nativ 240 px breit speichern, aber mit width="120" einbinden → scharf auf hochauflösenden Displays.
  • So wenig Farben/Schriftvarianten wie möglich (Corporate‑Design).
  • Gesamtbreite < 600 px halten.
3) Bild‑Einbindung: Remote vs. eingebettet
A) Remote (empfohlen, einfach): src="https://…/logo.png"
    • Kleinste Signaturgröße, einfach zu pflegen/ändern.
  • − Einige Clients zeigen Bilder erst nach „Bilder laden“.
B) Eingebettet (CID, vor allem Outlook/Exchange): src="cid:logo"
  • Erfordert, dass das Bild als Anhang mit Content‑ID eingebettet wird (passiert automatisch, wenn du das Bild in Outlooks Signatur‑Editor einfügst).
    • Bild erscheint auch ohne externes Nachladen.
  • − Verwaltung aufwändiger; Austausch erfordert neue Einbettung.
4) Einbau je Client
Outlook für Web (Microsoft 365):
  1. Settings → Mail → Compose and reply → Email signature.
  2. HTML in den Editor einfügen (in einem Browser die Datei öffnen, kopieren und mit Formatierung einfügen).
  3. Signatur für Neue Nachrichten und Antworten/Weiterleitungen zuweisen.
Outlook für Windows/Mac (Desktop):
  1. Datei → Optionen → E‑Mail → Signaturen… (Mac: Outlook → Einstellungen → Signaturen).
  2. Neue Signatur anlegen, HTML aus dem Browser kopieren und einfügen.
  3. Logos/Icons bei Bedarf über „Bild einfügen“ hinzufügen (Outlook bettet sie als CID ein).
Gmail:
  1. Zahnrad → Alle Einstellungen → Allgemein → Signatur.
  2. HTML aus Browser kopieren → in das Signaturfeld einfügen.
  3. Bilder über „Bild einfügen“ wahlweise per URL oder aus Drive.
Apple Mail:
  1. Mail → Einstellungen → Signaturen.
  2. Neue Signatur → aus Browser kopieren/einfügen.
  3. Falls Formatierungen verloren gehen: Öffne die HTML‑Datei im Browser (Chrome/Edge/Firefox/Safari), markiere den angezeigten Inhalt und kopiere ihn von dort in das Signaturfeld.
5) Varianten & Bausteine
Trennerzeile innerhalb der rechten Spalte:
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="border-top:1px solid #e0e0e0; height:12px; font-size:0; line-height:0;">&nbsp;</td></tr></table>
Zweizeilige Telefonnummern (Festnetz/Mobil):
<p style="margin:0;">T: <a href="tel:+49…" style="color:#1a73e8; text-decoration:none;">+49 …</a></p>
<p style="margin:0;">M: <a href="tel:+49…" style="color:#1a73e8; text-decoration:none;">+49 …</a></p>
CTA‑Button (einfach, client‑sicher):
<table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td style="background:#1a73e8; padding:8px 12px; border-radius:4px;">
 <a href="https://**DOMAIN**/kalender" style="color:#fff; text-decoration:none; font-family:Arial; font-size:13px;">Termin vereinbaren</a>
</td></tr></table>
6) Pflege & Team‑Rollout
  • Zentrale Assets (Logo/Icons) auf stabiler URL/CDN hosten.
  • Vorlagen mit Platzhaltern (**VORNAME**, **EMAIL**) bereitstellen und per Suchen/Ersetzen personalisieren.
  • Vor dem Rollout in Outlook, Gmail, Apple Mail testen (neue E‑Mail an Testpostfächer senden).
  • Änderungen (z. B. neue Adresse) einmal zentral in den Assets austauschen.
7) Troubleshooting
  • Bilder zeigen nicht: Externe Bilder sind blockiert → Empfänger muss „Bilder laden“ erlauben; alternativ Bilder per CID einbetten.
  • Schrift/Abstände wirken anders: Paddings in <td> statt Margins verwenden; feste line-height setzen.
  • Dark‑Mode invertiert Farben: Hoher Kontrast; Logos mit transparentem Hintergrund; Texte nicht als Bilder.