Welche Richtlinien können Sie für eine umfassende HTML-Formatierung in E-Mails geben und gleichzeitig eine gute visuelle Stabilität für viele Clients und webbasierte E-Mail-Schnittstellen gewährleisten?
Eine nicht verwandte Antwort auf eine Frage zum Stapelüberlauf schlug vor:
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html
Welches enthält die folgenden Richtlinien:
- Platzieren Sie ein Stylesheet
<body>anstelle von.<head>
Einige E-Mail-Clients entfernen CSS aus dem Kopf, lassen es jedoch, wenn sich der Style-Block (ungültig) im Body befindet. - Verwenden Sie nach Möglichkeit Inline-Stile.
Google Mail entfernt jedes Stylesheet, egal ob im<head>oder im<body>, aber berücksichtigt Inline-Stile, die mithilfe desstyle=""Attributs zugewiesen wurden - Zurück zu den Tabellen
E-Mail-Standards haben in den letzten Jahren dank Outlook 2007 mit der Microsoft Word-Rendering-Engine einen großen Schritt zurück gemacht. Verlernen Sie das meiste, was Sie über das Positionieren ohne Stylesheets gelernt haben. - Verlassen Sie sich nicht auf Bilder
Die meisten Clients und die meisten webbasierten E-Mail-Clients zeigen keine Bilder an, es sei denn, der Benutzer fordert ausdrücklich an, dass sie angezeigt werden.
Ich habe auch ein paar "unbestätigte" Wahrheiten, an die ich mich nicht erinnere, wo ich sie gelesen habe.
- Verwenden Sie nicht mehr als zwei Verschachtelungsebenen in Tabellen.
Stimmt das ? Was passiert wahrscheinlich, wenn ich es tue? Gibt es einen bestimmten Kunden, der daran erstickt? - Achten Sie darauf, dass Hintergrundbilder nicht in Zellen / Tabellen verschachtelt werden.
Soweit ich weiß, kann es vorkommen, dass das Hintergrundbild in der absteigenden Tabelle / Zelle vollständig neu angewendet wird und nicht nur "durchscheint". Wieder wahr oder nicht? Welche Kunden?
Ich möchte diese Liste mit weiteren Richtlinien und Erfahrungen aus den Gräben ausarbeiten.
Können Sie weitere Vorschläge machen?
Update: Ich bitte speziell um Richtlinien für den Designteil in HTML und dessen Konsistenz. Fragen zu allgemeinen Richtlinien zur Vermeidung von Spam-Filtern und zur allgemeinen Höflichkeit gibt es bereits bei SO.
Antworten:
Es ist wirklich sehr schwierig, eine anständige HTML-E-Mail zu erstellen, wenn Sie sie aus einer "modernen HTML- und CSS" -Perspektive betrachten.
Stellen Sie sich für beste Ergebnisse vor, es ist 1999.
styleAttribut, wenn Sie CSS verwenden müssen.float<a href="http://domain.tld">www.someotherdomain.tld</a>ist schlecht )Viel Glück ;)
Update zur Beantwortung weiterer Fragen:
Ich glaube, dies ist eine ältere Richtlinie in Bezug auf Lotus Notes. Verschachtelte Tabellen sollten in Ordnung sein, aber wenn Sie ein Layout haben, das kompliziert genug ist, um sie zu benötigen, werden Sie wahrscheinlich trotzdem Probleme haben. Halten Sie Ihr Layout einfach .
Dies kann mit dem oben Gesagten zusammenhängen, und das Gleiche gilt, wenn Sie so kompliziert werden, werden Sie Probleme haben. Neuere Versionen von Outlook unterstützen Hintergrundbilder überhaupt nicht. Es wird daher empfohlen, diese vollständig zu vergessen.
quelle
Verwenden Sie immer mehrteilige MIME und bieten Sie eine einfache Textalternative.
quelle
Die Leute hinter Campaign Monitor haben auch eine Website für das E-Mail-Standardprojekt mit vielen guten Informationen gestartet .
quelle
Schauen Sie sich dieses Boilerplate an, es ist wie html5boilerplate, aber für E-Mails: http://htmlemailboilerplate.com/
quelle
Ich denke, dies ist eine niedrigere Ebene als die Frage, die Sie stellen, aber wenn Sie wirklich möchten, dass eine HTML-E-Mail von so vielen Clients wie möglich korrekt angezeigt wird, stellen Sie sicher, dass sie gültiges MIME verwendet. Damit eine E-Mail als gültiges MIME betrachtet werden kann, MÜSSEN die Header (im RFC-Sinne des Wortes) beide Header enthalten:
Sehr strenge Clients zeigen Ihren HTML-Code als Rohtext an, wenn der eine oder andere fehlt. Sie wären überrascht, wie viele große Online-Anbieter, die es besser wissen sollten, dies vermasselt haben (insbesondere habe ich HTML-E-Mails mit fehlender MIME-Version erhalten: Header von Amazon und ACM in der Vergangenheit).
quelle
quelle
Drei Ratschläge: Test, Test, Test.
Schauen Sie sich den E-Mail-Testdienst von LitmusApp.com an. Sie senden ihnen eine Nachricht und sie rendern sie in einer Reihe von Clients und zeigen Ihnen Screenshots der Ergebnisse. Es ist nicht perfekt, aber es ist ziemlich gut.
(Lotus Notes vor 8.0 stinkt übrigens wirklich sehr nach HTML-Mail)
Abgesehen von Inline-CSS-Stilen empfehle ich außerdem, wo immer möglich zu Tags zu wechseln.
quelle
Betten Sie Ihre Bilder ein, verlinken Sie sie nicht.
Das ist schlecht :
Das ist gut :
Ja, es sieht komisch aus, aber lesen Sie diese Anleitung zum Einbetten von Bildern in E-Mails .
quelle
Wenn Sie einen Stilblock einfügen, beginnen Sie keine neue Zeile mit ".classname" oder "." etwas. Legen Sie eine Zahnspange oder etwas vor der Periode. Wenn Sie dies nicht tun, zeigen einige Webmail-Systeme Ihre Stylesheets nicht richtig an.
Viele Leute haben fälschlicherweise angenommen, dass sie aufgrund dieses Verhaltens keine CSS-Blöcke in E-Mails verwenden können ... IIRC "." ist das Body-Trennzeichen für SMTP. Systeme neigen dazu, in ihren Mail-Speichern zu entkommen, um zu verhindern, dass der Inhalt einer Nachricht als neue Nachricht falsch erkannt wird. Die Art und Weise, wie damit umgegangen wird, neigt dazu, jeden Stil zu brechen, der in einer neuen Zeile mit einem Punkt beginnt.
quelle