Best Practices & Überlegungen beim Schreiben von HTML-E-Mails [geschlossen]

Ich entwickle seit über einem Jahrzehnt Websites, habe jedoch schnell festgestellt, dass viele meiner Gewohnheiten bei der Entwicklung für das Web bei der Entwicklung für E-Mail-Clients unbrauchbar sind. Das hat mich enorm frustriert und ich dachte, ich würde eine Frage stellen:

Was sind Best Practices und notwendige Überlegungen für andere wie mich, die von Zeit zu Zeit für Google Mail, Outlook usw. entwerfen?

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

Kurzum: Was wird von der Web-Welt in die E-Mail-Welt übertragen und was nicht?

Dies scheint ein großartiger Ort zu sein, um einige Ressourcen für alle aufzulisten, die versuchen, HTML-E-Mails zu lernen. Dies ist (wahrscheinlich) die umfassendste Liste von HTML-E-Mail-Ressourcen, die Sie im Web finden. Viel Spaß beim Lernen.

Erste Schritte Anleitungen:

• Kampagnenmonitor
• Mailchimp
• Sitepoint
• Kunden online erreichen
• Tuts +
• E-Mail auf Säure

CSS-Support und allgemeine Anleitungen:

• Kampagnenmonitor | CSS-Support-Handbuch
• HTML Email Boilerplate
• Lackmus | FAQs zu E-Mail-Clients
• Kampagnenmonitor | Wird es funktionieren?
• Mailchimp | Feldhandbuch für E-Mail-Marketing
• E-Mail auf Säure | CSS-Grundlagen: Ein Leitfaden für Anfänger zum Stilisieren von HTML

Sie sollten Ihr CSS immer in HTML-E-Mail einbinden. Hier ist eine Liste der CSS Inlining Tools

Responsive Guides:

• Kampagnenmonitor | Responsive Support-Anleitung
• Stilkampagne | Responsive Support-Anleitung
• Lackmus | Responsive How-To-Infografik
• Lackmus | Große Liste an reaktionsschnellen und mobilen Ressourcen

Vorlagen & Frameworks:

• Ted Goas | Responsive E-Mail-Muster von Cerberus
• E-Mail auf Säure | Responsive Vorlage
• Brian Graves | Responsive E-Mail-Muster
• Antwort | Reaktionsschnelle Layouts
• Zurb | Auf Tinte reagierende Vorlagen
• Kampagnenmonitor | Kostenlose E-Mail-Vorlagen
• Mailchimp | E-Mail-Blaupausen

Responsive Alternative Beispiele:

• Tuts + | Responsive E-Mail ohne Medienabfragen
• Stapelüberlauf | Flüssigkeitsbeispiel
• E-Mail auf Säure | Monster's Fluid Layout
• Stilkampagne | Fließendes mobiles E-Mail-Design
• Stapelüberlauf | Floating Content

Auch der Ted Tedas Responsive Link oben hat ein exzellentes flüssiges Beispiel.

Fehlerbehebung und allgemeine Anleitungen:

• E-Mail auf Säure | Problemumgehung für Yahoo Media Query Bug
• Stapelüberlauf | Colspans und Rowspans in HTML-E-Mail
• Mailchimp | Outlook-bedingtes CSS
• Lackmus | Verbot von blauen Hyperlinks
• Stapelüberlauf | Webfonts in HTML-E-Mail

Sie müssen VML verwenden , damit Hintergrundbilder in Outlook funktionieren (außer im Body-Tag ). Hier sind einige VML-Links:

• Kampagnenmonitor | Kugelsichere Hintergründe
• Kampagnenmonitor | Kugelsichere Knöpfe

Ich mache das (schon ziemlich oft) schon eine Weile für meine Arbeit. Es gibt viele Fallstricke bei HTML-E-Mails. Verschiedene E-Mail-Clients rendern HTML unterschiedlich und lassen IE6 fortschrittlich aussehen.

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 können dies nicht bewältigen.
• Verwenden Sie keinen Zeilenabstand : Dies führt zu seltsamen Abstandsproblemen.
• Verwenden Sie keine Hintergrundbilder : Die Unterstützung für diese ist begrenzt.
• Stil-Tag-Tags mit "display: block" : Dies behebt seltsame Abstandsprobleme mit Hotmail.
• Wenn Sie mehrere Tabellen verwenden, verschachteln Sie diese in einer übergeordneten Tabelle : Dies verhindert seltsamere Abstandsprobleme.
• Verwenden Sie kein Javascript : Auch dies wird nicht sehr gut unterstützt.
• Stellen Sie sicher, dass Ihre E-Mail ohne Bilder lesbar ist : Der Benutzer darf sie nicht laden.
• Stellen Sie eine Online-Version bereit und verlinken Sie darauf : Auf diese Weise können Benutzer den beabsichtigten Inhalt anzeigen, auch wenn ihr E-Mail-Client schrecklich ist.
• Testen, testen, testen : Nur weil es in einem E-Mail-Client funktioniert, heißt das nicht, dass es in anderen funktioniert. Ein großes Problem ist Outlook 2007. Es verwendet Word, um HTML zu rendern (seufz).

Dies ist alles andere als eine umfassende Liste, sollte aber die meisten Menschen auf den richtigen Weg bringen.

Inline-CSS und -Tabellen - denken Sie an die Webentwicklung um 2000 und es wird Ihnen gut gehen. Der Kampagnenmonitor bietet eine hervorragende Ressource für die Aufgaben von E-Mail-Clients. Verwenden Sie zum Testen auch http://www.emailonacid.com/ - erspart das Senden zahlreicher Tests.