Doch die E-Mail hat auch ihre T\u00fccken. Aufgrund fehlender Standards hat jeder E-Mail Client seine eigenen Methoden zum Rendern von HTML und CSS. Daher m\u00fcssen viele alte und neue Programme getestet und Workarounds gefunden werden, damit E-Mails auch in jedem Mail-Client und \u00fcber jedes Endger\u00e4t richtig angezeigt werden.<\/p>\n
Vor allem die Anzeige am Smartphone oder Tablet spielt eine gro\u00dfe Rolle. Da E-Mails heute sehr oft mobil abgerufen werden, m\u00fcssen auch Newsletter auf jedem Endger\u00e4t richtig angezeigt werden. Responsive Design spielt dabei also eine wichtige Rolle. Grunds\u00e4tzlich gibt es viele Anbieter, die responsive Templates kostenlos oder gegen eine einmalige Zahlung zur Verf\u00fcgung stellen. Wenn das Corporate Design des eigenen Unternehmens oder des Kunden aber ein Custom Template erfordern, entsteht leider oftmals das Problem, dass die Erstellung eines Custom Newsletter Templates die Budgetvorstellungen bei weitem \u00fcbertreffen und in vielen F\u00e4llen auch gar nicht unbedingt notwendig sind.<\/p>\n
Um diesem Problem entgegenzuwirken, wollen wir in dem folgenden Beitrag zeigen, welche M\u00f6glichkeiten und Tipps es gibt, um auch bei kleineren Budgets an das Corporate Design angepasste Newsletter Templates zu erstellen und den Workflow bei der Erstellung dieser zu erleichtern.<\/p>\n
E-Mail Templates designen<\/h2>\nSCHRITT 1 (OPTIONAL):<\/strong>\u00a0DOWNLOAD EINES BASIC TEMPLATES<\/h3>\nWie bereits erw\u00e4hnt, gibt es viele Anbieter, die Basic Templates oder bereits designte Templates kostenlos oder gegen eine einmalige Zahlung zur Verf\u00fcgung stellen.<\/p>\n
Wer am liebsten mit einem bestehenden Design starten m\u00f6chte, dass dem Endprodukt vielleicht schon \u00e4hnlich ist oder auf das man zumindest aufbauen kann, der wird bei\u00a0themeforest<\/a>,\u00a0pixel77<\/a>\u00a0und\u00a0copernica<\/a>\u00a0f\u00fcndig.<\/p>\nWenn der Aufbau allerdings komplett individuell sein soll, dann ist\u00a0Campaign Monitor<\/a>\u00a0eine gute Wahl. Einerseits bieten sie einen\u00a0Template Builder<\/a>\u00a0an, mit dem man online selbst Templates bauen kann, die responsive, fully tested und sogar f\u00fcr Outlook und Gmail geeignet sind. Andererseits stellen sie auch ein Campaign Tool zur Verf\u00fcgung. Dieses ist allerdings kostenpflichtig. Der Online Builder ist einfach anzuwenden und bietet auch die M\u00f6glichkeit den HTML Code herunterzuladen, um noch custom \u00c4nderungen vorzunehmen, die mit dem vorgefertigtem Builder nicht m\u00f6glich sind oder um ein anderes Campaign Tool nutzen zu k\u00f6nnen.<\/p>\n![\"\"](\"https:\/\/www.zensations.at\/wp-content\/uploads\/2023\/06\/E-Mail-Templates_TemplateBuilder_big.jpg\")
<\/p>\n
Mindestens so gut (oder sogar noch besser?) ist\u00a0MailChimp<\/a>. Es ist der Allesk\u00f6nner im Mailbereich, weil er sowohl predesignte Templates zur Verf\u00fcgung stellt, als auch einen Drag and Drop E-Mail Designer.<\/p>\nWer sein Template selber Coden m\u00f6chte, f\u00fcr den h\u00e4lt MailChimp\u00a0sechs responsive E-Mail Templates<\/a>\u00a0bereit, die eine responsive Struktur aufweisen und deren Code zum Bearbeiten runtergeladen werden kann. Daf\u00fcr kann man dann den\u00a0E-Mail Template Reference Guide<\/a>\u00a0zu rate ziehen.<\/p>\n![\"\"](\"https:\/\/www.zensations.at\/wp-content\/uploads\/2023\/06\/E-Mail-Templates_MailChimp_big.jpg\")
<\/p>\n
Ein weiteres Framework, das mehrere getestete Grundger\u00fcste zur Verf\u00fcgung stellt, die dann beliebig erweitert\/ver\u00e4ndert werden k\u00f6nnen bietet zum Beispiel\u00a0ZURB Ink<\/a>. Sie stellen\u00a0f\u00fcnf responsive E-Mail Templates<\/a>\u00a0zur Verf\u00fcgung, die alle E-Mail Clients (sogar Outlook) unterst\u00fctzen und mithilfe der\u00a0Dokumentation<\/a>\u00a0individuell angepasst werden k\u00f6nnen. Dasselbe gilt f\u00fcr\u00a0Cerberus<\/a>, die zwei Templates anbieten: einmal mit und einmal ohne Media Queries.<\/p>\nSCHRITT 2:<\/strong>\u00a0DER SPASS MIT DEM CODE<\/h3>\nSoweit alles kein Problem. Doch jetzt f\u00e4ngt der Spa\u00df erst an. Egal ob erfahrener Web Entwickler oder Anf\u00e4nger, ab jetzt hei\u00dft es: Vergessen Sie alles, was Sie \u00fcber Web Development wissen. Man kann weder divs verwenden, noch einen margin einstellen. Semantisches HTML und die neuesten CSS Features sind bei E-Mails leider nicht zu gebrauchen.<\/p>\n
Falls kein bereits bestehendes und getestetes Template verwendet wird, muss zuerst eine Struktur gebildet werden – und zwar mithilfe von tables, die ineinander verschachtelt werden. Diese Struktur sollte dann sofort getestet werden. Dazu eignen sich am besten\u00a0Litmus<\/a>\u00a0oder\u00a0Email on Acid<\/a>. Generell sollte man w\u00e4hrend dem Erstellungsprozess sehr sehr oft testen, um sp\u00e4ter nicht mit vielen Bugs, die sich gegenseitig beeinflussen, konfrontiert zu sein.<\/p>\nW\u00e4hrend des Entstehungsprozesses sollte man sich die Borders anzeigen lassen, damit man \u00fcber einen guten \u00dcberblick verf\u00fcgt. Nicole Merlin empfiehlt im Artikel\u00a0What You Should Know About HTML Email<\/a>\u00a0beispielsweise den folgenden Workflow: + Skeleton erstellen + Testen + Content einf\u00fcgen + Testen + Farben und Fonts stylen + Testen + Borders entfernen + Testen und senden<\/p>\nMan darf aber auch nicht darauf vergessen, mit dem\u00a0W3C Validator<\/a>\u00a0zu validieren.<\/p>\n\u00dcber diesen Part k\u00f6nnte man seitenweise berichten, aber das haben zum Gl\u00fcck schon andere getan. Auch hier findet man viele Hilfestellungen im Web, wie zum Beispiel ein\u00a0Tutorial<\/a>, wie man eine einfache Responsive HTML Email mit all seinen T\u00fccken und Workarounds erstellt.<\/p>\nSCHRITT 3:<\/strong>\u00a0VERSENDEN MIT EINEM E-MAIL CAMPAIGN TOOL<\/h3>\nBeliebte Tools zum Versenden sind\u00a0MailChimp<\/a>\u00a0und\u00a0Campaign Monitor<\/a>. Sie sind leicht zu bedienen und mit einem freien Account verwendbar. Bei MailChimp ist das Campaign Tool sogar bis zu 2000 Abonnenten und 12000 Mails pro Monat kostenlos. Diese Tools bringen deinen CSS Code automatisch inline, sodass er in den meisten E-Mail Clients gerendert wird.<\/p>\nFazit<\/h2>\n
E-Mail Templates zu erstellen ist und bleibt kein allzu einfaches Unterfangen. Gl\u00fccklicherweise gibt es einige Tools, welche das Prozedere erleichtern und mit denen man den Weg aus dem Client-Chaos findet. Dadurch finden wir immer wieder Mittel und Wege, um Newsletter so zu gestalten, dass es am Ende dem Corporate Design unser Kunden entspricht.<\/p>\n","protected":false},"excerpt":{"rendered":"
Die E-Mail ist der beste Weg um Kunden zu erreichen – sie ist fast 40mal effektiver als Facebook und Twitter zusammen. Das besagt zumindest eine\u00a0Studie von McKinsey. Dieses Argument und viele weitere Gr\u00fcnde veranlassen, dass die E-Mail und insbesondere der Newsletter zu einem beliebten Marketing-Tool z\u00e4hlen. Doch die E-Mail hat auch ihre T\u00fccken. Aufgrund fehlender […]<\/p>\n","protected":false},"author":24,"featured_media":1225,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[74,78,84],"tags":[210],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1224"}],"collection":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/comments?post=1224"}],"version-history":[{"count":1,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1224\/revisions"}],"predecessor-version":[{"id":1228,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1224\/revisions\/1228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media\/1225"}],"wp:attachment":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media?parent=1224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/categories?post=1224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/tags?post=1224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Wie bereits erw\u00e4hnt, gibt es viele Anbieter, die Basic Templates oder bereits designte Templates kostenlos oder gegen eine einmalige Zahlung zur Verf\u00fcgung stellen.<\/p>\n
Wer am liebsten mit einem bestehenden Design starten m\u00f6chte, dass dem Endprodukt vielleicht schon \u00e4hnlich ist oder auf das man zumindest aufbauen kann, der wird bei\u00a0themeforest<\/a>,\u00a0pixel77<\/a>\u00a0und\u00a0copernica<\/a>\u00a0f\u00fcndig.<\/p>\n Wenn der Aufbau allerdings komplett individuell sein soll, dann ist\u00a0Campaign Monitor<\/a>\u00a0eine gute Wahl. Einerseits bieten sie einen\u00a0Template Builder<\/a>\u00a0an, mit dem man online selbst Templates bauen kann, die responsive, fully tested und sogar f\u00fcr Outlook und Gmail geeignet sind. Andererseits stellen sie auch ein Campaign Tool zur Verf\u00fcgung. Dieses ist allerdings kostenpflichtig. Der Online Builder ist einfach anzuwenden und bietet auch die M\u00f6glichkeit den HTML Code herunterzuladen, um noch custom \u00c4nderungen vorzunehmen, die mit dem vorgefertigtem Builder nicht m\u00f6glich sind oder um ein anderes Campaign Tool nutzen zu k\u00f6nnen.<\/p>\n Mindestens so gut (oder sogar noch besser?) ist\u00a0MailChimp<\/a>. Es ist der Allesk\u00f6nner im Mailbereich, weil er sowohl predesignte Templates zur Verf\u00fcgung stellt, als auch einen Drag and Drop E-Mail Designer.<\/p>\n Wer sein Template selber Coden m\u00f6chte, f\u00fcr den h\u00e4lt MailChimp\u00a0sechs responsive E-Mail Templates<\/a>\u00a0bereit, die eine responsive Struktur aufweisen und deren Code zum Bearbeiten runtergeladen werden kann. Daf\u00fcr kann man dann den\u00a0E-Mail Template Reference Guide<\/a>\u00a0zu rate ziehen.<\/p>\n Ein weiteres Framework, das mehrere getestete Grundger\u00fcste zur Verf\u00fcgung stellt, die dann beliebig erweitert\/ver\u00e4ndert werden k\u00f6nnen bietet zum Beispiel\u00a0ZURB Ink<\/a>. Sie stellen\u00a0f\u00fcnf responsive E-Mail Templates<\/a>\u00a0zur Verf\u00fcgung, die alle E-Mail Clients (sogar Outlook) unterst\u00fctzen und mithilfe der\u00a0Dokumentation<\/a>\u00a0individuell angepasst werden k\u00f6nnen. Dasselbe gilt f\u00fcr\u00a0Cerberus<\/a>, die zwei Templates anbieten: einmal mit und einmal ohne Media Queries.<\/p>\n Soweit alles kein Problem. Doch jetzt f\u00e4ngt der Spa\u00df erst an. Egal ob erfahrener Web Entwickler oder Anf\u00e4nger, ab jetzt hei\u00dft es: Vergessen Sie alles, was Sie \u00fcber Web Development wissen. Man kann weder divs verwenden, noch einen margin einstellen. Semantisches HTML und die neuesten CSS Features sind bei E-Mails leider nicht zu gebrauchen.<\/p>\n Falls kein bereits bestehendes und getestetes Template verwendet wird, muss zuerst eine Struktur gebildet werden – und zwar mithilfe von tables, die ineinander verschachtelt werden. Diese Struktur sollte dann sofort getestet werden. Dazu eignen sich am besten\u00a0Litmus<\/a>\u00a0oder\u00a0Email on Acid<\/a>. Generell sollte man w\u00e4hrend dem Erstellungsprozess sehr sehr oft testen, um sp\u00e4ter nicht mit vielen Bugs, die sich gegenseitig beeinflussen, konfrontiert zu sein.<\/p>\n W\u00e4hrend des Entstehungsprozesses sollte man sich die Borders anzeigen lassen, damit man \u00fcber einen guten \u00dcberblick verf\u00fcgt. Nicole Merlin empfiehlt im Artikel\u00a0What You Should Know About HTML Email<\/a>\u00a0beispielsweise den folgenden Workflow: + Skeleton erstellen + Testen + Content einf\u00fcgen + Testen + Farben und Fonts stylen + Testen + Borders entfernen + Testen und senden<\/p>\n Man darf aber auch nicht darauf vergessen, mit dem\u00a0W3C Validator<\/a>\u00a0zu validieren.<\/p>\n \u00dcber diesen Part k\u00f6nnte man seitenweise berichten, aber das haben zum Gl\u00fcck schon andere getan. Auch hier findet man viele Hilfestellungen im Web, wie zum Beispiel ein\u00a0Tutorial<\/a>, wie man eine einfache Responsive HTML Email mit all seinen T\u00fccken und Workarounds erstellt.<\/p>\n Beliebte Tools zum Versenden sind\u00a0MailChimp<\/a>\u00a0und\u00a0Campaign Monitor<\/a>. Sie sind leicht zu bedienen und mit einem freien Account verwendbar. Bei MailChimp ist das Campaign Tool sogar bis zu 2000 Abonnenten und 12000 Mails pro Monat kostenlos. Diese Tools bringen deinen CSS Code automatisch inline, sodass er in den meisten E-Mail Clients gerendert wird.<\/p>\n E-Mail Templates zu erstellen ist und bleibt kein allzu einfaches Unterfangen. Gl\u00fccklicherweise gibt es einige Tools, welche das Prozedere erleichtern und mit denen man den Weg aus dem Client-Chaos findet. Dadurch finden wir immer wieder Mittel und Wege, um Newsletter so zu gestalten, dass es am Ende dem Corporate Design unser Kunden entspricht.<\/p>\n","protected":false},"excerpt":{"rendered":" Die E-Mail ist der beste Weg um Kunden zu erreichen – sie ist fast 40mal effektiver als Facebook und Twitter zusammen. Das besagt zumindest eine\u00a0Studie von McKinsey. Dieses Argument und viele weitere Gr\u00fcnde veranlassen, dass die E-Mail und insbesondere der Newsletter zu einem beliebten Marketing-Tool z\u00e4hlen. Doch die E-Mail hat auch ihre T\u00fccken. Aufgrund fehlender […]<\/p>\n","protected":false},"author":24,"featured_media":1225,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[74,78,84],"tags":[210],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1224"}],"collection":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/comments?post=1224"}],"version-history":[{"count":1,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1224\/revisions"}],"predecessor-version":[{"id":1228,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1224\/revisions\/1228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media\/1225"}],"wp:attachment":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media?parent=1224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/categories?post=1224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/tags?post=1224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/p>\n<\/p>\nSCHRITT 2:<\/strong>\u00a0DER SPASS MIT DEM CODE<\/h3>\n
SCHRITT 3:<\/strong>\u00a0VERSENDEN MIT EINEM E-MAIL CAMPAIGN TOOL<\/h3>\n
Fazit<\/h2>\n