3 Schritte für die Umsetzung eines E-Mail-Templates mit Teaser-Liste für MailChimp
MailChimp bietet schon einige leicht zu bearbeitende Templates, die jedoch bei komplexen Strukturen an ihre Grenzen stoßen. Wie setzt man dann ein E-Mail-Template um, das einerseits dem Corporate Design der Kundin oder des Kunden entspricht und andererseits responsive sowie fehlerfrei auf allen E-Mail-Clients dargestellt wird?
Eine große Herausforderung im letzten Jahr war für mich das Schreiben zweier E-Mail-Templates für eine Kundin oder einen Kunden mit strengem Corporate Design. Ziel war es, ein Template zu schreiben, das sowohl auf den gängigen E-Mail-Clients funktioniert als auch auf gängigen mobilen E-Mail-Apps lesbar ist und sinnvoll dargestellt wird. Zusätzlich mussten das Corporate Design berücksichtigt und das Template in MailChimp eingebunden werden, da die Bearbeitung der Mail-Inhalte und der Versand über MailChimp laufen würde.
MailChimp bietet schon einige leicht zu bearbeitende und funktionierende Templates, die jedoch bei komplexen Strukturen oder individuellen Designs an ihre Grenzen stoßen. Deshalb wurden die Templates als sogenannte „Custom Templates“ umgesetzt. MailChimp stellt dafür HTML-Attribute und CSS-Anweisungen bereit, mit denen Bereiche bearbeitbar gemacht oder Farben definiert werden können. Ich stelle nun die Umsetzung einer individuell anpassbaren responsive Teaser-Liste vor, die Teil eines der beiden beauftragten E-Mail-Templates war.
Wie auf dem Bild zu sehen, ist das Grundlayout des ersten Templates zweispaltig mit einer Sidebar, die bei kleineren Bildschirmen unter den Hauptinhalt rutschen soll. MailChimp stellt dafür zwar Vorlagen zum Download bereit, jedoch haben diese leider nicht das gewünschte Verhalten gezeigt. Deshalb habe ich nur das Grundgerüst einer einfachen Vorlage verwendet und mir das zweispaltige Layout selbst geschrieben.
Schritt 1: Ein responsives Grundgerüst für MailChimp
Auf der Suche nach einer guten Lösung, die sowohl auf mobilen Clients als auch in Outlook funktioniert, bin ich auf diesen Blog-Artikel (blog.jmwhite.co.uk/2014/09/08/turning-floated-tables-columns-outlook) gestoßen. Bei dieser Lösung enthält eine Tabelle zwei Tabellen (für die zwei Spalten). Mittels des Conditional Comments „<!–[if mso]>“ werden diese zwei Tabellen für Outlook in zwei Spalten getrennt. Ich habe diese Lösung wie folgt adaptiert:
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<!-- Wrapping cell for the floated tables -->
<td>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="350">
<tr>
<td style="padding-right:10px;">Inhalt linke Spalte</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="right" width="250">
<tr>
<td style="padding-left:10px;">Inhalt rechte Spalte</td>
</tr>
</table>
</td>
<!-- Closing tag for wrapping cell -->
</tr>
</table>
Für den Original Code, hier lang: blog.jmwhite.co.uk/2014/09/08/turning-floated-tables-columns-outlook
Grundsätzlich rate ich davon ab, Conditional Comments in E-Mail-Templates zu verwenden, da sie zu fehleranfällig sind und meist alle Darstellungsprobleme ohne Conditional Comments gelöst werden können. Diese Lösung war aber die einzige, die responsive in allen getesteten Clients funktioniert hat, deshalb habe ich eine Ausnahme gemacht. Es ist auch das einzige Mal, dass ich Conditional Comments in einem E-Mail-Template verwendet habe.
Schritt 2: Teaser-Elemente können in MailChimp individuell und in beliebiger Reihenfolge erstellt werden
Nun sollen in der rechten Spalte Teaser angezeigt werden, die Redakteurinnen und Redakteure anlegen, bearbeiten und dessen Layout bestimmen können. Folgende Teaser-Layouts sollen verfügbar sein:
- Teaser mit Bild in voller Breite und Text
- Teaser nur mit Text
- Teaser mit einem kleineren Bild und Text
Um ein Template in MailChimp bearbeitbar zu machen, gibt es die Möglichkeit die HTML-Tags mit Attributen zu versehen. Für Inhalte und Bilder gibt es das Attribut mc:edit, für Teaser-Listen verwende ich mc:variant. Die Erklärung aller Attribute der „MailChimp Template Language“ gibt es hier: templates.mailchimp.com/getting-started/template-language
Ich habe demnach zuerst die Struktur der einzelnen Teaser angelegt und danach alle Text- und Bildelemente, die Redakteurinnen und Redakteure bearbeiten sollen, mit mc:edit gekennzeichnet.
<img src="url.png" mc:edit="custom-box-fullimage">
<div mc:edit="img-box-content">
<p>Teasertitel</p>
<p><a href="#">weiterlesen</a></p>
</div>Beim Bildelement können die Redakteurinnen und Redakteure nun ein anderes Bild auswählen, hochladen oder die Größe einstellen. Für alle anderen Elemente mit dem Attribut mc:edit erscheint ein Texteditor, wo verschiedene Textstile und Formatierungen eingestellt werden können.
Weiters gibt es in der Template-Sprache noch mc:repeatable für Elemente, die dupliziert werden können, zum Beispiel ein Element mit Bild und Text. Sollen Elemente mit unterschiedlichem Layout erstellt werden, gibt man noch zusätzlich das Attribut mc:variant an. Das Gerüst für die geforderte Teaser-Liste sieht dann wie folgt aus:
<table>
<tr mc:repeatable="col-box" mc:variant="Teaser mit Bild in voller Breite und Text">
<!-- Inhalte Teaser 1 -->
</tr>
<tr mc:repeatable="col-box" mc:variant="Teaser nur mit Text">
<!-- Inhalte Teaser 2 -->
</tr>
<tr mc:repeatable="col-box" mc:variant="Teaser mit einem kleineren Bild und Text">
<!-- Inhalte Teaser 3 -->
</tr>
</table>So können nun drei unterschiedliche Arten von Teasern durch Redakteurinnen und Redakteure erstellt werden, indem sie ein neues Element erstellen und durch eine Drop-Down-Liste das richtige Layout auswählen können.
Schritt 3: Farben der Teaser können in MailChimp angepasst werden
Zuletzt sollen die Kopfzeile des Teasers und auch der Header-Bereich sowie die Anrede dieselbe Farbe haben und von Redakteurinnen und Redakteuren so einfach wie möglich angepasst werden können.
Die Template-Sprache von MailChimp bietet hier die Möglichkeit, mit CSS-Kommentaren zu definieren, welche Designs geändert werden können. Um die Hintergrundfarbe einer Klasse durch Redakteurinnen und Redakteure veränderbar zu machen, schreibt man den Kommentar /*@editable*/ vor die betreffende CSS-Anweisung.
.hintergrund-farbe {
/*@editable*/
background-color: #F7CAC9;
}Um zu definieren, wo in der Kampagnen-Design-Ansicht die Farbe geändert werden kann, definiert man den Reiter (@tab) und die Unter-Kategorie (@section) in einem Kommentar vor der Klasse. Mit @tip kann man noch eine Beschreibung hinzufügen, dies ist aber optional.
/**
* @tab Vorlagen Farbe
* @section Farb-Highlighter Hintergrundfarbe
* @tip Setzen Sie hier die Farbe für dieses Template
*/
.hintergrund-farbe {
/*@editable*/
background-color: #F7CAC9;
}
/**
* @tab Vorlagen Farbe
* @section Farb-Highlighter Schrift
* @tip Setzen Sie hier die Farbe für dieses Template
*/
.schrift-farbe {
/*@editable*/
color: #FF6338;
}Diese Klassen müssen im Template nur den richtigen Elementen zugewiesen werden, und sobald Redakteurinnen und Redakteure im Template die Farbe ändern, werden alle betreffenden Elemente mittels dieser CSS-Anweisung gestylt.
Fazit
Mit diesen drei Schritten kann schon einiges für MailChimp-Templates umgesetzt werden. Trotzdem kann die Entwicklung von „Custom Templates“ für MailChimp zeitweise nervenaufreibend sein, da MailChimp nach den Anpassungen der Nutzer erst das fertige E-Mail-Template generiert und dadurch Elemente oder Styling-Anweisungen verloren gehen können. Es gilt wie überall: Je weniger Code desto besser, da es schwer nachzuvollziehen ist, wo diese Dinge verloren gegangen sind.
Weitere Tipps zur Gestaltung von E-Mail-Templates habe ich in meinem nächsten Blogbeitrag: „7 lebensrettende Tipps für die Entwicklung von E-Mail-Templates“ zusammengefasst.
Learnings
MailChimp Template: Schritt 1
Responsives Grundgerüst für MailChimp
MailChimp Template: Schritt 2
Teaser-Elemente können in MailChimp individuell und in beliebiger Reihenfolge erstellt werden
MailChimp Template: Schritt 3
Farben der Teaser können in MailChimp angepasst werden
Veröffentlicht am: 18.05.2016
Autorin
Mirjam Zenz
Wir haben noch mehr super interessante Blogartikel!