Attraktive Signaturen für Apple Mail erstellen – Teil 1 – eine Signatur basteln

Apples Mail Programm hat eine ganze Reihe Funktionen mitbekommen. Aber bei den Signaturen hat der Hersteller etwas gespart. Standardmäßig kann man nur reine Text-Signaturen verwenden. Mit ein paar Tricks und etwas HTML- oder CSS-Wissen lassen sich jedoch durchaus attraktive Signaturen verwenden.

Vorbedingungen
Zunächst einmal basteln wir uns eine geeignete Signatur. Im zweiten Teil des Artikels versuchen wir dann, Apples Mail Programm diese Signatur unterzuschieben. Benötigt wird dazu ein einfaches Textprogramm oder ein dezidierter HTML-Editor oder CSS-Editor, um eine entsprechende Datei zu erstellen, da es sich hierbei um reine HTML-/CSS-Dateien handelt.

Geeignete Werkzeuge sind zum Beispiel KOD, SubEthaEdit, Smultron, TACO, Text Wrangler oder Fraise, die ich in den Artikeln EINS und ZWEI bereits vorgestellt habe.

Eine Signatur bauen

Das Ziel ist es, auch ohne große HTML- und CSS-Kenntnisse eine attraktive Signatur zu gestalten. Dazu kann die Vorlage dienen, die ich ausführlich erläutern werde. Diese wird zunächst als HTML-Datei gespeichert. So kann man im Browser immer bequem kontrollieren, wie das Endergebnis aussieht.

Wir gestalten die Signatur nicht als HTML-Tabelle, sondern legen deren Form über <div>-Elemente fest. Im ersten Element wird eine Zuordnung festgelegt (id=”sig”) und vor allem die Schriftart, -größe und -farbe vergeben, dies geschieht im Style-Element. Hier sieht man auch, dass sich die Werte leicht anpassen lassen, etwa die Schriftgröße, die Auszeichnung lässt sich löschen oder durch italic ersetzen. Im hinteren Teil des Style-Element steht noch eine Beschreibung für eine Umrandung und die Größe des daraus entstehenden Rahmens.

<div id=”sig” style=”font-family: Helvetica; font-size: 11px; font-weight: bold; border: 1px solid #e7e7d4; width: 480px; height: 240px;”>

Im nächsten Schritt hübschen wir die Signatur mit einem Foto auf. Das ist zwar sehr umstritten, ob das sein muss, aber weglassen kann man das Bild ja noch immer. Wichtig: Das Bild muss auf einem Server liegen, der öffentlich erreichbar ist (eigener Server oder ein Bilderdienst). Über die Variable “style” wird wieder das Aussehen bestimmt, in diesem Fall Ausrichtung: links (float: left), sowie Breite und Höhe.  src=”http://files.me.com/axhei/g1pgf6″ beinhaltet die ganz normale öffentlich zugängliche Adresse des Bildes.

<img style=”float: left; width: 190px; height: 240px;” src=”http://files.me.com/axhei/g1pgf6″ alt=”Andreas Reitmaier Fotografie” />

In den nächsten Zeilen folgen dann die eigentlichen Adressdaten. Wobei der Name bzw. die Firmenbezeichnung zuvor noch mit dem Attribut “strong”, also Fettdruck markiert wird, der wiederum noch einmal speziell formatiert wird. Die Werte sind  margin-top – der Abstand zum darüber liegenden Element, die Farbe, die Zeichengröße, die Linienhöhe, sowie die Gesamtbreite. Die Anschrift wird nicht gesondert formatiert und übernimmt die Formatierung, die  weiter oben bereits besprochen wurde. Es ist darauf zu achten, dass Sonderzeichen und Umlaute, hier das ß in Straße, codiert werden müssen: ß wird zu &szlig; das ä wird zu &auml; das große Ä zu &Auml; entsprechend die anderen Umlaute.

<strong style=”margin-top: 2px; color: #594b38; font-size: 13px; line-height: 16px; width: 235px;”>Andreas Reitmaier | Fotografie</strong>
Parkstra&szlig;e 9
34317 Habichtswald

Die nächste Zeile dient nur zur Formatierung, damit die E-

Mail-Adresse etwas vom Rest abgesetzt ist. Hier wird ein zusätzliches div-Element mit einer bestimmten Linienhöhe eingefügt.

<div style=”height: 8px; line-height: 8px;”></div>

Danach folgt die Formatierung für den Schriftzug “E-Mail:”, der direkt danach auch so eingefügt wird. Nun folgt der Link, aufgerufen mit der offen Klammer “<a” dort wird zunächst die Farbe und die Textauszeichnung festgelegt. Anschließend folgt der eigentliche Link. Über den Befehl “mailto://adresse” wird direkt das Mailprogramm aufgerufen. Vor dem schließenden </a> steht noch einmal die Adresse im Klartext, die auch angezeigt wird. Dem gleichen Schema folgt in der darunter liegenden Zeile die Angabe der Internetadresse. Als letztes Element beendet </div> den Informationsblock.

<div style=”font-size: 11px; color: #a09f6c; line-height: 14px;”>
E-Mail:<a style=”color: #a09f6c; text-decoration: none;” href=”mailto://fotos@reitmaier.info”> fotos @ reitmaier . info</a>
<div style=”font-size: 11px; color: #a09f6c; line-height: 14px;”>Internet:<a style=”color: #a09f6c; text-decoration: none;” href=”http://www.reitmaier-foto.de”> www.reitmaier-foto.de</a></div>

</div>

Mit den oben genannten Zeilen lässt sich nun die persönliche Signatur erstellen. Alle notwendigen Elemente sind vorhanden und können natürlich beliebig erweitert oder gestrichen werden. Mit den Auszeichnungen kommt man dann relativ schnell zurecht und passt diese an eigene Wünsche an.

Im zweiten Teil des Artikels, der am Freitag erscheinen wird, zeige ich dann, wie man die Signatur in das passende Format umwandelt und diese Apple Mail “unterschiebt”. Hier noch einmal der komplette Signatur-Code zum bequemen kopieren:

<div id=”sig” style=”font-family: Helvetica; font-size: 11px; font-weight: bold; border: 1px solid #e7e7d4; width: 480px; height: 240px;”>
<img style=”float: left; width: 190px; height: 240px;” src=”http://files.me.com/axhei/g1pgf6″ alt=”Andreas Reitmaier Fotografie” />
<strong style=”margin-top: 2px; color: #594b38; font-size: 13px; line-height: 16px; width: 235px;”>Andreas Reitmaier | Fotografie</strong>
Parkstra&szlig;e 9
34317 Habichtswald
<div style=”height: 8px; line-height: 8px;”></div>
<div style=”font-size: 11px; color: #a09f6c; line-height: 14px;”>
E-Mail:<a style=”color: #a09f6c; text-decoration: none;” href=”mailto://fotos@reitmaier.info”> fotos @ reitmaier . info</a>
<div style=”font-size: 11px; color: #a09f6c; line-height: 14px;”>Internet:<a style=”color: #a09f6c; text-decoration: none;” href=”http://www.reitmaier-foto.de”> www.reitmaier-foto.de</a></div>
</div>

 

3 Gedanken zu „Attraktive Signaturen für Apple Mail erstellen – Teil 1 – eine Signatur basteln“

  1. ich möchte das Ergebnis gern, wie vorgeschlagen, im Browser kontrollieren – aber das Bild wird nicht von seiner öffentlichen Adresse aufgerufen, sondern der Browser sucht es auf meiner Festplatte, im Beispiel oben unter der Adresse
    file:///Users/gernot/Documents/Bean/Mail%20Signatur/TextWrangler/â€%C2%9Dhttp://files.me.com/axhei/g1pgf6″
    Mache ich was falsch?

    Antworten
    • Hallo,

      das Bild muss auf einem öffentllichen Server vorliegen und auch über eine eindeutige Internet-Adresse erreichbar sein. Wenn ich das richtig sehe, liegt es auf einem me.com Speicherplatz. Dieser ist als “file” aber nicht öffentlich erreichbar. Es muss ein echter Link sein, den jederman offen einsehen kann.

      PS: Entschuldigung für die späte Antwort, ich war die Woche leider nur sehr selten online.

      Antworten

Schreibe einen Kommentar

zehn + vierzehn =