18.1 Struktur
Nachfolgend finden Sie eine Übersicht aller Strukturen, die im Zusammenhang mit Layout Builder Schablonen zum Einsatz kommen. Die einzelnen Strukturen werden in den Unterkapiteln im Detail vorgestellt.
Template \<head>
| Struktur | Effekt |
|---|---|
| Doctype | Definiert den Document Type |
| Unicode | Informiert den Client, dass Unicode Zeichen gelesen werden sollen |
| Title | Setzt den Titel in der Browser-Vorschau |
| Viewport | Passt den Bildausschnitt an das entsprechende Gerät an |
| IE=edge | Informiert Microsoft basierte Geräte darüber, wie HTML dargestellt werden soll |
| CSS-Einbindung | Fügt das CSS aus dem Reiter CSS ein |
| border collapse für Outlook 9+ | Zwingt Outlook 9 und höher, Ränder nicht zu rendern |
Template \<body>
| Wrapper Tabelle | Stellt Bühne in gesamter Breite dar oder legt Hintergrundfarbe fest | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Outlook Tabelle | Erstellt Tabelle, die nur von Outlook und Internet Explorer beachtet wird | ||||||||||||||
Content Tabelle -
Das Template besteht aus frei bearbeitbarem HTML und zwei dynamisch befüllten Komponenten - dem CSS im Header und dem vom Nutzer generierten „layoutBody“. In der Vorlage haben wir versucht, Ihnen die Arbeit für die wichtigsten Grundeinstellungen zu ersparen. In den nachfolgenden Kapiteln, wird erläutert, was definiert wurde. 18.1.1.1 DoctypeDer Doctype ist als \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> vordefiniert. AGNITAS hat heraus gefunden, dass dieser Dokumenten Typ mit unseren Templates die wenigsten Probleme verursacht - Sie können es jedoch beliebig verändern. 18.1.1.2 UnicodeMit dem Parameter \<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> informiert das Layout den Client des Empfängers, dass Unicode-Zeichen gelesen werden sollen. Das erhöht die Wahrscheinlichkeit, dass Ihre im Newsletter verwendeten Sonderzeichen, etwa ä, ö, ü und ß richtig dargestellt werden. 18.1.1.3 TitleMit dem Title Tag, z.B. \<title>A Simple Responsive Email\</title>, wird der Titel in der Browser-Vorschau gesetzt. Auf Ihre E-Mail hat das keinen Einfluss. 18.1.1.4 Viewport\<meta name="viewport" content="width=device-width, initialscale= 1.0"> ist dafür zuständig, den Bildausschnitt auf dem darstellenden Gerät auf die richtige Größe zu skalieren. Das sichert die richtige Darstellung (schmaler Bildausschnitt) auf mobilen Endgeräten. Fehlt dieser Parameter, wird die Mail mit der im Raster definierten Breite dargestellt. Ist diese Breite größer als der Bildschirm des darstellenden Gerätes, wird die Mail mit Scroll-Balken dargestellt. Wir raten deshalb, diesen Parameter nicht zu verändern, wenn Sie einen responsiven Newsletter erstellen wollen.
Abb. 18.1: Anpassung der Bildschirmfläche 18.1.1.5 IE=edgeMit dem Parameter \<!--[if !mso]>\<meta http-equiv="X-UA-Compatible" content="IE=edge" />\<![endif]--> geben wir Microsoft-basierten Systemen die Information, wie sie das HTML darstellen sollen. IE=edge weist den Browser an, den höchsten Kompabilitätsmodus zu verwenden, der vorhanden ist. Die if-Anweisung \<!--[if !mso]>\<![endif]--> stellt sicher, dass sich diese Anweisung nur auf Microsoft Outlook basierte Clients bezieht, um Darstellungsprobleme mit Windows Live Mail vorzubeugen. 18.1.1.6 CSS-EinbindungHier wird das CSS aus dem CSS-Reiter des Layout Builder eingebunden. Der Platzhalter hierfür ist [gridPH name="templateCSS"] - bitte entfernen Sie diesen Platzhalter nicht, da sonst die Eingaben aus dem CSS-Reiter nicht mehr berücksichtigt werden können. Optional können Sie natürlich vor und nach diesem Platzhalter zusätzliches CSS einbinden. Dies könnte bspw. wie folgt aussehen: Ihr eigenes CSS [gridPH name="templateCSS"] Ihr eigenes CSS 18.1.1.7 border collapse für Outlook 9+Der nachfolgende Codeblock zwingt Outlook 9 und neuere Versionen dazu, die Ränder nicht zu rendern. Das minimiert ungewollte Löcher im Layout. table { border-collapse: collapse; } \<![endif]--> 18.1.2 Template \<body>Der Standard body, den wir für Sie in der Vorlage definiert haben, ist die Grundlage für Ihr Responsive-Mailing. Es enthält einige Konzepte, die wichtig für die richtige Darstellung sind. Folgend erklären wir den Aufbau:
Abb. 18.2: Schematische Darstellung des Template Body 18.1.2.1 Wrapper Tabelle\<table class="wrapper"> öffnet die Wrapper-Tabelle. Die Wrapper-Klasse erfüllt 2 Zwecke:
Weiter werden Wrapper verwendet, um einige Grundformatierungen vorzunehmen:
In der Wrapper-Tabelle befinden sich eine \<tr> und \<td>, die \<td> hat ein paar zusätzliche Parameter, je nachdem welche Ausrichtung für das Layout gewünscht ist. Das sieht wie folgt aus: …Für die 3 Ausrichtungen links, mittig und rechts können die Parameter align="left", align="center" und align="right" hinterlegt werden.
Abb. 18.3: Beispielhafte Ausrichtung der Spalten 18.1.2.2 Outlook TabelleHierdurch erstellt der E-Marketing Manager eine Tabelle, die nur von Outlook und Internet Explorer beachtet wird. Sie hat die volle Breite des gewählten Rasters, in diesem Fall z.B. 580px. Wir gehen hier davon aus, dass Outlook und Internet Explorer jeweils von einem Desktop-Bildschirm betrachtet werden. Somit wird der Inhalt in Outlook korrekt über die ganze Breite dargestellt. Der Code-Block kann wie folgt aussehen: […] \<![endif]-->
Abb. 18.4: Outlook Tabelle mit voller Bereite 18.1.2.3 Content TabelleDie Content-Tabelle \<table class="content"> ist der letzte Container vor den eigentlichen, vom Layout Builder erstellten, Grid-Containern. Sie legt nochmals die Ausrichtung fest (vgl. Ausrichtung). In der Klasse .content werden folgende CSS-Anweisungen hinterlegt:
Abb. 18.5: Template-Breite in unterschiedlichen Bildschirmgrößen 18.1.2.4 ZeilenIm Layout Builder sowie später im E-Mail Creator wird der Inhalt in Zeilen und Spalten organisiert. Während die Anzahl der Spalten am Anfang durch das verwendete Raster festgelegt wird und im Mailing nachträglich nicht mehr beeinflusst werden kann, können Zeilen zu jeder Zeit zum Inhalt hinzugefügt werden.
Abb. 18.6: Zeile hinzufügen Wird im Layout Builder oder im E-Mail Creator eine neue Zeile hinzugefügt, wird im Mailing später automatisch folgender Code generiert: \<!-- für jede Zeile START --> \<![endif]--> … (Spalten und Blöcke) \<![endif]-->\<!-- für jede Zeile ENDE -->
Abb. 18.7: Zeile innerhalb der Content Tabelle Das heißt, für jede Zeile wird eine neue \<tr> und ein neues \<td> Element in der Content Tabelle generiert. Für die Klasse .grid-columns sind folgende Attribute hinterlegt: .grid-columns { Im Detail: text-align: center; wird verwendet, damit die Container, wenn sie auf kleineren Bildschirmen untereinander angezeigt werden, zentriert angezeigt werden. Bei anderen Ausrichtungen überschreiben wir dieses Attribut wie folgt: .left .grid-columns {
Abb. 18.8: Ausrichtung Container im Template font-size: 0px und line-height: 0px werden verwendet, um Abstände zwischen den später folgenden Zeilen und Spalten zu entfernen. Sie werden bei den Columns bzw. Spalten sehen, dass wir ein inline-block Element verwenden. Inline-Elemente werden wie Text behandelt. Folgen mehrere Inline-Elemente aufeinander, so haben sie wie Buchstaben etwas (ungewünschten) Platz zwischen den Elementen. Stellt man die Schriftgröße und den Zeilenabstand auf 0px, so kann man diesen Platz entfernen. Bitte beachten Sie: Das ist auch der Grund, warum Sie Schriftgröße und Zeilenabstand manuell justieren sollten. Der EMM korrigiert dieses Verhalten zwar später in der Klasse .inner und erhöht es wieder auf font-size: 12px und line-height: 14px allerdings gehen leider die vom Browser gesetzten Schriftgrößen verloren. 18.1.2.5 Columns / SpaltenSpalten werden in einer Zeile nebeneinander dargestellt. Reicht die Breite des Bildschirms nicht für die ganzheitliche Darstellung aller Spalten, so werden sie umgebrochen und untereinander dargestellt. Die Anzahl der Spalten wird im Layout Builder über die Auswahl des zugrundeliegenden Rasters bestimmt. Das Raster wird bei der Neuanlage eines Layouts ausgewählt und kann nachträglich nicht mehr geändert werden.
Abb. 18.9: Schematische Darstellung der Spalten Der Code für Spalten sieht wie folgt aus: \<!-- für jede Zelle BEGINN --> \<div class="column" style="max-width: 580px"> [Baustein des Nutzers] \</div>\<![endif]--> \<!-- für jede Zelle ENDE --> 18.1.2.5.1 Outlook WrapperFür Outlook wird eine zusätzliche Tabelle und \<tr>\<td> generiert, in der die berechnete Breite hinterlegt ist. Wir berechnen die Breite (im Code angegeben mit: 580px) anhand der Spalten in einer Reihe und der maximalen Breite, die im Raster angegeben wurde. Die meisten anderen Clients und Browser interpretieren das \<div class="column"> mit einer max-width, die genauso berechnet wird wie die maximale Breite in der Outlook Zelle, also Rasterbreite geteilt durch Anzahl Spalten in der Zeile. 18.1.2.5.2 Die Spaltewidth: 100% sorgt dafür, dass die Spalte die maximal vorhandene Breite einnimmt. Die maximale Breite wird inline gesetzt. Der Code-Block hierfür, sieht wie folgt aus: .grid-columns .column{
Abb. 18.10: Mögliche Darstellungsvarianten bei Spaltenbreite width: 100% display: inline-block wandelt das \<div> in ein Inline-Block Element um. Das hat folgende Auswirkungen: Die Container werden, sofern genug Platz auf dem Bildschirm vorhanden ist, nebeneinander dargestellt. Ist zu wenig Platz vorhanden, brechen sie (genauso wie Text) in eine neue Zeile um.
Abb. 18.11: Padding der Spalten Das Padding, also der Abstand der Spalten nach links und rechts werden inline auf das Element .inner geschrieben und entsprechen dem im Raster angegebenen Spaltenabstand.
Abb. 18.12: Beispiel-Raster mit zwei Spalten 18.1.2.5.3 Ausrichtung der SpaltenJe nachdem welcher text-align vererbt wird (unser Standard ist text-align: left) sind die Elemente links, zentriert oder rechts ausgerichtet, wenn sie umbrechen.
Abb. 18.13: Ausrichtung nach Umbruch vertical-align: top stellt sicher, dass die Container an ihrer Oberkante ausgerichtet werden (und nicht zentriert, wie es in manchen Browsern/Clients der Standard ist). 18.1.2.5.4 Innerer Inhalt und BausteinDer eigentliche Inhalt des Bausteins (im Code als [Baustein] angegeben) hat zwei Formatierungen, die nicht direkt ersichtlich sind. Um den Baustein herum wird eine Tabelle mit der Klasse .inner erstellt. Diese enthält folgende Formatierungen: .inner { Wie zuvor erwähnt, werden hier Schriftgröße und Zeilenabstand wieder hergestellt (nachdem dieser zuvor bei .grid-columns entfernt wurde).
Abb. 18.14: Im Reiter Style anpassbare Parameter Der Baustein hat einige Attribute, die der Klasse .div-container zugewiesen werden und im Style-Reiter des Layout Builder Mailings verändert werden können. |
