Das Entwerfen der HTML-Version Ihrer E-Mail-Nachricht kann schwierig sein, da es so viele verschiedene Kombinationen von E-Mail-Client und Betriebssystem gibt – und sie haben ihre eigene Art, HTML zu rendern. Und es gibt wirklich keine Möglichkeit, sicher zu sein, welchen Client Ihre Leser zum Anzeigen Ihrer Nachrichten verwenden.
Wenn Ihr Leser eine Hotmail-Adresse hat, können Sie davon ausgehen, dass er Ihre Nachricht über den Hotmail-Webclient liest. Aber was ist mit Ihren Lesern mit privaten E-Mail-Adressen? Werden sie Microsoft Outlook verwenden? Wird es Outlook 2000, Outlook 2003 oder Outlook 2007 sein? Oder benutzt er Lotus Notes? Was wäre, wenn seine TLD-E-Mail an ein Yahoo-Konto weitergeleitet würde? Und benutzt er einen Mac oder einen PC?
Da Sie die Antworten auf diese Fragen nicht wirklich kennen, ist es beim Entwerfen Ihrer E-Mail-Kampagnen wichtig, dass Sie immer die bestmögliche Zugänglichkeit festlegen.
Cascading Style Sheets (CSS) bietet die Möglichkeit, Ihre E-Mail-Nachrichten äußerst grafisch und verlockend zu gestalten. Leider wird r CSS bei vielen E-Mail-Clients und auf verschiedenen Plattformen nur eingeschränkt unterstützt. Einer der größten CSS-Straftäter ist Outlook 2007; und da Studien zeigen, dass bis zu 75% der E-Mail-Leser Outlook verwenden, können Sie die Rendering-Fehler einfach nicht ignorieren.
Leider unterstützt Outlook 2007 keine schwebenden Elemente, die in CSS häufig zum Positionieren von Objekten verwendet werden. Daher basiert es auf der Verwendung eines tabellenbasierten Layouts beim Entwerfen Ihrer E-Mail-Kampagnen. Denken Sie an Webdesign um das Jahr 2000. Wenn Sie ein neuer Designer sind und sich noch nie mit Tabellen befasst haben, erhalten Sie vom W3C unzählige Anleitungen.
Outlook 2007 unterstützt die Eigenschaft zwar, ich empfehle jedoch nicht, sie zum Anhängen Ihres Stylesheets zu verwenden. Mindestens 50% Ihrer Leser haben ihre Bilder deaktiviert, was bedeutet, dass verknüpfte Elemente nicht verknüpft werden – und dies schließt Ihr externes Stylesheet ein. Außerdem unterstützen Google Mail, Live Mail und Hotmail keine verknüpften Elemente. Daher ist es eine gute Idee, sie sowieso nicht zu verwenden. Definieren Sie stattdessen alle Ihre Stile in Ihrer Nachricht und verlassen Sie sich für Ihre E-Mail-Nachrichten niemals auf ein externes Stylesheet.
Wo Sie in der Nachricht Ihre Stile definieren sollten, ist eine ganz andere Geschichte. Live Mail sucht nach dem Stylesheet mit dem, Hotmail sucht nach dem Stylesheet direkt unter dem Tag. Outlook 2003, Outlook 2007, AOL, Yahoo, Entourage und Thunderbird akzeptieren beide Placements, aber Google Mail akzeptiert keine davon.
Die beste Option ist die Verwendung von Inline-Tags. Inline-Stil bedeutet einfach, dass der Stil für jedes Element einzeln definiert werden muss. Anstatt Ihr Stylesheet in Ihrem Kopf wie folgt zu definieren:
oder sogar so etwas:
Sie würden jedes Element einzeln definieren, wie folgt:
Beachten Sie beim Definieren dieser Elemente, dass nicht alle CSS-Eigenschaften auf allen E-Mail-Clients allgemein unterstützt werden. Wenn Sie allen Ihren Lesern eine konsistente Nachricht präsentieren möchten, unabhängig davon, wie sie Ihre E-Mails lesen, beschränken Sie sich auf die folgenden CSS-Eigenschaften:
. Hintergrundfarbe
. Rand
. Farbe
. Schriftgröße
. Schriftstil
. Schriftvariante
. Schriftgröße
. Buchstaben-Abstand
. Zeilenhöhe
. Polsterung
. Tabellenlayout
. Textausrichtung
. Textdekoration
. Texteinzug
. Texttransformation
Diese Eigenschaften werden sowohl auf Macs als auch auf PCs unterstützt in:
. AOL
. Gefolge
. Google Mail
. Live-Mail
. Ausblick 2003
. Ausblick 2007
. Thunderbird
. Yahoo
Zu vermeidende Eigenschaften umfassen:
. Hintergrundbild
. Hintergrundposition
. Hintergrund Wiederholung
. Grenzkollaps
. Randabstand
. Unterseite
. Beschriftungsseite
. klar
. Clip
. Mauszeiger
. Richtung
. Anzeige
. leere Zellen
. schweben
. Schriftfamilie
. Höhe
. links
. Listenstil-Bild
. Listenstil-Position
. Listenstil-Typ
. Spanne
. Opazität
. Überlauf
. Position
. Recht
. oben
. vertikal ausrichten
. Sichtweite
. Leerraum
. Breite
. Wortabstand
. Z-Index
Und jetzt noch mehr schlechte Nachrichten: Lotus Notes und Eudora haben schreckliche CSS-Unterstützung und selbst viele der allgemein akzeptierten CSS-Eigenschaften werden möglicherweise nicht richtig gerendert. Und da immer mehr Leser über PDAs und andere Handheld-Geräte auf E-Mails zugreifen, können Sie nie 100% sicher sein, wie oder wo Ihre Nachricht gelesen wird. Daher schlage ich vor, dass Sie immer Multipart-Mime-Nachrichten verwenden und immer einen Link zu Ihrer Textversion in die HTML-Version Ihrer Nachricht einfügen.
*** Möchten Sie diese Tipps griffbereit halten?
