Nadine: E-Mail Signatur mit HTML erstellen

Hallo zusammen,

ich bin blutiger Anfänger im Bereich HTML, eigentlich Grafikdesignerin. Nun hat ein Kunde mich gefragt, ob ich ihm eine E-Mail Signatur in HTML erstellen könnte. Anforderungen waren: anklickbare Logos, E-Mail Adresse und Telefonnummer. Ich bin folgendermaßen vorgegangen:

  • Bilder der Logos und Icons per FTP auf einen Webserver hochgeladen
  • In Dreamweaver dann folgende Signatur erstellt (s. u.)
  • Zu Testzwecken die HTML-Datei in mein eigenes Mailprogramm (Apple Mail) eingebunden und verschickt.

Bei mir wurde alles richtig angezeigt, die Logos, Telefonnummern etc. waren anklickbar. Beim Kunden kam die Signatur allerdings zerschossen an. Alle enthaltenen Bilder wurden nicht angezeigt, obwohl ja auf einem Webserver (hier liegt auch die Website des Kunden) abgelegt.

Was mache ich falsch? Hab das Gefühl, ich sehe den Wald vor lauter Bäumen nicht😉 Hier der Code, den ich geschrieben habe.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PL-Signatur</title>
<style type="text/css">
body {
}
</style>
<link href="signatur.css" rel="stylesheet" type="text/css">
</head>

<body>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Signatur</title>
</head>
<body>
	<div>
	  <font face="Verdana" size="2px"><b>Dr. Erika Mustermann</b></font>
	</div>
	<div>
	  <font face="Verdana" size="2px">Example Development Expert</font>
	</div>
	<div>
<font face="Verdana"><br></font></div><div><a href="https://example.org" target="_blank"><img src="https://example.org/emailsignatur/example_300x87.png" alt="example logo"></a>
	</div>
	<br>
	<br>
	<div>
	  <font face="Verdana" size="2px"><b>EXAMPLE SOLUTIONS S.A.</b></font>
</div>
	<div>
	  <font face="Verdana" size="2px">Demogasse 815 | 12345 Dingenskirchen | Germany</font>
	</div>
	<br>
	<div>
	  <a href="tel: 4915412123123" target="_blank"><img src="https://example.org/emailsignatur/telefon_15px.png" alt="telefonnummer" style="padding-right: 5px"><font face="Verdana" size="2px">+49 15412 123 123</font></a>
	</div>
	<div>
		<a href="mailto:em@example.org" target="_blank"><img src="https://example.org/emailsignatur/brief_17px.png" alt="e-mail" style="padding-right: 5px"><font face="Verdana" size="2px">em@example.org</font></a>
	</div>
	<div>
		<a href="https://outlook.office365.com/owa/calendar/EXAMPLINGS@example.onmicrosoft.com/bookings/" target="_blank"><img src="https://example.org/emailsignatur/kalendar_16px.png" alt="microsoft bookings" style="padding-right: 5px"><font face="Verdana" size="2px">Make an online appointment</font></a>
	</div>
	<br>
	<br>
<div>
		<a href="https://example.org" target="_blank"><img src="https://example.org/emailsignatur/example_40px.png" alt="logo" style="float:left; padding:10px"></a>
</div>
	<div>
		<a href=" https://www.linkedin.com/..." target="_blank"><img src="https://example.org/emailsignatur/linkedin_40px.png" alt="logo" style="float:left; padding:10px"></a>
	</div>
<div>
  <a href="https://raps.example.org" target="_blank"><img src="https://example.org/emailsignatur/raps_40px.png" alt="logo" style="float:left; padding:10px"></a>
	</div>
</body>

Bin für jeden Tipp dankbar.

  1. Liebe Nadine,

    es wurde in der Vergangenheit immer wieder beobachtet, dass das Nachladen externer Resourcen für Tracking missbraucht wurde. Ein Bild mit genau einem (transparenten!) Pixel als Inhalt sorgte anhand seiner Adresse dafür, dass ein fremder Server Daten über diese Mail verarbeiten konnte.

    Das Nachladen von externen Resourcen, um eine E-Mail komplett und korrekt anzeigen zu können, ist seit Jahren per Voreinstellung deaktiviert. Empfänger solcher Mails müssen daher in aller Regel erst ausdrücklich veranlassen, dass ihr Mailprogramm diese Inhalte nachlädt und anzeigt.

    Vielleicht helfen Dir sogenannte Data-URIs weiter? Das bedeutet, dass die Bilddaten sozusagen in der Adresse des <img>-Elements stehen. Das bläht den Datenumfang einer Mail natürlich auf, weil nun die Bilddaten nicht von irgendeinem Server referenziert, sondern in der Mail direkt mitversandt werden.

    Wenn der Anwender seine Mails grundsätzlich nur im reinen Textformat anzeigen lässt, auch wenn es eine HTML-Alternative dafür gibt, sieht er natürlich schon wieder nix. Aber das soll dann wohl auch so sein. Wenn nicht, dann müssten die Bilddaten als reguläre Anhänge versandt werden, die dann im HTML referenziert werden - aber auch hier kann dann das Mailprogramm sagen, dass es die Mail erst ohne die Anhänge präsentiert, die vom Benutzer dann erst explizit nachgeladen werden müssen (zumindest in meiner mobilen Mail-App ist das so).

    Liebe Grüße

    Felix Riesterer

    1. Vielleicht helfen Dir sogenannte Data-URIs weiter? Das bedeutet, dass die Bilddaten sozusagen in der Adresse des <img>-Elements stehen. Das bläht den Datenumfang einer Mail natürlich auf, weil nun die Bilddaten nicht von irgendeinem Server referenziert, sondern in der Mail direkt mitversandt werden.

      Eher nicht, es gibt zu viele Clients, die das nicht verarbeiten.

      Wenn der Anwender seine Mails grundsätzlich nur im reinen Textformat anzeigen lässt, auch wenn es eine HTML-Alternative dafür gibt, sieht er natürlich schon wieder nix. Aber das soll dann wohl auch so sein. Wenn nicht, dann müssten die Bilddaten als reguläre Anhänge versandt werden, die dann im HTML referenziert werden - aber auch hier kann dann das Mailprogramm sagen, dass es die Mail erst ohne die Anhänge präsentiert, die vom Benutzer dann erst explizit nachgeladen werden müssen (zumindest in meiner mobilen Mail-App ist das so).

      Eher das. Stichwort CID / Content-ID. Der Support ist gut. Ob die reinen Text-Leser mit den Bildern was anfangen können, ist eine andere Frage…

      Bei einem blutigen Anfänger stellt sich mir gerade eher die Frage, inwiefern das realisierbar ist…

    2. Vielen Dank für Eure ausführlichen Antworten und die Arbeit, die Ihr Euch gemacht habt! Das ganze Thema ist doch viel komplexer, als ich dachte. Daher werde ich dem Kunden das Ganze wohl ausreden... übersteigt definitiv meine Kenntnisse (Schuster, bleib' bei Deinen Leisten😉)

      Liebe Grüße Nadine

    3. Lieber Felix,

      vielen Dank für Deine ausführliche Antwort.

      Dass das Mailprogramm des Empfängers das Nachladen externer Ressourcen verhindern kann, hatte ich mir schon gedacht. Ich denke, ich werde dem Kunden diese HTML-Signatur ausreden... zu viele Fallstricke😉

      Liebe Grüße Nadine

      1. Hi,

        Dass das Mailprogramm des Empfängers das Nachladen externer Ressourcen verhindern kann,

        ist eher umgekehrt - nur auf ausdrücklichen Wunsch des Users kann aktiviert werden, daß externe Resourcen nachgeladen werden (im Thunderbird kann man das für eine einzelne Mail erlauben (iirc), oder für eine Domain, oder sogar generell).

        cu,
        Andreas a/k/a MudGuard

      2. Ich denke, ich werde dem Kunden diese HTML-Signatur ausreden...

        Naja, Nina. Stell Dir mal vor, dann kommt einer vorbei, der sagt „Geht. Mach ich.“ - und es auch kann.

        Statt von „Null auf Hundert“ und das dem Kunde gegen Geld anbieten zu wollen macht es einen besseren Eindruck, wenn man dem sagt:

        „Hab mich schlau gemacht: Entwerfen gern, aber für die Realisierung brauchst Du einen Fachmann. Ich kann „Grafikdesign“, „Computer“ kann jemand anderes."

        Ich denke, die Kunden verstehen das und honorieren das sogar: Die bringen Ihr Auto ja auch nicht bei Problemen mit der Elektrik zum Lackierer und freuen sich, dass jemand sagt „Nein, das kann ich nicht.“ statt es zu probieren und die Sache zu „verpfuschen“.

        Es sei denn natürlich, man hat ähnliche bzw. vergleichbare Herausforderungen schon erfüllt und weiß „Das ist mein Thema, SOWAS kann ich auch dann lösen, wenn ich jetzt noch nicht genau weiß, wie.“

        1. Hallo,

          Ich denke, die Kunden verstehen das und honorieren das sogar

          ja, viele. Sicher nicht alle.

          Die bringen Ihr Auto ja auch nicht bei Problemen mit der Elektrik zum Lackierer und freuen sich, dass jemand sagt „Nein, das kann ich nicht.“ statt es zu probieren und die Sache zu „verpfuschen“.

          Ärzte (Allgemeinmediziner) tun das gern: Anstatt den Patienten zum Spezialisten zu schicken, versuchen sie erstmal wochenlang selbst, das Symptom zu kurieren, obwohl es nicht ihr Fachgebiet ist.

          Einen schönen Tag noch
           Martin

          --
          Мир для України.
          1. Hallo Martin,

            Anstatt den Patienten zum Spezialisten zu schicken, versuchen sie erstmal wochenlang selbst, das Symptom zu kurieren, obwohl es nicht ihr Fachgebiet ist.

            Was unter anderem daran liegt, dass Ärzte für ihre Bemühungen bezahlt werden und nicht für Erfolg. Steht auf jeder Honorarrechnung…

            Rolf

            --
            sumpsi - posui - obstruxi
        2. Hi,

          genau so habe ich dem Kunden das auch gesagt😀 Mal sehen, ob er jemanden findet, der das so umsetzen kann.

          Viele Grüße Nadine

      3. Ich denke, ich werde dem Kunden diese HTML-Signatur ausreden...

        Ich frage mich immer wieder wer tatsächlich glaubt dass mich interessiert was in den Signaturen steht, oder dass ich das überhaupt wüsste selbst wenn ich in permanentem Mailkontakt mit jemandem stehe.

        Wenn dir eine bessere Formulierung als "habt ihr sonst nichts zu tun" einfällt, hättest du nochmal ein Argument 😀

        1. Hi,

          Ich frage mich immer wieder wer tatsächlich glaubt dass mich interessiert was in den Signaturen steht,

          Dich interessiert das vielleicht nicht, aber die selbsternannten AbmahnanwälVerbraucherschützer …

          cu,
          Andreas a/k/a MudGuard

          1. Hallo,

            Ich frage mich immer wieder wer tatsächlich glaubt dass mich interessiert was in den Signaturen steht,

            Dich interessiert das vielleicht nicht, aber die selbsternannten AbmahnanwälVerbraucherschützer …

            ja, die interessieren sich aber nur dafür, dass eine geschäftliche e-Mail-Nachricht auch die korrekte Firmenanschrift nebst verantwortlichem Geschäftsführer nennt. Das muss nicht in der Signatur sein, wird aber meist so gemacht.

            Ob diese Signatur aber Plain Text ist oder hübsch formatiert als HTML, ist den sogenannten Verbraucherschützern ziemlich egal.

            Außerdem "missbrauchen" viele Firmen auch die Signatur ihrer ausgehenden Mails, um dort Werbung zu plazieren. Wer die wirklich zur Kenntnis nimmt, steht auf einem anderen Blatt.

            Einen schönen Tag noch
             Martin

            --
            Мир для України.
            1. Ob diese Signatur aber Plain Text ist oder hübsch formatiert als HTML, ist den sogenannten Verbraucherschützern ziemlich egal.

              Nicht nur den „sogenannten Verbraucherschützern“. Den echten erst recht. Es sei denn die müssen die HTML-Ansicht überhaupt erst erlauben, weil kein vernünftiger Mailtext gesendet wurde.

              Außerdem "missbrauchen" viele Firmen auch die Signatur ihrer ausgehenden Mails, um dort Werbung zu plazieren.

              Ja.

              Wer die wirklich zur Kenntnis nimmt, steht auf einem anderen Blatt.

              Ja. Wer weiter als bis zum „MfG“ ließt hat bekanntlich einen an der Waffel. Das ganze Gerungse unter der Nachricht sind Meta-Daten, die man sich eher nicht anschaut.

        2. Hallo,

          Ich denke, ich werde dem Kunden diese HTML-Signatur ausreden...

          Ich frage mich immer wieder wer ...

          Du glaubst gar nicht wieviele Leute auf das Verwenden eines Adressbuchprogramms verzichten, weil sie die Kontaktdaten jederzeit aus ihren Mailwechseln klauben können...

          Gruß
          Kalk

          1. Hi,

            Ich denke, ich werde dem Kunden diese HTML-Signatur ausreden...

            Ich frage mich immer wieder wer ...

            Du glaubst gar nicht wieviele Leute auf das Verwenden eines Adressbuchprogramms verzichten, weil sie die Kontaktdaten jederzeit aus ihren Mailwechseln klauben können...

            das glaube ich tatsächlich nicht - oder besser gesagt: Ich verstehe nicht, warum man sich die Arbeit so umständlich machen sollte.

            Einen schönen Tag noch
             Martin

            --
            Мир для України.
            1. Hallo Martin,

              öhhmmmmm…

              Rolf

              --
              sumpsi - posui - obstruxi
            2. Ich verstehe nicht, warum man sich die Arbeit so umständlich machen sollte.

              Das Adressbuch ist ungleich umständlicher, besonders wenn zu einer Firma oder Person nur temporär Kontakt hat. (Außerdem müsste man bei Adressbüchern ggf. bedenken und untersuchen, ob die Speicherung personenbezogener Daten überhaupt noch erlaubt ist.)

              Das hat dann auch viel damit zu tun, dass die üblichen Anhänge für das Adressbuch a) meist fehlen und b) endlich mal in JSON oder JAML definiert werden sollten, Kalendereinträge dto. - man sollte da endlich das aktuelle Jahrtausend würdigen.)

              1. Hi,

                Ich verstehe nicht, warum man sich die Arbeit so umständlich machen sollte.

                Das Adressbuch ist ungleich umständlicher

                umständlicher?? Je nach Mailclient ein Klick ins To- oder CC-Feld oder auf einen Button daneben, ein paar Zeichen des gesuchten Namens tippen und aus den aufpoppenden Vorschlägen den passenden auswählen.

                (Außerdem müsste man bei Adressbüchern ggf. bedenken und untersuchen, ob die Speicherung personenbezogener Daten überhaupt noch erlaubt ist.)

                Wir reden hier wohl vom geschäftlichen Mail-Kontakt. Es wäre also zunächst zu klären, ob die Kontaktdaten im geschäftlichen Umfeld überhaupt als personenbezogen im Sinne der DSGVO gelten. Immerhin sind es notwendige Angaben, um mit einem Geschäftspartner in Kontakt zu treten.

                Das hat dann auch viel damit zu tun, dass die üblichen Anhänge für das Adressbuch

                Anhänge für das Adressbuch? Was meinst du damit?

                Einen schönen Tag noch
                 Martin

                --
                Мир для України.
                1. Ich verstehe nicht, warum man sich die Arbeit so umständlich machen sollte.

                  Das Adressbuch ist ungleich umständlicher

                  umständlicher?? Je nach Mailclient ein Klick ins To- oder CC-Feld oder auf einen Button daneben, ein paar Zeichen des gesuchten Namens tippen und aus den aufpoppenden Vorschlägen den passenden auswählen.

                  Das geht bei mir auch ohne Adressbuch. Also mein Mailclient (Thunderbird) sucht die Adressen auch aus den vorhandenen Mails raus. Für die schnelle Suche nach Absendern und so weiter hat er sowieso einen Index…

                  Das hat dann auch viel damit zu tun, dass die üblichen Anhänge für das Adressbuch

                  Anhänge für das Adressbuch? Was meinst du damit?

                  Anno 2020 notlos kompliziertes Zeug wie:

                  1. Hallo,

                    Anhänge für das Adressbuch? Was meinst du damit?

                    Anno 2020 notlos kompliziertes Zeug wie:

                    kannte ich tatsächlich noch nicht, danke.

                    Einen schönen Tag noch
                     Martin

                    --
                    Мир для України.
              2. Hallo Raketenwilli,

                (Außerdem müsste man bei Adressbüchern ggf. bedenken und untersuchen, ob die Speicherung personenbezogener Daten überhaupt noch erlaubt ist.)

                Das ist eine interessante Frage, aber personenbezogene Daten sind personenbezogene Daten.

                Und wenn ich an die erfolgreiche Bemühung der Nutzlos-Branche denke, Dinge wie Bestätigungs-EMails als unerwünschte Kontaktaufnahme einstufen zu lassen, dann könnte man auf die Idee kommen, dass geschäftliche Kontakte noch viel schützenswerter sind als private. Vielleicht kann man mich sogar abmahnen, weil ich eine Mail bekommen habe, in der eine Mailsignatur mit Kontaktdaten steckt, und ich Festplatte mit dieser Mail darauf nicht unverzüglich in den Shredder gesteckt habe. Und den Bildschirm, der sie anzeigte und in dessen Display sie nun vielleicht mit einem Lichtquant pro Jahr nachleuchtet, gleich hinterher. Oh, die Retina - meine Augen müsste ich auch noch ausreißen und an die Schweine verfüttern. Alles im Namen des Datenschutzes.

                Rolf

                --
                sumpsi - posui - obstruxi
                1. Vielleicht kann man mich sogar abmahnen, weil ich eine Mail bekommen habe, in der eine Mailsignatur mit Kontaktdaten steckt,

                  Wenn Du die speicherst oder keinen Datenverarbeitungsvertrag mit dem Betreiber des Mailservers hast oder die Rechte aus Art. 12ff (Kapitel 3) der DSGVO missachtest…

                  und ich Festplatte mit dieser Mail darauf nicht unverzüglich in den Shredder gesteckt habe. Und den Bildschirm, der sie anzeigte und in dessen Display sie nun vielleicht mit einem Lichtquant pro Jahr nachleuchtet, gleich hinterher. Oh, die Retina - meine Augen müsste ich auch noch ausreißen und an die Schweine verfüttern. Alles im Namen des Datenschutzes.

                  Mal abgesehen von der erstaunlichen, an Tatsachen nicht interessierten Anzahl von Richter(inne)n an Landgerichten, die in meinem Sachen willkürten (am OLG und bei Amtsgerichten ist die Situation deutlich besser): Man kann es mit der Angst auch übertreiben. Denn „beweispflichtig“ ist, wer etwas behauptet. Man darf allerdings als Betroffener das Bestreiten nicht vergessen, wenn unwahr behauptet (vulgus: gelogen) wird.

          2. Ich muss mich korrigieren.

            Telefonnummer hab ich mir auch schon aus Mails geholt.
            Was ich meinte war das ganze Aufgebot an Bildchen und Sprüchen und wasauchimmer, das teilweise automatisch vom Firmenserver an Mails angehängt wird.

  2. Hallo Nadine,

    zunächst einmal: Du solltest keine Realdaten in ein Forum posten. Das verletzt Persönlichkeitsrechte deiner Kunden. Ich habe mir deshalb die Arbeit gemacht, alle Webadressen, Namen, Telefonnummern und Adressen durch Dummys zu ersetzen. Hoffentlich habe ich nichts übersehen. Und die Versionshistorie des Beitrags habe ich gelöscht.

    Sodann frage ich mich, warum die Signatur aus zwei HTML Blöcken besteht. Einmal <!doctype html>, wo nur ein signatur.css eingebunden wird, und dann ein neuer Doctype, diesmal HTML 4 (was seit vielen Jahren obsolet ist), mit der eigentlichen Signatur. Da aber ohne Stylesheet.

    Ich kann mir vorstellen, dass sich hier Mailclients unterschiedlich verhalten. Zum einen sind Mailclients ohnehin für ihre Unterstützung von modernen Features in HTML und CSS bekannt[1]. Zum anderen sind zwei HTML Dokumente hintereinander in einer Datei etwas, das meines Wissens nirgends spezifiziert ist und demnach Raum für kreative Deutung lässt. Deswegen kann es sein, dass der Mailclient des Empfängers das Stylesheet nicht beachtet, weil es in einem anderen Dokument steht.

    Styles in einer HTML Mail sind ohnehin so eine Sache. Also eigentlich ist HTML in einer HTML Mail so eine Sache. Der Support ist gruselig, vor allem angesichts der Vielzahl von Mailclients. Das wird hier diskutiert und auf einige Informationsquelle verwiesen.

    Ich habe tatsächlich wenig Ahnung von selbstgemachten HTML Signaturen - aber gerade mal mit meinem steinalten Outlook herumgespielt. Da ist die Signatur letztlich eine Mailvorlage, aber das, was dann bei meinem Empfängerkonto im Webmailer ankommt, hat damit nicht mehr viel zu tun. Ich hatte einen <style> hinzugefügt - der kam nicht an. Statt dessen hatte Outlook alle Angaben, die da drin standen, in style-Attribute hartcodiert.

    Aus gutem Grund - <style> Elemente werden in Mails nicht immer verarbeitet.

    Heißt also: Das, was für Dich in Apple Mail als Mailsignatur funktioniert, muss das bei einem Kunden, der ggf. Outlook verwendet, noch lange nicht funktionieren. Und der Empfänger dieser Mail kann dann immer noch dumm aus der Wäsche gucken.

    Da muss man viel testen, und sich beim HTML auf das nötigste beschränken. Das schlechte alte Table Layout feiert da - passend zu Ostern - fröhlich Urständ.

    Ist das signature.css für deine Signatur relevant? Wieviel steckt da drin? Vermutlich muss das komplett zu style-Attributen umgewandelt werden. Ich hätt ja gern einen Vorschlag gemacht, aber - verdammt - ich habe alle persönlichen Daten aus deinem Posting entfernt und habe jetzt die URL nicht mehr 🤡. D.h. den Domain-Namen konnte ich im Kopf rekonstruieren, aber wo dort das stylesheet stehen soll, weiß ich nicht mehr. Ich bin auch gar nicht so sicher, ob eine Einbindung als relative Adresse, ohne https:// und Domain-Name, in einer Mail beim Empfänger überhaupt funktionieren kann. Also, eigentlich bin ich schon sicher. Nämlich, dass es nicht funktioniert…

    Rolf

    --
    sumpsi - posui - obstruxi

    1. Im gleichen Sinne, wie Zwerge der Scheibenwelt für ihren Humor bekannt sind. Man sagt zum Beispiel: „Die kleinen Mistkerle haben nicht den geringsten Sinn für Humor...“ (Terry Pratchett, Helle Barden) ↩︎