Praxistipps: HTML-Mails

Beim Verschicken von HTML-Mails gibt es einige Punkte zu beachten. Hier finden Sie wichtige Hinweise für Ihren Webdesigner, die dabei helfen, dass Ihre HTML-Mails in möglichst allen Mail-Clients korrekt angezeigt werden.

Anders als bei HTML-Texten, die im Browser geöffnet werden, muss bei HTML-Mails der Text auch mit dem jeweiligen Mail-Client des Empfängers kompatibel sein. Das ist ein grundsätzliches Problem von HTML-Mails, da verschiedene Mail-Clients den gleichen Inhalt unterschiedlich anzeigen können. Das bedeutet, dass leider nicht entscheidend ist, was Sie mit protel Messenger technisch umsetzen können, sondern das, was möglichst jeder Mail-Client anzeigen kann.

Es gibt einige Grundlagen, djie Sie berücksichtigen sollten, um eine gute Darstellung der HTML-Mails in den üblichen Mail-Clients zu erreichen.

Bitte beachten!

Die folgenden Abschnitte enthalten Tipps, um typische Probleme mit Mail-Clients zu umgehen. protel hotelsoftware kann jedoch keine Garantie dafür geben, wie die unterschiedlichen Mail-Clients mit HTML-Mails umgehen. Der protel Messenger hat keinerlei Einfluss darauf, welche HTML-Elemente Mail-Clients wie z.B. Outlook, Google Mail, GMX etc. anzeigen oder blockieren!

Formatierung: Je einfacher, desto besser

Grundsätzlich ist es zu empfehlen, die Formatierung so einfach wie möglich zu halten. Das bedeutet auch, auf modernes Webdesign zu verzichten. Greifen Sie stattdessen auf alte Layout-Methoden zurück.

Vermeiden Sie Margins, Paddings und CSS-Positionierung über Floats. Verwenden Sie verschachtelte Layouttabellen, um Abstände oder Textfelder einer bestimmten Größe darzustellen.
Verzichten Sie auf Whitespace in Tabellenzellen.
Geben Sie die Styles für die Texte in jeder Tabellenzelle einzeln an.
Geben Sie alle Styles inline anstatt über einen Styles-Bereich im <head> an. Viele Mail-Clients schneiden den <head>-Bereich und den <body>-Tag ab; im <head> hinterlegte CSS-Eigenschaften oder Hintergrundbilder, die dem <body> zugewiesen sind, entfallen damit.
Nutzen Sie für Farbangaben Hexadezimal- anstatt RGB-Werte; also z.B. #000000 anstatt 0,0,0
Wenn Sie Formate wie H1, H2, H3 etc. verwenden, legen Sie für jede Klasse die CSS-Eigenschaften fest, damit keine Default-Styles des Mail-Clients verwendet werden.
Verzichten Sie auf Kurzschreibweisen für 'font' und geben Sie font-size, font-weight und font-family einzeln an.
Nutzen Sie nur Standardschriftarten, die auf allen Betriebssystemen verfügbar sind. Geben Sie im Zweifel eine Ersatzschriftart an, falls die zuerst genannte nicht verfügbar ist.
Geben Sie feste Pixelgrößen anstatt relativer Größen an. Beachten Sie dabei jedoch, dass die Mail eine Gesamtbreite von 550-600px nicht überschreiten sollte.

Bilder

Das Anzeigen von Bildern bleibt schwierig. Einige Mail-Clients wie z.B. Outlook blockieren standardmäßig alle Bilder in E-Mails. Allerdings gibt es auch hier Tipps, um das bestmögliche Ergebnis zu erzielen.

Achten Sie besonders auf die Alternativtexte, die Sie für die Bilder eingeben. Wenn der alt-Text ansprechend ist und den Empfänger neugierig auf das Bild macht, ist die Wahrscheinlichkeit deutlich höher, dass er die Bildinhalte der E-Mail herunterlädt.
Speichern Sie die Bilder auf einem offenen und schnellen Webserver und verlinken Sie diese immer über absolute Pfade. Würde das Herunterladen der Bilder zu lange dauern, stiege wieder die Wahrscheinlichkeit, dass der Empfänger die E-Mail bis dahin weggeklickt hat.
Vermeiden Sie das png-Format; nutzen Sie möglichst nur jpg-Bilder.
Fügen Sie auf keinen Fall Spacer-Gifs ein! Sonst wird die E-Mail wahrscheinlich als Spam gekennzeichnet.

Tests

Die beschriebenen Hinweise sind eine wichtige Basis. Um sicher zu gehen, dass die HTML-Mail richtig angezeigt wird, ist es trotzdem nötig, sie in verschiedenen Mail-Clients zu testen. Schauen Sie auch, wie die Mail z.B. mit blockierten Bildern aussieht. Denn das ist die Ansicht, die viele Empfänger zuerst erhalten.

Es gibt auch verschiedene Online-Tools, mit denen Sie Ihre Mails auf Kompatibilität und Spam-Verdacht testen können.

Verweis

Details zu einzelnen Mail-Clients und weitere Informationen finden Sie unter email-standards.org.