Welche Richtlinien für das HTML-E-Mail-Design gibt es? [geschlossen]

101

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:

  1. 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.
  2. 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 des style=""Attributs zugewiesen wurden
  3. 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.
  4. 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.

  1. 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?
  2. 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.

html  email 
— kaa
quelle
— John

Antworten:

63

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.

  • Kehren Sie zum Layout zu den Tabellen zurück (oder versuchen Sie vorzugsweise kein komplexes Layout).
  • Haben Sie Angst vor Hintergrundbildern (sie brechen in Outlook 2007 und Google Mail ab).
  • Das Style-Tag-in-the-Body-Ding ist, dass Hotmail es früher so akzeptiert hat - ich bin mir ziemlich sicher, dass sie es jetzt aber entfernen. Verwenden Sie Inline-Stile mit dem styleAttribut, wenn Sie CSS verwenden müssen.
  • Vergiss ganz float
  • Denken Sie daran, dass Ihre Bilder wahrscheinlich blockiert werden. Verwenden Sie Hintergrund- und Textfarbe zu Ihrem Vorteil. Stellen Sie sicher, dass lesbarer Text mit deaktivierten Bildern vorhanden ist
  • Seien Sie sehr vorsichtig mit Links, seien Sie besonders vorsichtig bei allem, was wie eine URL im Linktext aussieht - Sie werden "Phishing" -Filter verärgern (z. B. <a href="http://domain.tld">www.someotherdomain.tld</a>ist schlecht )
  • Denken Sie daran, dass die "Falte" bei Webmail-Clients in der Regel extrem hoch ist (auf einem 1024 x 768-Bildschirm zeigen die meisten Benutzeroberflächen nicht mehr als etwa hundert Pixel an). Geben Sie Ihre Identität ganz oben ein, damit der Empfänger sie erhält weiß wer du bist.
  • Die neueste Version von Outlook verfügt über einen Vorschaubereich "Hochformat", der erheblich schmaler ist als erwartet. 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 an Flash, Javascript, SVG, Canvas oder ähnliches.
  • Viel testen. Stellen Sie sicher, dass Sie in einem aktuellen Outlook testen (die Dinge haben sich stark geändert! Es verwendet jetzt Word als HTML-Rendering-Engine und ist verkrüppelt: Word 2007 HTML / CSS-Unterstützung ). Google Mail ist auch ziemlich pingelig. Überraschenderweise ist Yahoo Webmail extrem gut, mit netter CSS-Unterstützung.

Viel Glück ;)

Update zur Beantwortung weiterer Fragen:

Verwenden Sie nicht mehr als zwei Verschachtelungsebenen in Tabellen

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 .

Achten Sie darauf, Hintergrundbilder nicht in Zellen / Tabellen zu verschachteln

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.

— Dan
quelle
3
Warum hat sich die Unterstützung für HTML-E-Mails nicht so stark entwickelt? Warum sollten wir all diese schlechten Praktiken weiter umsetzen, als wären wir 1999?
— Smonff
Es gibt eine Problemumgehung für die Unterstützung von bgimages stackoverflow.com/a/17358553/413032 . Abwechselnd ein ms-Wort html. @ Smonff Ich stimme Ihnen vollkommen zu. ........ Warum ein von MS-Word gerendertes HTML!
— Davut Gürbüz
1
Überprüfen Sie die E-Mail-Codierung 101 von Lackmus, Hoffnung hilft.
— Shaijut
13

Verwenden Sie immer mehrteilige MIME und bieten Sie eine einfache Textalternative.

— JeeBee
quelle
2

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:

MIME-Version:
Content-Type:

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).

— jj33
quelle
1
  • Hintergrundbilder sind nicht zuverlässig.
  • Praktisch ein Kinderspiel, aber kein Javascript .
  • Verwenden Sie einen Editor, mit dem Sie die aktuelle Datei / den aktuellen Puffer als E-Mail senden können, oder suchen Sie zumindest ein Programm, mit dem Sie den Inhalt einer Datei als HTML-E-Mail senden können. Testen Sie Ihre E-Mails nicht, indem Sie den HTML-Code kopieren und in Outlook (oder ein anderes E-Mail-Programm) einfügen.
— Jonathan Arkell
quelle
1

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.

— Eli
quelle
0

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.

— Einstein
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.