tag - Best Practices & Überlegungen beim Schreiben von HTML-E-Mails




title tag definition (4)

Das ist auch gut, also schauen Sie, welche Inline-CSS in welchem ​​E-Mail-Browser unterstützt wird: http://www.campaignmonitor.com/css/

Ich empfehle auch Litmusapp (google it!). Dies ist ein gutes Werkzeug zum Überprüfen der Dinge.

Ich entwickle seit über einem Jahrzehnt Websites, habe aber schnell festgestellt, dass viele meiner Gewohnheiten bei der Entwicklung für das Web nutzlos sind, wenn ich für E-Mail-Clients arbeite. Dies hat mich sehr frustriert, so dass ich dachte, ich würde eine Frage stellen, die hoffentlich die besten Praktiken und die notwendigen Überlegungen für andere wie mich aufzeigt, die sich von Zeit zu Zeit für Google Mail, Outlook usw. interessieren.

Beispiel: <style>...</style> vs Inline-CSS.

Kurz: Was überträgt sich von der Web-Welt auf die E-Mail-Welt und was nicht.


Dies scheint ein großartiger Ort zu sein, um einige Ressourcen für jeden aufzulisten, der HTML-E-Mails lernen möchte. Dies ist (wahrscheinlich) die umfassendste Liste von HTML-E-Mail-Ressourcen, die Sie im Internet finden. Glückliches Lernen.

Erste Schritte:

CSS-Unterstützung und allgemeine Anleitungen:

Sie sollten Ihr CSS immer in HTML-E-Mail einfügen. Hier finden Sie eine Liste der CSS Inlining Tools

Responsive Guides:

Vorlagen und Frameworks:

Responsive alternative Beispiele:

Auch der Link zu Ted Goas Responsive oben ist ein hervorragendes flüssiges Beispiel.

Fehlerbehebung und allgemeine Anleitungen:

Sie müssen VML , um Hintergrundbilder in Outlook zu erhalten (außer im body-Tag ). Hier sind einige VML-Links:


Ich mache diese (zu Zeiten) schon seit einiger Zeit für meine Arbeit. Es gibt viele Fallstricke bei HTML-E-Mails. Unterschiedliche E-Mail-Clients rendern HTML unterschiedlich und lassen IE6 so aussehen, wie es aussieht.

Hier ist eine Zusammenfassung dessen, was ich bisher gelernt habe.

  • Inline-CSS verwenden : Stile werden nicht immer unterstützt.
  • Verwenden Sie Tabellenlayouts : Ich weiß, aber Div-Layouts sind CSS-abhängig und viele der E-Mail-Clients sind nicht in der Lage.
  • Verwenden Sie keine rowspan : Dies verursacht seltsame Abstände Probleme.
  • Verwenden Sie keine Hintergrundbilder : Die Unterstützung für diese ist begrenzt.
  • Style-Image-Tags mit "display: block" : Dies behebt seltsame Abstände bei Hotmail.
  • Wenn Sie mehrere Tabellen verwenden, verschachteln Sie sie in einer übergeordneten Tabelle : Dadurch werden mehr seltsame Abstände vermieden.
  • Verwenden Sie kein Javascript : Auch hier nicht sehr gut unterstützt.
  • Stellen Sie sicher, dass Ihre E-Mail ohne Bilder lesbar ist : Der Benutzer lädt sie möglicherweise nicht.
  • Stellen Sie eine Online-Version zur Verfügung und verlinken Sie damit : So können Benutzer den beabsichtigten Inhalt sehen, selbst wenn ihr E-Mail-Client schrecklich ist.
  • Test, Test, Test : Nur weil es in einem E-Mail-Client funktioniert, bedeutet es nicht, dass es in anderen funktioniert. Ein großes Ding ist Outlook 2007. Es verwendet Word, um HTML (Seufzer) zu rendern.

Dies ist bei weitem nicht eine umfassende Liste, sondern sollte die meisten Menschen auf den richtigen Weg bringen.


Inline CSS und Tabellen - denke Web-Entwicklung circa 2000 und alles wird gut. Campaign Monitor hat eine hervorragende Ressource für das, womit E-Mail-Clients umgehen können. Verwenden Sie auch http://www.emailonacid.com/ zum Testen - spart das Senden von vielen Tests.







html-email