HowTo: HTML E-Mail-Signatur in Apple Mail erstellen

Mann schreibt HTML - Signaturen in Apple Mail

Früher gab’s Visitenkarten, heute gibt es Signaturen:
Eine E-Mail-Signatur gehört zum guten Ton. Das würde niemand anzweifeln, der noch alle Zwetschgen beisammen hat.
Durch meine jahrelange Undercovertaktivität als E-Mail-Empfängerin ist es mir sogar möglich eine Liste mit den drei  häufigsten Signaturen zusammenzustellen:

  1. Eine Corporate Identity ist eine Corporate Identity .
  2. Ich bin frei von CI-Vorgaben. Ich könnte, wenn ich wollte oder wenn ich die Zeit hätte. Hab ich aber grad nicht. Solange haue ich ein Standardding raus. Besser als nix.
  3. Nichts.

Tja. Das haut mich jetzt nicht wirklich aus den Klotschen. So ehrlich wird man doch noch sein dürfen.

HTML-Signaturen wecken das Interesse, steigern die Conversion-Rate und bleiben in Erinnerung! Klick um zu Tweeten

Dabei haben Signaturen ein, leider unterschätztes, Potential: Sie wecken das Interesse, dienen als Visitenkarte, steigern die Conversion Rate und bleiben in Erinnerung. Wenn man es richtig macht!

Apple Mail: HTML E-Mail-Signatur

»Heidiiiii? Hier haste ’n schickes Design. Kannst du daraus ne HTML E-Mail-Signatur machen? Bitte?«, knick knack. Ich sag’s euch mit gewissem Stolz im Herzen: Ich war quasi unersetzlich. Ich war die Godmasterin der E-Mail-Signaturen! Natürlich habe ich an der Stelle auch gerne heraushängen lassen, dass es Apple Mail einem nicht gerade einfach macht. Intuition? Fehlanzeige?

But first: HTML

Bevor es nun ans Eingemachte geht, schreiben wir mit einem Texteditor ein paar Zeilen abgespecktes HTML.
Wenn ihr damit noch keine Erfahrungen gesammelt habt und euch das nicht zutraut, überspringt dieses Fachchinesisch und springt mal schnell rüber zu den HTML-Signatur-Generatoren, die ich euch weiter unten verlinkt habe.

Hier gibt es ein paar Dinge zu beachten:

  • Benutzt einen reinen Texteditor, auf gar keinen Fall Word oder solche Geschichten! Ich benutze am Liebsten TextWrangler oder Smultron
    (* kopiert man die geschriebenen Zeilen aus Editoren wie Word, kopiert man die Formatierung mit. Das wollen wir natürlich nicht.)
  • Die Signatur besteht aus einem HTML-Schnipsel. Wir können – und müssen – an dieser Stelle auf das komplette Grundgerüst verzichten. Also nix mit <html><body> und so. Wheeha!
  • Das CSS, also das, was für das Aussehen verantwortlich ist, wird nicht in einer externen Datei ausgelagert. Das schreiben wir in ein Tag ([täg] – das ist das Klammerding in HTML) in den HTML-Schnipsel.
  • Die Bilder liegen irgendwo im Internet und werden über die Bild-URL eingebunden.
  • Wenn ihr mögt, könnt ihr den Code meiner HTML-Signatur anpassen und nutzen

Für Menschen, die sich bisher noch nie mit HTML beschäftigt haben, klingt das jetzt vermutlich echt tricky.

Das HTML

Es gibt Seiten, auf denen ihr euch online Signaturen mit einem What-You-See-Is-What-You-Get-Editor erstellen könnt. Dort könnt ihr euch eure Signatur ganz einfach zusammenklicken. Am Ende kopiert ihr dann einfach den HTML Code.

  1. si.gnatu.re
  2. HTML Signatur Generator

Neue Signatur erstellen

[Hinweis: Ich habe dieses Tutorial anhand des Betriebsystems MacOS Sierra geschrieben]

Dann legen wir eine neue Signatur in Apple Mail an:
Mail  Einstellungen  Signaturen

HTML Signaturen in Apple Mail erstellen

Das ist eine Sache von 2 Sekunden. Das System fügt beim Erstellen einer Signatur automatisch eine abgespeckte Signatur hinzu, die in der rechten Spalte erscheint. Das lassen wir erst vorerst so.
Abrakadabra, it’s magic: Das System hat uns nun eine Datei mit unserer Blabla-Signatur erstellt. Bevor wir sie bearbeiten können, müssen wir sie aber noch finden. Logisch.

Library

Wir gehen über den Finder in die Library, in der sich unsere Programm-Ordner und Einstellungen befinden:
Finder Gehe zu  Library

Apple Mac Finder Gehe zu

Wie man sieht, sieht man nichts. Zumindest nicht die Library.
Das liegt daran, dass Systemordner von Apple versteckt angelegt werden, damit man nichts kaputt macht und so.
Mit gedrückter alt-Taste können wir den Ordner aber einblenden und die geheiligten Gefielde betreteten.

Library Mail  V4* Mail Data Signatures
* Euer Ordner könnte an dieser Stelle, je nach Version, auch V3 oder V2 heissen

Tadaaaa! Hier seht ihr eine Übersicht aller eurer Signaturen. Wenn ihr vorher schon welche hattet, kann es in dem Ordner schon heiß zugehen. Am Besten sortieren wir den Inhalt über »Ausrichten nach« nach »Hinzugefügt am«.
Die neueste Datei mit der Endung .mailsignature ist dann die vorhin erstelle Datei.

Apple Mail Signatur suchen

Per Rechtsklick öffnen wir diese Datei dann mit unserem reinen Texteditor.
Die ersten fünf Zeilen sind Lava: Nicht anfassen, nicht verändern, nicht löschen und alles wird gut. Das, was in dem Screenshot paulchenpantherpink markiert ist, kann weg. An diese Stelle kommt dann das HTML, das wir selbst geschrieben oder generiert haben.

Apple Mail Signatur editieren
Nach dem Speichern schützen wir die Datei vor dem Überschreiben.
Dazu klicken wir im Signaturen-Ordner auf unsere Signatur und wählen mit dem Rechtsklick die Option »Information« aus und setzen das Häkchen auf »Schreibgeschützt«.

Per Rechtsklick öffnet sich das Optionsmenü

Schreibgeschützte Datei - Apple

Das verhindert, dass unsere mühsam erstellte Datei wieder durch das System überschrieben und zur Blabla-Signatur zurückgesetzt wird.

Jetzt wird’s spannend!

Restart von Apple Mail

»Have you tried turning it off an on again?«

Der Standardspruch eines Entwicklers ist hier das oberste Gebot. Wir beenden Mail und starten neu. Und wenn wir alles richtig gemacht haben, sehen wir unter den Signaturen unsere schicke HTML-Signatur.
In der kleinen Vorschau sehen wir allerdings keine Bilder. Lasst euch davon nicht verunsichern. Wenn die Bilder richtig eingebunden sind, dann seht ihr sie spätestens, wenn ihr die Signatur zuweist und mit dem Konto Emails durch die Weltgeschichte schickt.

Adieu, ihr Langweiler! Ich bin viel ansehlicher und interessanter als ihr. MFG, die HTML-Signatur Klick um zu Tweeten

html mail signaturVerdammte Axt 2000! Endlich geschafft!
Jetzt könnt ihr der Welt was aufs Auge drücken!

 

 

Mehr davon?

40 Kommentare

  1. Liebe Heidi,

    nun muss ich doch nochmal nachfragen, denn plötzlich ist die Signatur weg, obwohl ich alles so gemacht habe, wie du es beschrieben hast, sie war auch geschützt – ich hab High Sierra, kann es sein, dass das System den Schutz einfach ignoriert irgendwie?
    Danke für dein kurzes Feedback!

    1. Hallo Anja,

      erst einmal: Lieben Dank für deine Kommentare.
      Das Problem kann ich gerade nicht nachvollziehen – ich habe »leider« nur Sierra und darunter konnte ich das Problem nicht feststellen.
      Ist die Signatur denn plötzlich ganz weg? Oder hat sie sich wieder zurückgesetzt?
      Dass der Schutz ignoriert wird, sollte eigentlich unter keinem Betriebssystem passieren.

      Tut mir leid, dass ich dir da nicht ausführlicher weiterhelfen kann!

      Liebe Grüße,
      Heidi

  2. Liebe Heidi,
    ja, Signatur war plötzlich weg – ein paar Tage hat es ja funktioniert – hab mir die html- Datei angesehen- da war kein Schutz mehr, obwohl ich das Häkchen gesetzt hatte…. vielleicht findest du ja was dazu.
    Danke dir und

    liebste Grüße Tanja

  3. Bei mir klappt es auch nicht.
    1. Apple Mal findet die neue Signatur nicht , damit ich sie Auswählen kann.
    2. Und die Bilder darin werden nicht geladen, obwohl sie über ein Content Netzwerk kommen müßten. Habe sie über einen Generator erzeugt: si.gnatu.re. Die HTML-Datei dazu funktioniert nämlich, die ich bekomen habe, aber nicht im Mail von Apple..

    1. Es funktioniert jetzt.
      Man muss aufpassen, wenn man mehrere Email-Konten verwaltet, welches Konto man auswählt um die neue Signatur zu erstellen.
      Die Bilder werden jetzt auch geladen.

      Danke und Gruß, Goesta

      1. Hallo Goesta,

        vielen Dank für dein Feedback.
        Leider kam ich nicht eher zum Antworten – aber jetzt lese ich, dass das Problem bereits gelöst ist.

        Es stimmt allerdings – ganz so intuitiv ist es bei AppleMail leider nicht und es gibt hin und wieder Stolperfallen.
        Aber schön, dass du die Lösung gleich mitlieferst. Falls ich nochmal zu dem Problem befragt werde.
        Ich hätte Nr. 2 jetzt auch so adhoc auch nicht beantworten können.

        Liebe Grüße,
        Heidi

  4. Liebe Heidi,
    vielen lieben Dank! Die einzige verständliche Erklärung, die ich im Netz gefunden habe. Magst du auch noch einen Beitrag schreiben, wie ich die HTML-Signatur auch auf dem iPad und iPhone einrichte?

  5. Liebe Heidi, Du bist meine Heldin des heutigen Tages. Man kann mir ja so leicht eine Freude machen 🙂 Endlich hab ich das mal kapiert, wie man Signaturen erstellt, die IMMER gut aussehen. Vielen Dank für die tolle und verständliche Anleitung.
    Liebe Grüße,
    Dani

  6. Hallo Heidi,
    super Anleitung, klappt auch auf Anhieb. Sieht super aus und ich freue mich sehr.
    Einzig die Darstellung in iOS Mail und vielleicht auch anderen Programmen ist etwas „verrutscht“. Der Text rutscht unter das Bild und den Kasten. Lässt sich das bei Euch nachvollziehen bzw. habt Ihr vielleicht sogar eine Lösung dafür?
    Vielen Dank
    Mark

  7. Hallo Heidi,
    vielen Dank für die Anleitung. Ich habe eine responsive Signatur erstellt, die bei kleineren Handy-Displays umbricht bzw. die Schrift verkleinert.

    Leider scheint Apple Mail das zu unterbinden. Ist dir bekannt wie man das lösen könnte?

    Liebe Grüße, Markus

  8. Liebe Heidi,

    eine sensationelle Erklärung! Ich habe mehrfach geschmunzelt, ja sogar gelacht.

    Und funktioniert hat es auch noch.

    Viel besser als das fummelige YouTube Video von 1963, mit dem ich das vor ein paar Jahren mal mehr schlecht als recht geschafft hatte.

    Schöne Weihnachten
    Alex

  9. Liebe Heidi

    Super Erklärung hat sofort geklappt. Grafik wurde auch angezeigt, aber die Verlinkung über die Grafik funktioniert nicht. Wollte Instergram und Facebook Logo gleich auf unsere Seite verlinken.
    Was kann das Problem sein. Habe auf followyoureyes.de/blog/email-client-signatur-online-erstellen Grafik die URL hinterlegt. Grafik wird angezeigt.

    1. Hallo lieber Erwin,

      das kann ich leider aus der Ferne nicht beantworten. Ich würde vermuten, dass die Grafik nicht – oder nicht richtig – verlinkt ist. Funktioniert der Code denn, wie er funktionieren soll? Du kannst den Code in eine Datei mit der Endung .html speichern und dann testweise mal im Browser öffnen und überprüfen, ob an der Stelle noch alles funktioniert.

    2. Hallo Erwin,
      ich habe gleiches Problem, die Social Media Buttons tauchen nicht auf und somit kann ich die Verlinkung auch nicht sehen. Hast Du zwischenzeitlich eine Lösung gefunden?
      Viele Grüße
      Nadine

  10. Hi Heidi,

    vielen lieben Dank! Beim ersten Mal hat alles einwandfrei funktioniert. Dann hab ich die Signatur noch mal etwas geändert und jetzt bleibt immer alles leer – auch wenn ich nach den selben Schritten vorgehe. Am html kann es nicht liegen – ich hab das einfach mal umbenannt und getestet und dann ging alles einwandfrei. Hast du eine Idee, woran es liegen könnte – letzte Woche ohne Probleme, heute nicht mehr machbar…

    Die Signatur bleibt dann einfach ganz leer…

    Lieben Gruß
    Fabian

  11. Super! Vielen lieben Dank für die ausführliche Beschreibung! Hat super geklappt und sieht jetzt noch professioneller aus! Danke!!

  12. Liebe Heidi,

    großartige Beschreibung!
    Hat alles super geklappt und ich kann mich den anderen nur anschließen: Beste Beschreibung, die ich finden konnte, inklusive aller YouTube-Videos.
    Plus: Schön, auch mal ein Tutorial von einer Frau zu lesen, davon gibt es viiiiiel zu wenige für Informatik-Themen 🙂 Danke dafür!

    Lg,
    Christina

  13. Hallo Heidi,

    vielen Dank für diesen Blogbeitrag – du warst mir eine riesen Hilfe <3

    Ich hätte da noch eine Frage:
    Viele Mail Programme (unter anderem Outlook), zeigen Bilder, die aus dem Internet sind, aus datenschutzrechtlichen Gründen (bäh) nicht an, erst wenn man auf "..herunterladen.." klickt.
    Hast du eine Idee wie das Logo oder z.B. social Links mit Bildern gleich angezeigt werden, und man dem Mail Programm die "Sicherheit" gibt, dass da kein Virus drauf ist oderso..
    Bin bissi verzweifelt.

    Danke schon mal!
    Luisa

  14. Hi Heidi,

    vielen Dank für die super erklärung. Ich hatte das vor ein paar Jahren schon mal gemacht, wusste auch noch irgendwie wie es geht, aber der Schreibschutz, den habe ich vergessen.

    Es geht alles auch genau so unter Big Sur. Nur V8 statt V4 bei mir.

    Eine Frage. Wie bekomme ich die Signatur jetzt auf iPhone? Hast du das schon ausgeknobelt? Ich finde dazu nix…

    Liebe Grüße

    Jörg

  15. Danke für die Anleitung. Leider klappt das bei mir nicht 🙁

    Tausche ich im HTML der Signatur den Bereich aus, ist nach dem Neustart von Mail die Signatur komplett leer. Nutze Mail v14.0

  16. Hallo Heidi,

    Danke für dieses klasse How-To.
    Seit kurzem versuche ich mir Grundlagen im Web-Development anzueignen und da kommt dein Tutorial richtig gut, um mein Erlerntes gleich mal auszuprobieren. Und alles funktioniert !

    lg

  17. Liebe Heidi
    Ich habe ein neues MacBook Air (M1, 2020) Version 11.5.2
    Irgendwie schaffe ich es nicht, die E-Mail-Signatur gem. Anleitung zu installieren. Kann es sein, dass es daran liegt, dass ich V8 verwende und die Anleitung auf der V4 basiert?
    Wäre mega dankbar, für eine Hilfestellung!
    Liebe Grüsse, Madeleine

  18. Moin aus den hohen Norden,

    ich habe genossen dein Tut zu lesen. Keine langweile, bei einem „langweiligen“ Thema. Tolle Umsetzung, tolle Erklärung. Ich schaue mir gerne auch deine anderen Rubriken gerne an. Bleib‘ so menschlich wie du bist.

    Viele Grüße aus Oldenburg,

    Ilir

  19. Hi, der Beitrag ist zwar schon alt, aber hat mir schon zweimal geholfen, tausend Dank dafür!! Und ich liebe die Formulierung „Die ersten fünf Zeilen sind Lava“ :-DDD

  20. Hi Heidi,

    diese Tutorial hat mir damals ein wirklich großes Mysterium und Ärgernis beseitig. Ich habe gerade mal wieder meine Email Signatur ändern / updaten wollen. (Der Bart ist ab, da musste ein neues Foto rein.) Aber leider funktioniert es nicht mehr.

    Der HTML Kram ist klar und funktioniert. Ich Schreibschütze die Datei nachdem ich meinen Code unter der Lava eingefügt habe. Starte Mail neu und Plopp, ist die Datei wieder klein und enthält den Plstzhalter, den ich eingefügt habe, um die Datei ‚Neu‘ zu machen, damit ich sie finde.

    Ich habe auch mal das ganze System runtergefahren, weil hey, bester lebensrettender Computerbefehl. Aber nein. Mehrere Versuche. Kein Erfolg.

    Das Verzeichnis heisst mittlerweile V9, aber es hat vor ein paar Monaten auch noch geklappt. Hast Du ne Idee?

    Irgendwie habe ich lange nix gefunden zu dem Thema. auch zweisprachig gesucht. Bis endlich Dein Tutorial mein Problem gelöst hat. Deswegen bist Du jetzt die Expertin! 😉

    Und Kür. Bekommst die gleiche Signatur auch irgendwie ins iDevice? Da habe ich so nen mittelguten Workaround mit mir selber schicken und Copy Paste, aber ist auch wackelig und funktioniert nicht immer und verschwindet auch manchmal wieder. Was keinen Sinn macht.. Aaaargh.

    Liebe Grüße

    Jörg

Schreibe einen Kommentar zu Birgitta Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht.