Fragen zur Erstellung eines HTML-Email-Templates

Greenhorn79 · 20.07.2014

Hallo zusammen,

ich habe gerade ein kleines Projekt für die Erstellung einer HTML-Email. Soweit läuft es auch schon ganz gut. Allerdings löscht beispielsweise GMX, alle Angaben die zwischen <style> und </style> stehen, raus. 1und1 scheinbar raus. daher komme ich mit einer Abgabe wie

HTML:

<tr>
    <td align="left" valign="top">
           <h1 style="font-family:Helvetica,sans,serif; font-size:12px; font-weight:normal;">
                   <span style="color:7cae33">test AG &bull; </span>Musterstraße 1
                  <span style="color:7cae33">&bull;</span>99999 Musterhausen
           </h1> 
    </td>
</tr>

leider nicht zum Ziel. Hat jemand schon einmal eine Vorlage für HTML-Mails erstellt und hat einen Tipp für mich? Auch ein Tipp zum Testen wäre für mich hilfreich. Ich habe zwar unter http://putsmail.com getestet, würde aber lieber noch ein paar Clients, die ich nicht zur Verfügung habe, testen. Alles was ich bisher gefunden habe war aber von den Kosten für ein einmaliges kleines Testprojekt schlichtweg zu teuer.

Ich habe gelesen, dass viele Anbieter den Head-Bereich ohnehin löschen und den Doctype verwerfen. Würdet ihr dennoch einen angeben oder gleich ganz weg lassen?

Viele Grüße
Micha

PS: Habe gestern das Thema erstellt und leider wurde irgendwie nur die Hälfte gespeichert. Daher habe ich den Beitrag nun wieder vervollständigt, damit er nicht mitten im Satz endet.

MyBad · 21.07.2014

Hallo!

Die Erstellung von HTML-Emails ist leider noch immer eine absolute Katastrophe. Ich habe es mir mittlerweile angewöhnt nur noch Inline-Formatierungen zu setzen, wie du es auch in deinem Beispiel machst. Das schien bisher recht "kugelsicher".

Eine Version auf dem eigenen Webspace als Alternative bei Darstellungsproblemen anzubieten ist auch nicht verkehrt. Eine 100% Client-Abdeckung ist leider unmöglich.

behemoth65 · 21.07.2014

Auch wenn es nicht semantisch korrekt ist, bleibt wohl nichts anderes übrig als separate Inline-Formatierungen zu verwenden. Selbst wenn es in den moderneren Browsern gut aussehen sollte, bedeutet das ja erst einmal gar nichts z.B. für die einzelnen Mail-Clients.

Wellenbrecher1963 · 21.07.2014

auch wir verwenden bei unseren Projekten nur noch Inline-Formatierungen seit fast 2005 schon. Ist der sicherste Weg zu halbwegs ordentlichen HTML Newsletter.

Außer, wenn einer Outlook oder Outlook Express noch verwendet. Die knallen alles was nach CSS aussieht raus und weg. Da hilft nur noch ein Link auf die eigene Webseite, wo der Newsletter nochmals abrufbar ist.

Seit etwa 2 Jahren muss man das sowieso so machen. Einmal den Body versenden, einmal in DB speichern und einmal, so wie er versendet wird, abspeichern. Und das ganze soll oder muss man jetzt bis zu 5 oder 10 Jahren aufheben.

Nur deswegen, wenn einer mit einer Abmahnung wegen SPAM, Betrug oder Wettbewerbsverzerrung (oder wiedas heißt) daher kommt, dass man beweisen kann, dass man eine saubere Weste hat.

Irgendwann hat ein Hamburger Gericht ein Gesetz erlassen, dass der Kunde das Recht hat, einen Newsletter sogar nach Jahren noch einsehen zu können.

Ich finde das vielleicht etwas übertrieben, denn schon nach einem Monat ist das Angebot doch schon veraltet...... aber in Bezug auf eine Klage kann es einem schon den Hals retten.

NACHTRAG

Für ein eMailtemplate sollte man auch mit Template Variablen arbeiten, wie: ___NAME___ oder %%NAME%% oder #NAME# denn das trennt Layout vom Rest.
Eigentlich ist es egal was man für Platzhalter nimmt, da die sowieso mit PHP durch Suchen und Ersetzen Funktionen ausgetauscht werden.

Das hat den Vorteil, dass man mehrere Layouts sich anlegen kann (Ostern, Weihnachten, Silvester usw) und der eigentliche Inhalt nur durch die Platzhalter eingebaut werden.

Greenhorn79 · 21.07.2014

Danke für Eure Tipps.
Verwendet ihr einen Head-Bereich bei Email-Templates oder lasst ihr den gleich ganz weg? Ich habe im Netz beide Varianten als Tipps und Empfehlung gelesen. ;-)

Ich habe Kopf- und Fusszeile komplett mit inline definiert außer der Angabe der Tabellenbreite. <td style="width:25%;"> Hier wüsste ich aber auch nicht wie ich es rausbringen soll. Mit dem Befüllen muss ich mal noch schauen, wie das genau abläuft. Denn der Anwender muss ja nun zwischen Kopf- und Fusszeile manuell seinen Text schreiben.

Wellenbrecher1963 · 23.07.2014

Und Du mußt auch darauf achten, daß keine DIVs verwendet werden, sondern nur einfaches knochiges HTML ohne Schnick-Schnack, denn nur das einfache HTML kennen die meisten bekannten eMail Programme. Was wiederum auch gut ist, wegen Schabernack usw.

Greenhorn79 · 27.07.2014

Ich habe es jetzt soweit durch. Nur eine Sache verstehe ich nicht:

HTML:

<h1>
      <font color="#7cae33" size="2px" face="Arial,sans,serif">xxxx &bull;</font>
      <font color="#000000" size="2px" face="Arial,sans,serif">xxxx</font>
       <font color="#7cae33" size="2px" face="Arial,sans,serif">&bull;</font>
        <font color="#000000" size="2px" face="Arial,sans,serif">xxxx</font>
 </h1>

Was isch ehrlich gesagt nicht verstehe ist, warum es in der Schriftgröße gut aussieht. Normalerweise ist das doch viel zu klein.

MyBad · 28.07.2014

Greenhorn79 schrieb:
Ich habe es jetzt soweit durch. Nur eine Sache verstehe ich nicht:

HTML:

<h1> <font color="#7cae33" size="2px" face="Arial,sans,serif">xxxx •</font> <font color="#000000" size="2px" face="Arial,sans,serif">xxxx</font> <font color="#7cae33" size="2px" face="Arial,sans,serif">•</font> <font color="#000000" size="2px" face="Arial,sans,serif">xxxx</font> </h1>

Was isch ehrlich gesagt nicht verstehe ist, warum es in der Schriftgröße gut aussieht. Normalerweise ist das doch viel zu klein.

<font size=""> ist eine relative Größe. Das "px" wird ignoriert. "Size" wird verhältnismäßig zur Normalschriftgröße dargestellt.

Greenhorn79 · 28.07.2014

Danke ;-) Da wäre ich nicht mehr darauf gekommen.

Wellenbrecher1963 · 29.07.2014

wäre dann nicht die Verwendung von "em" Werten sinnvoller? Denn wenn man barrierefrei auch das programmieren will, könnte ein Abonnent mit Leseschwäche im eMail Programm das Zoom vergrößern und dementsprechend auch größere Schriften lesen......

Gut, ich kann jetzt nur für Mac reden, denn da geht das. Inwieweit das auch auf Windows und deren eMailprogrammen zutrifft, weiß ich nicht. Ich kann nur für Mac sprechen.

Greenhorn79 · 10.08.2014

em-Werte haben aber unter Umständen den Nachteil, dass sie dir das Design kaputt machen. Wenn man beispielsweise einen dreigeteilten Footer mit entsprechenden Tabellen hat und die Schrift recht groß wird...

Wellenbrecher1963 · 11.08.2014

ja, ja, das habe ich schon am eigenen Leib erfahren dürfen.

Aber ich habe auch eine interessante Meinung in den Foren gelesen. Man solle sich nicht so einen Kopp machen, was die Gummibandmethode angeht, sondern zusehen, dass an gewissen "Breakpoints" das Layout umbricht und an diesen Points eben "steht".

Außer im Bereich von 320 bis 480 solle man mit Prozentwerten arbeiten, da einige kleinere Smartphones doch schon in der Lage sind, hochauflösende Grafiken darzustellen.

Mir geht es momentan mit dem iPhone 4. Das überliest die 480er Breite im Landscape Mode und springt daher in den 760er Breite Mode. Das iPhone 3 hingegen macht im Portrait 320 und im Landscape 480Pixel.

Daher vermutlich die Meinung, dass man im Handy Bereich mit %-Werten im CSS arbeiten soll.

Nunja, ich werde sehen, wo das noch hinführt. Desktop und Tablet/Pad Layout steht schon und funzt. Nun geht es an das mobile Zeug's.

Aber das schöne daran ist, dass man durch herum experimentieren die ganze Problematik begreift, wie die reagiert und agiert. Das sind Erfahrungen für die Zukunft, die einem keiner mehr nehmen kann.

schöne Woche noch