Pixelfans

16 Nov 2009

HTML in E-Mails

geschrieben von Pawel

Die einen halten sie für gefährlich und überflüssig, andere lieben sie - E-Mails mit HTML. Da ich eine Zeitung auch lieber gestaltet lese (und nicht als Nur-Text auf einer Endlosrolle) finde ich E-Mails mit HTML völlig naheliegend. Zusätzlich erhalte ich häufig  E-Mail, die PDF-Anhänge erhalten, die dann meistens nur aus gestalteten Text und Bildern bestehen.

Mich hat aber bisher die unterschiedliche Darstellung in den verschiedenen Emailprogrammen abgehalten, mich näher damit auseinanderzusetzen. Ein nahender Geburtstag hat mich aber zum Umdenken bewogen.Mit meinen Kenntnissen und nicht zu hohen Ansprüchen, sollte sich doch ein kleiner Nenner finden lassen.

Idee

  • Verwendung eines Bildes
  • Ausrichtung des Bildes
  • Textumfluss
  • Texthervorhebungen (fett, kursiv, unterstrichen)
  • Schmuckschrift
  • Gestaltung mittels CSS

Im Vergleich mit den Möglichkeiten, die wir mittlerweile bei der Gestaltung von Webseiten haben, entspricht das einem Standard von vor 6-7 Jahren.

Recherche

Das email standard project ist schon einmal eine große Hilfe. Es bietet Vergleichswissen zu den wichtigsten E-Mailprogrammen. Zusätzlich haben die Macher einen Email Standards Project Acid Test entwickelt. Dieser ist von den Acdtests für Browser inspieriert und bietet die Möglichkeit sich eine Testmail schicken zu lassen, die es einem ermöglicht, die Unterstützung für CSS seines E-Mailprogrammes zu überprüfen. Die Seite von campaign monitor bietet eine Tabelle, die die Möglichkeit der Verwendung von CSS in den Mailprogrammen vergleicht. Insgesamt sah das für mein bescheidenes Vorhaben recht vielversprechend aus, bis mein Blick die Spalte von Outlook 2007 erspähte. Dieses Programm hat eine deutlich schlechtere CSS-Unterstützung als sein Vorgänger. Da kann sich der ambitionierte Entwickler wirklich in der Steinzeit fühlen.

Die Frage mit welchem Werkzeug ich denn die E-Mails gestalten sollte, stellte sich für mich als Thunderbirdnutzer natürlich nicht. Mozilla Thunderbird hat zwar keinen eigenen Editor, lässt sich aber schnell mit der Komponente EditHTML um diesen erweitern. Sie ist dann über das Formatmenü erreichbar.

Layout

htmlemailDie Erstellung des Bildes wird hier nicht erläutert. Auf die Dateigröße habe ich nicht geachtet. Das Bild war sogar eher groß, um bei Programmen ohne CSS-Unterstützung die gesamte Breite einzunehmen. Ich verwende ausschließlich Styles im <head>. Thunderbird überrascht zunächst auch mit längst vergessenen Elementen wie <big> u.ä. und möchte unbedingt dem <body> eine bgcolor vergeben.

Hier mein Code, der durch Outlook 2007 leider nicht "kugelsicher" ist:

<head>
 <style>body{background-color: #f8fbf0; font-family: "Helvetica Neue", Verdana, Arial} img{border-width:3px; border-style:solid; border-color:#f8fbba; padding: 15px; background-color: #7498fd;float: left; height: 280px; width: 307px; margin: 5px} h1{color:#cc2626; font-size:390%; width:30%; float:right; margin: 10px} .script{width:20%; float: right;margin-top:-60px;font-size:350%;font-weight:700; color:#7498fd; font-family:  "Bickley Script", Chopsscript, "Comic Sans MS"} .kontakt {text-decoration:underline; font-weight:bold}</style>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>Einladung</h1>
<p>
<img alt="4 bunte Teetassen" title="for tea oder so..." src="mailbox://pfad">Okay, ich gebe zu,
dass ich sehr selten feiere. An bestimmten, runden Geburtstagen mache
ich aber immer mal eine Ausnahme.</p>
<p> ...</p>
<p>Viele liebe Grüße
<span class="script">Pawel</span>
</p>
<p><span class="kontakt">Hier noch einmal die Kontaktdaten:</span>
<br>
<strong>E-Mail:</strong>
<a href="mailto:">Adresse</a>
<br>
<strong>Telefon:</strong>
 ..</p>
</body>

Das Bild muss Bestandteil der Nachricht sein, da einige Programme aber auch Netzwerke ein nachladen von Bildern verhindern. Thunderbird bietet die Möglichkeit Nachrichten als HTML-Mail und als Nur-Text-Version zu verschicken, was i diesem Fall unbedingt genutzt werden sollte.

Über Feedback und eigene Erfahrungen würde ich mich freuen, wenn ich dabei kein Tabellenlayout lernen muss.

Kategorie: Layout | Trackbacks (0) | Permalink