Schön gestaltete Newsletter machen mehr her als dröge Text-Nachrichten. Nur die Entwicklung ist aufgrund der verschiedenen E-Mail-Clients und der Browservielfalt nicht immer ganz einfach. ZDNet zeigt, wie die Fallseile zu umgehen sind.
HTML-Strukturen in eine E-Mail einzubinden, ist nicht ganz einfach - ein Problem, das jeder Webentwickler kennt. Aus diesem Grund entscheiden sich Entwickler in der Regel für eine bestimmte Gruppe von Browsern (meist den Internet Explorer oder Firefox), mit der und für die sie in der Entwicklungsphase arbeiten.
Wer eine E-Mail liest, kann das mit einem der genannten Browser tun, oder mit bestimmten E-Mail-Clients wie Microsoft Outlook[1], Eudora[2], Thunderbird[3] oder Lotus Notes[4]. Die enorme Vielfalt der Optionen führt zu einer altbekannten Strategie der Entwicklungsarbeit: Die Konzentration auf den kleinsten gemeinsamen Nenner. Wer sich unter den vielfältigen Techniken zur effizienten Entwicklung und Übertragung HTML-basierter E-Mail-Nachrichten umschaut, erkennt schnell, dass die bewährte Technik der Definition von HTML-Tabellen ein beliebtes Mittel zur Seitengestaltung darstellt. CSS und Web-Standards sind heutzutage die bevorzugten Mittel der webbasierten Entwicklung, doch das gilt nicht gleichermaßen für E-Mail-Anwendungen im HTML-Format.
Das soll nicht heißen, dass E-Mail-Clients grundsätzlich kein CSS unterstützten. Doch wer sichergehen möchte, dass die HTML-Nachrichten im E-Mail-Programm seiner Leser möglichst einheitlich dargestellt werden, sollte das Layout mithilfe von HTML-Tabellen gestalten.
Es ist empfehlenswert, sich an den folgenden Richtlinien zu orientieren, um trotz der Vielzahl verschiedener E-Mail-Clients ein möglichst einheitliches Erscheinungsbild der Mails zu gewährleisten:
- Um das Layout des Nachrichtentexts zu steuern, ist es ratsam eine einzige Tabelle zu verwenden. Die Tabelle kann ein oder zwei Spalten beinhalten.
- Eine Nachricht kann eine Kopfzeile, den Textteil und eine Fußzeile umfassen. Jeder dieser Teile sollte seine eigene Tabelle enthalten.
- Tabellen- und Spaltenattribute sollten verwendet werden, um die Darstellung zu steuern. Dazu gehören Attribute wie Absatzausrichtung (sowohl die horizontale als auch die vertikale), Zellenabstände, Abstände zwischen Text und Zellenrand oder Rahmengestaltung.
- Es wird empfohlen, auf DIV-Tags zu verzichten und stattdessen bei Bedarf mit SPAN-Elementen zu arbeiten. Mithilfe von SPAN-Elementen lassen sich Zeichenformate definieren und Text über oder unterhalb anderer Inhalte positionieren.
<h1 style="">Beispiel<h1>
Listing A ist ein sehr einfaches Beispiel dafür, wie eine E-Mail im HTML-Format über eine in C# codierte ASP.NET-Seite verschickt werden kann. Der Code erstellt die Nachricht und trägt Sender (from), Empfänger (to) und Betreff (subject) ein. Der eigentliche Nachrichtentext wird mithilfe von HTML formatiert und alle erforderlichen Auszeichnungselemente werden eingefügt. Ausschließlich der Code des Page-Load-Events des ASP.NET-Web-Formulars wird der Nachricht beigefügt. Das Beispiel stellt eine einfache Ein-Spalten-Struktur dar, mit jeweils einer Tabelle für Kopfzeile, Textteil und Fußzeile der Nachricht.
Listing A
Ressourcen
HTML-basierte Newsletter sind kein neues Konzept. Vielmehr sind bereits zahllose Entwickler diesen steinigen Weg gegangen. Einige von ihnen haben ihre Erfahrungen im Internet veröffentlicht. Hier ist eine Liste einiger sehr guter Beiträge über die Erstellung von HTML-Newslettern:
- Mailchimp[5]: Ein Blog, das sich ganz dem E-Mail-Marketing widmet. Die Website enthält zudem eine umfassende Liste von Richtlinien[6], die beim Erstellen und Versenden von HMTL-basierten Nachrichten zu beachten sind.
- Reachcustomersonline.com[7]: Die Website des Internet-Gurus Tim Slavin gibt zahlreiche Tipps und Hilfestellungen, wie sich das Internet zur Kontaktaufnahme mit Kunden nutzen lässt.
- Style in E-Mail[8]: Enthält einfache Richtlinien für HTML-Nachrichten sowie eine Liste verschiedener E-Mail-Programme mit Angaben darüber, wie weit sie HTML unterstützen.
Kunden erreichen
E-Mail ist sicherlich die wichtigste Internetanwendung überhaupt - und diese Technologie zu nutzen, um bestehende und potenzielle Kunden zu erreichen, ist relativ einfach. Die Entwicklung visuell ansprechender E-Mails mithilfe von HTML und CSS hat gleichwohl ihre Tücken. Zwei effektive Möglichkeiten, potenzielle Probleme zu umgehen, sind der Einsatz von Tabellen und ein möglichst einfach gestricktes Layout.
URLs in diesem Artikel:
[1] = http:/
[2] = http:/
[3] = http:/
[4] = http:/
[5] = http:/
[6] = http:/
[7] = http:/
[8] = http:/