example - simple html email template




Welche Richtlinien für HTML-E-Mail-Design gibt es? (6)

Betten Sie Ihre Bilder ein, verlinken Sie sie nicht.

Das ist schlecht :

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

Das ist gut :

<img src=cid:myImage/>

Ja, es sieht komisch aus, aber sieh dir diese Anleitung zum Einbetten von Bildern in E-Mails an .

Welche Richtlinien können Sie für die umfassende HTML-Formatierung in E-Mails geben, während Sie gleichzeitig eine gute visuelle Stabilität für viele Clients und webbasierte E-Mail-Schnittstellen beibehalten?

Eine nicht verwandte Antwort auf eine Frage zu Stack Overflow schlug vor:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Welche enthält die folgenden Richtlinien:

  1. Platzieren Sie das Stylesheet in <body> anstelle von <head>
    Einige E-Mail-Clients streichen CSS aus dem Kopf, lassen es aber, wenn der Stilblock (ungültig) im Text ist.
  2. Verwenden Sie Inline-Stile, wo immer es möglich ist
    Gmail entfernt alle Stylesheets, egal ob im <head> oder im <body> , <body> jedoch Inline-Stile, die mit dem Attribut style="" zugewiesen wurden
  3. Zurück zu den Tabellen
    E-Mail-Standards haben in den letzten Jahren dank Outlook 2007, das die Microsoft Word-Rendering-Engine verwendet, einen riesigen Schritt nach hinten gemacht. Verlernen Sie das meiste, was Sie über Positionierung ohne Stylesheets gelernt haben.
  4. Verlassen Sie sich nicht auf Bilder
    Die meisten Clients und die meisten webbasierten E-Mail-Clients zeigen keine Bilder an, wenn der Benutzer sie nicht ausdrücklich anfordert, angezeigt zu werden.

Ich habe auch ein paar "unbestätigte" Wahrheiten, an die ich mich nicht erinnere, wo ich sie gelesen habe.

  1. Verwenden Sie nicht mehr als zwei Verschachtelungsebenen in Tabellen
    Ist das wahr. Was wird passieren, wenn ich es tue? Gibt es bestimmte Kunden / Kunden, die daran ersticken?
  2. Seien Sie vorsichtig beim Verschachteln von Hintergrundbildern in Zellen / Tabellen
    Soweit ich weiß, können Situationen auftreten, in denen das Hintergrundbild in der absteigenden Tabelle / Zelle komplett neu angewendet wird und nicht nur "durchscheinen". Wieder wahr oder nicht? Welche Kunden?

Ich möchte diese Liste mit weiteren Leitlinien und Erfahrungen aus den Schützengräben ergänzen.

Können Sie weitere Vorschläge machen?

Update: Ich frage ausdrücklich nach Richtlinien für den Designteil in HTML und Konsistenz. Fragen zu allgemeinen Richtlinien zur Vermeidung von Spamfiltern und allgemeine Höflichkeit sind bereits auf SO gestellt.


Die Leute, die hinter Campaign Monitor stehen, haben auch eine Website mit dem E-Mail-Standards-Projekt mit vielen guten Informationen gestartet.


Es ist wirklich sehr schwer, eine anständige HTML-E-Mail zu erstellen, wenn man sie aus einer modernen HTML- und CSS-Perspektive betrachtet.

Für beste Ergebnisse stell dir vor, es ist 1999.

  • Gehen Sie zurück zu Tabellen für das Layout (oder bevorzugen Sie - versuchen Sie kein komplexes Layout)
  • Haben Sie Angst vor Hintergrundbildern (sie brechen in Outlook 2007 und Gmail).
  • Das Stil-Tag-in-the-Body-Ding ist, weil Hotmail es auf diese Weise akzeptiert hat - ich bin mir ziemlich sicher, dass sie es jetzt ausziehen. Verwenden Sie Inline-Stile mit dem Attribut style , wenn Sie CSS verwenden müssen.
  • Vergiss ganz auf float
  • Denken Sie daran, dass Ihre Bilder wahrscheinlich blockiert werden - verwenden Sie Hintergrund und Textfarbe zu Ihrem Vorteil - stellen Sie sicher, dass es einen lesbaren Text mit deaktivierten Bildern gibt
  • Seien Sie sehr vorsichtig mit Links, seien Sie besonders vorsichtig bei allem, was wie eine URL im Linktext aussieht - Sie werden "Phishing" <a href="http://domain.tld">www.someotherdomain.tld</a> verärgern (zB <a href="http://domain.tld">www.someotherdomain.tld</a> ist schlecht )
  • Denken Sie daran, dass das "Falte" auf Webmail-Clients dazu neigt, auf der Seite extrem hoch zu sein (auf einem 1024x768-Bildschirm zeigen die meisten Schnittstellen nicht mehr als hundert Pixel oder so) - holen Sie sich Ihre Identität oben rechts, also der Empfänger weiß wer du bist.
  • Die aktuelle Version von Outlook hat ein Vorschaubild "Porträt", das deutlich schmaler ist, als Sie vielleicht erwarten - seien Sie bei Layouts mit fester Breite sehr vorsichtig, wenn Sie sie verwenden müssen, machen Sie sie so schmal wie möglich.
  • Denken Sie nicht einmal über Flash, Javascript, SVG, Canvas oder ähnliches nach.
  • Test, viel. Stellen Sie sicher, dass Sie in einem aktuellen Outlook testen (die Dinge haben sich sehr verändert! Es verwendet jetzt Word als HTML-Rendering-Engine, und es ist verkrüppelt: Word 2007 HTML / CSS-Unterstützung ). Gmail ist auch ziemlich knifflig. Überraschenderweise ist Yahoos Webmail extrem gut, mit schöner CSS-Unterstützung.

Viel Glück ;)

Update um weitere Fragen zu beantworten:

Verwenden Sie nicht mehr als zwei Verschachtelungsebenen in Tabellen

Ich glaube, dass dies eine ältere Richtlinie zu Lotus Notes ist. Verschachtelte Tabellen sollten in Ordnung sein, aber wirklich, wenn Sie ein Layout haben, das kompliziert genug ist, um sie zu benötigen, werden Sie wahrscheinlich sowieso Probleme haben. Halten Sie Ihr Layout einfach .

Seien Sie vorsichtig beim Verschachteln von Hintergrundbildern in Zellen / Tabellen

Dies kann mit dem oben genannten zusammenhängen, und das gleiche gilt, wenn Sie so kompliziert werden, dann werden Sie Probleme haben. Neuere Versionen von Outlook unterstützen keine Hintergrundbilder, daher sollten Sie sie am besten vergessen.


Ich denke, das ist niedriger als die Frage, die Sie stellen möchten, aber wenn Sie wirklich wollen, dass eine HTML-E-Mail von so vielen Clients wie möglich angezeigt wird, stellen Sie sicher, dass sie gültiges MIME verwendet. Damit eine E-Mail als gültige MIME-Nachricht betrachtet werden kann, MÜSSEN die Header (im RFC-Sinn des Wortes) beide Header enthalten:

MIME-Version:
Content-Type:

Sehr strenge Clients zeigen Ihren HTML-Code als Rohtext an, wenn der eine oder der andere fehlt. Sie würden überrascht sein, wie viele große Online-Anbieter, die es besser wissen sollten, dies vermasselt haben (insbesondere habe ich HTML-E-Mails mit fehlenden MIME-Version: Headern von Amazon und der ACM in der Vergangenheit bekommen)


Wenn Sie einen Stilblock einschließen, beginnen Sie keine neue Zeile mit ".classname" oder "." etwas. Setzen Sie eine Klammer oder etwas vor der Periode. Wenn Sie dies nicht tun, werden einige Web-Mail-Systeme Ihre Stylesheets nicht ordnungsgemäß anzeigen.

Viele Leute haben aufgrund dieses Verhaltens fälschlicherweise angenommen, dass sie keine CSS-Blöcke in E-Mails verwenden können ... IIRC "." ist das Trennzeichen für SMTP. Systeme werden dazu neigen, in ihren Mail-Speichern zu entkommen, um zu verhindern, dass der Inhalt einer Nachricht als neue Nachricht falsch erkannt wird. Die Art, wie dies gehandhabt wird, neigt dazu, jeden Stil zu brechen, beginnend mit einer neuen Zeile mit einem Punkt.






email