• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Email Signatur mit Logo, Google Fonts und CSS

M

marbach

Neues Mitglied
Hi Leute,

ich habe mal versucht mir eine eigene eMail Signatur zu erstellen die Grafisch einigermaßen ansprechend wirken soll und auch am besten auf allen Endgeräten etwa gleich aussehen sollte. Ich bin wirklich kein Programmierer und habe mal etwas zusammengebastelt was auch schon genau so aussieht wie ich mir das vorstelle.

Das Problem ist, wenn ich die Signatur in meinem Mail Programm (Mail MacOS) anhänge dann zerhaurt es das gesamte Programmfenster. Irgendwie scheint das mit dem CSS zu tun zu haben aber ich weiss leider keine andere Möglichkeit das zu realisieren. Ich hoffe Ihr könnt mir helfen.

schonmal Danke,

LG Marbach

HTML: 
<!DOCTYPE html>
<html>
 
  <head>
    <title>bm_mailSignature</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
    <style type="text/css">
      html, body {
        width: 400px;
        height: 150px;
        margin: 0px;
      }
       
      body {
        background-color: transparent;
      }
       
      .logo {
        position: absolute;
        width: 150px;
        height: 150px;
        left: 0px;
        top: 0px;
      }
       
      .headlineRobo {
        position: absolute;
        font-family:'Roboto Slab';
        font-size: 18px;
        text-align: center;
        color: rgb(1, 4, 15);
        height: 18px;
        left: 140px;
        top: 25px;
        width: 180px;
      }
       
      .lineTitillium {
        position: absolute ;
        font-family:'Titillium Web';
        text-align: center;
        font-size: 12px;
        color: rgb(1, 4, 15);
        height: 18px;
        left: 140px;
        width: 180px;
      }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Titillium+Web" rel="stylesheet" type="text/css">
  </head>
 
  <body>
    ---

<div style="position: relative; width: 400px; height: 150px;">
    <div class="logo"><img src="http://i58.tinypic.com/287g51y.png">
      </div>
    <div class="headlineRobo">Bernd Marbach
      </div>
    <div class="lineTitillium" style="top: 45px;">motion design // 3D generalist
      </div>
    <div class="lineTitillium" style="top: 70px;">+43 676 58 00 414
      </div>
    <div class="lineTitillium" style="top: 87px;">[email protected]
      </div>
    <div class="lineTitillium" style="top: 103px;">www.bernd-marbach.de
      </div>
    </div>
  </body>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
 
Hallo,

dies liegt wohl an „position:asbolute & relative“. Stichwort „float“, solltest du dir mal ansehen.

Lg
 
Hey, danke für die schnelle Antwort. Ich habe das bereits in allen möglichen Varianten durchprobiert aber ohne Erfolg. Gedacht war das ich die einzelnen Elemente "absolut" in einem Container positionere und den dann in einen container float packe aber die Positionen der einzelnen Elemente richten sich dann nicht nach dem Container o_O
 
Was mir jetzt aufgefallen ist nach dem <body> Tag wird nichts mehr geschrieben! Und es fehlte der schließende </html> Tag. Das width & height ist denke ich auch unnötig. Mit dem Mail Mac Os Programm kenn ich mich nicht aus, aber wenn man eine normale HTML-Mail verschickt, dann setzt man die Styles am besten inline ein. Denn das andere übernimmt nicht jeder Mailanbieter.

HTML: 
<!DOCTYPE html>
<html>

  <head>
    <title>bm_mailSignature</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style type="text/css">
      html, body {
        margin: 0px;
      }

      body {
        background-color: transparent;
      }

      .logo {
        position: absolute;
        width: 150px;
        height: 150px;
        left: 0px;
        top: 0px;
      }

      .headlineRobo {
        position: absolute;
        font-family:'Roboto Slab';
        font-size: 18px;
        text-align: center;
        color: rgb(1, 4, 15);
        height: 18px;
        left: 140px;
        top: 25px;
        width: 180px;
      }

      .lineTitillium {
        position: absolute ;
        font-family:'Titillium Web';
        text-align: center;
        font-size: 12px;
        color: rgb(1, 4, 15);
        height: 18px;
        left: 140px;
        width: 180px;
      }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Titillium+Web" rel="stylesheet" type="text/css">
  </head>

  <body>


<div style="position: relative; width: 400px; height: 150px;">
    <div class="logo"><img src="http://i58.tinypic.com/287g51y.png">
      </div>
    <div class="headlineRobo">Bernd Marbach
      </div>
    <div class="lineTitillium" style="top: 45px;">motion design // 3D generalist
      </div>
    <div class="lineTitillium" style="top: 70px;">+43 676 58 00 414
      </div>
    <div class="lineTitillium" style="top: 87px;">[email protected]
      </div>
    <div class="lineTitillium" style="top: 103px;">www.bernd-marbach.de
      </div>
    </div>
  </body>
</html>
 
Es kann auch sein, dass das Emailprogramm den Styletag gar nicht erkennt. Wenn alles nicht funktioniert einfach mal alle Css Befehle in das Stylestatement so wie beim ersten DIV klatschen. Auch wenn das leider unschön ist.
 
Also grundsätzlich solltest Du HTML-Emails wie Webseiten in den 90ern gestalten: mit Tabellen. Viele Email-Programme machen aus CSS-Angaben einen Salat aus Kraut und Rüben, das bingt überhaupt nichts. Und wenn CSS, dann nur Inline - kein zentrales Style-Tag im Kopfbereich. Und ganz ehrlich: Webfonts jeder Art würde ich gleich mal ganz vergessen. Wenn 80 % aller Email-Clients schon Probleme mit float haben, kann man davon ausgehen, dass mindestens genau so viele auch mit Webfonts nichts anfangen können.

Klingt jetzt vielleicht harrsch, aber bei HTML-Email ist jedes ausgefeilte CSS-Design eigentlich vergebene Mühe, das solltest Du Dir echt sparen!
 
Würde ich jetzt nicht so sagen. Jeder gute Mail-Anbieter (Google, gmx, web.de) unterstützt HTML-Emails. Ich hatte aufjedenfall bis dahin nie Probleme.
 
Ob ein Mail-Anbieter HTML-Mails unterstützt oder nicht spielt keine Rolle für die Ausgabe in einem E-Mail-Client wie Outlook oder Thunderbird. Wenn der Client eine Eigenschaft nicht kennt, dann kennt er sie nicht. Gerade Outlook ist bekannt für eine - sagen wir mal - sparsame Unterstützung moderner HTML-Elemente und CSS-Eigenschaften. Ob es Sinn macht sich die Mühe eine Anpassung für diese nicht-kompatiblen Clients zu machen hängt primär von der Zielgruppe der E-Mails ab.
 
Es hat ja auch niemand behauptet, dass die Email-Anbieter und -Clients keine HTML-Emails unterstützen. Tabellen-Layouts sind auch HTML ;-) Aber man kann für sie eben keine HTML-Layouts erstellen wie für die halbwegs modernen Browser.. Float, display und anderes würde ich vermeiden, Webfonts auch. Ist auch die Frage, ob der Email-Empfänger wirklich darauf steht, irgendwas durchgestyltes im Email-Programm zu sehen - ich finde es eher nervig, weil Emails für mich informativ sein sollen.

Und ja, wenn ein Client eine Eigenschaft nicht kennt, dann kennt er sie nicht - wahnsinns Erkenntnis. Aber das führt dann eben dazu, dass die Email im besten Fall nicht ganz so gut aussehen, im schlimmst Fall gar nicht zu lesen ist. Es geht aber auch nicht nur ums Kennen, sondern ums standardkonforme umsetzen der Eigenschaft - und dabei versagen die Email-Clients reihenweise.

Naja,könnt ihr halten wie ihr wollt... Fakt ist nun einmal, dass man Emails nicht wie Webseiten gestalten kann. Viel Erfolg beim Versuch das doch zu machen. Man kann sich bei solchen Sachen natürlich immer nur die funktionierenden Clients heraussuchen und dann annehmen, dass die Zielgruppe die gleichen verwendet, aber das kann man nicht wissen. Mit dem Kopf durch die Wand ist bei Webgestaltung nie der richtige Weg ;-)
 
Ein paar Regeln, wie HTML Mails meiner Erfahrung nach in der Mehrzahl der Clients so aussehen wie sie sollen:

- Doctype Transitional (meistens wird der doctype ignoriert, aber es schadet nicht, das html valide zu halten)
- Ausschließlich Table Layout, keine divs. Spans und Listen innerhalb der Zellen sind meist unproblematisch.
- Styles wo immer möglich mit Attributen duplizieren, Beispiel: <tr height="100" style="height: 100px">
- Alle Eigenschaften, die die Schriftformatierung betreffen in ein <font> tag packen. Standard Webfonts verwenden.
- niemals Hintergrundbilder verwenden, die wenigsten clients können damit umgehen, stattdessen <img> tags. Wenn Text auf Bild sein muss, dann sollte der Text Teil des Bildes sein. Wenn es dynamischer Text ist, Layout ändern^^
- alle Abstände über das table-layout definieren, auf padding und margin verzichten. Abstände durch leere Zeilen und Spalten definieren, die transparente images enthalten.


Beim Versenden aus einer Applikation heraus hat es sich für mich bewährt, alle Bildresourcen in Base64 zu konvertieren und direkt in das src des imagetags zu schreiben. So zählen sie nicht mehr als externer Content und einige Clients zeigen sie standardmäßig an, statt erst den User um Bestätigung zu fragen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben