Rubrik: Nachrichten Erstellen und Bearbeiten

Tipps für HTML-Designer (Newsletter sind anders als Webseiten)

| Drucken |
Das Design von HTML-Newslettern unterscheidet sich in einigen Punkten vom Webseiten-Design. Hier sind einige Tipps dazu.

Grundsätzlich ist in einem Newsletter alles möglich, was auch sonst mit HTML geht. Allerdings gibt es einige Dinge zu beachten, die beim Erstellen von Webseiten nicht auftreten oder schon lange kein Standard mehr sind.

Denn im Gegensatz zur relativ geringen Anzahl von genutzten Browsern gibt es eine unüberschaubare Vielzahl von Email-Clients und -Diensten, die alle Ihr eigenes Konzept zum Handling von HTML-Nachrichten verfolgen. Auch aktuelle Entwicklungen lassen leider keine schnelle Besserung erwarten.

Um das Erscheinungsbild Ihrer HTML-Newsletter in allen Email-Clients so einheitlich wie möglich zu halten, beachten Sie bitte folgende Tipps:

1. HTML-Newsletter = Tabellen-Layout
Zurück ins letzte Jahrhundert: die Darstellung mit Hilfe von "div" mit "float", "position" und generell Box-Model mit CSS funktioniert in einigen wichtigen Email-Clients nicht richtig. Verwenden Sie daher - wie früher - für die Positionierung Tabellenlayouts und falls nötig unsichtbare Spacer-Grafiken.

2. CSS nur inline
Verwenden Sie keine extern verlinkten oder importierten CSS-Styles: alles CSS muss im Quelltext des Newsletters stehen. Verlinkte Styles werden oft nicht nachgeladen oder gar blockiert (wenn der User offline ist oder der Email-Client diese Inhalte blockt)

3. CSS-Styles (auch) in den Body-Bereich
Einige Email-Clients, vor allem webbasierte wie z.B. Gmail schneiden den Head-Bereich von HTML-Nachrichten ab, um das Aussehen der eigenen User-Interfaces nicht zu gefährden. Kopieren Sie deshalb Ihre Style-Angaben in den body-Bereich Ihrer HTML-Nachricht.

<html>
<head
...
</head>
<body>
<style type="text/css" media="screen">
<!--
/* Ihre Styleangaben */
-->
</style>

Am Sichersten ist es jedoch, alle Elemente mit individuellen style-Tags einzeln auszuzeichnen. Also <a href="" style="" ...>, denn einige Email-Clients wie z.B. Google Mail enfernen einfach alle globalen <style>...</style>-Blöcke.

Beachten Sie ausserdem, das einige Email-Clients, wie z.B. Google Mail und Outlook 2007 einige CSS-Elemente überhaupt nicht oder unzureichend unterstützen.


4. Seitenhintergrund über 100%-Tabelle einstellen
Einige Email-Dienste strippen auch den Inhalt des öffnenden Body-Tags. Wenn Sie eine Farbe für den Seitenhintergrund definieren möchten, verwenden Sie daher als "Leinwand" eine 100%-Tabelle, der Sie einen Hintergrund zuweisen. Alle weiteren Inhalte werden dann in diese Tabelle geschrieben.

5. Keine aktiven Inhalte: kein Javscript, keine Formulare, keine Image-Maps
Image Maps, also Bilder mit Bereichen, die unterschiedlich verlinkt sind, werden von einigen Emailclients, vor allem Webservices wie Gmail oder Hotmail/Windows Live Mail, nicht richtig dargestellt, selbst wenn das Bild angezeigt wird. Ist die Bildanzeige im Emailprogramm ausgeschaltet, sind Imagemaps dazu noch unsichtbar.

Auch aktive Inhalte wie Flash, JavaScript und Formulare werden von vielen Emailclients nicht richtig dargestellt. Schlimmer ist jedoch, dass diese Inhalte oft als Sicherheitsrisiko angesehen und mit entsprechenden Warnmeldungen an den Empfänger verbunden werden. Für viele Email-Provider und Anwender sind das ausserdem starke Kriterien, um die Email direkt in den Spam-Ordner zu werfen.

6. Geringe Anzeigebreite
Emails werden zu einem sehr grossen Prozentsatz nur im Vorschaufenster gelesen, d.h. dem Betrachter steht nur ein Bruchteil der tatsächlichen Bildschirmauflösung zur Verfügung. Auch mit wachsenden Bildschirmgrössen ändert sich daran eher wenig, da nur wenige Programme im Vollfenster-Modus ausgeführt werden und Web-Email-Dienste Ihre Anzeigefläche nicht geändert haben. Auch Outlook 2007 hat den horizontalen Platz für die Vorschau nochmals verringert, bei GMX werden schon seit Jahren nur 600 Pixel Breite angezeigt und auf mobilen Geräten steht ohnehin nur wenig Breite zur Verfügung.

In der Praxis hat sich daher eine Anzeigebreite von nicht mehr als 600 - 650 Pixel bewährt. Damit sind die Inhalte auch im Vorschaufenster ohne horizontales Scrollen lesbar.

7. Keine Hintergrundbilder über CSS und Tabellenzellen
Microsoft hat seit Outlook 2007 festgelegt, dass nicht mehr der Internet Explorer sondern Word zur HTML-Verarbeitung verwendet wird. Leider ein gewaltiger Rückschritt. Grosser Minuspunkt dabei ist die fehlende Unterstützung für einige CSS-Elemente und Tabellenhintergrundbilder. Darunter auch die Funktion "background". Auch Google Mail zeigt Hintergrundbilder gar nicht an.
Daher Hintergrundbilder möglichst vermeiden und mit Hintergrundfarben über Tabellenzellen und Vordergrund-Bildern arbeiten.

8. Bilder nur mit Grössenangaben und Alt-Text
Im Web natürlich auch Standard, in Emails aber noch wichtiger. Bei vielen Email-Clients werden Bilder nicht automatisch geladen, daher Bilder nur mit Grössenangaben einbinden, damit Ihr Layout auch ohne Bildanzeige erhalten bleibt. Und Bilder natürlich immer gut im alt="Ihr Text" betexten, um die Inhalte notfalls auch ohne Grafik zu transportieren.

9. Verlinkte Bilder sicher ohne blauen Rahmen
Im HTML-Standard werden verlinkte Bilder ohne Border-Angabe mit einem blauen Rahmens angezeigt. Lassen Sie also die Angabe des Rahmens weg, wird in einigen Email-Programmen ein blauer Rahmen um das Bild erscheinen, der selten gewollt ist. Versehen Sie daher alle verlinkten Bilder mit dem border="0" Attrribut, so wird auch der ungewollte blaue Rahmen nicht angezeigt.

10. Immer eine Text-Version des Newsletters mitsenden
Aus drei wichtigen Gründen sollten Sie immer eine Textversion mitsenden, also keinen reinen HTML-Newsletter, sondern immer "MIME/Multipart", d.h. mit HTML und Textteil:

  1. Es gibt immer noch (wenige) Emailclients, die kein HTML anzeigen können. Fehlt der Textteil, sieht der Empfänger gar nichts oder nur einen Dateianhang mit kryptischem Namen.

  2. Sehbehinderte Menschen lesen Text leichter als HTML. Und durch das erzwungene Tabellenlayout bei HTML-Newslettern wird die Verarbeitung durch Lesegeräte extrem erschwert.

  3. und vielleicht der wichtigste Grund: Spamfilter vergeben höhere Spam-Scores, wenn der HTML-Anteil wesentlich grösser ist als der Textteil. Ganz ohne Textteil wird der Spam-Score Ihrer Nachricht besonders hoch. Daher den Inhalt des HTML-Newsletters auch immer in einer Textversion mitsenden. Und bitte nicht nur einen Link zur Webansicht mitsenden - das verbessert Ihr Spamrating nicht.

War dieser Artikel hilfreich?

Ja Nein