Automatisierung
Empfänger
Formulare
Landingpages
Statistik
Hinweise zur Erstellung Ihrer Razor Vorlage
Hier finden Sie Antworten und Lösungswege auf die häufigsten Fragen und Problemstellungen beim Umsetzen einer Vorlage.
Tabellen
Attribute
Tabellen sollen immer folgende Attribute enthalten, um unerwartetes Verhalten in den Clients zu unterbinden.
<table width="..." cellspacing="0" cellpadding="0" border="0">
...
</table>Breiten
Breiten der Tabellen, Zellen und Bilder müssen immer mittels HTML Attribut und nicht mittels CSS Eigenschaft gesetzt werden, da CSS nicht ausreichend unterstützt wird.
<table width="100%">
<tr>
<td width="50%"> ... </td>
</tr>
</table>Outlook
Das Layout muss beim Versenden in einzelne Tabellen unterteilt werden, da Outlook die Word Engine verwendet und einzelne Elemente (Tags) nicht höher sein dürfen als 2000 Pixel. Es wird empfohlen, die einzelnen Abschnitte als eigene Tabelle sowie Einleitung und Abschluss als eigene Tabellen zu erstellen, die wiederum nicht in einer Tabelle gekapselt werden dürfen.
Leerräume
Leerräume („Spacer“) sollen nicht mittels Bildern in Zellen erstellt oder mittels Padding erzeugt werden, sondern über eine Zelle, die ein „nichtbrechendes Leerzeichen“( ) enthält. Die Zelle benötigt darüber hinaus noch folgendes Style-Attribut, damit die Höhe und Breite des Spacers über die HTML Attribute width und height gesetzt werden kann.
Die Höhe von 10 Pixel für den Spacer kann nicht unterschritten werden, da er in Outlook ignoriert würde und von vielen Spam-Filtern als versteckter Text gewertet wird, was zu einer erhöhten Spam-Wahrscheinlichkeit führt.
<td height="20" width="20" style="font-size: 10px; line-height: 10px"> </td>
Bilder
Allgemein
Bilder sollten nur über ein Elternelement beeinflusst werden, damit die Handhabung des Quelltextes und der Konfiguration der Vorlage in mailworx einfacher gestaltet ist.
Verlinkungen
Alle Bilder benötigen das Attribut border="0", da es im Internet Explorer oder in Outlook bei einer Verlinkung ansonsten zu einem Rahmen um das Bild führt.
Zusätzlich kann im Style-Tag auch folgender Selektor eingebunden werden:
img {
border: 0 !important;
}Skalieren
Wenn Bilder in der mobilen Ansicht proportional skaliert werden sollen, müssen ihnen folgende Eigenschaften gegeben werden: max-width: 100%; height: auto !important;
Das Zurücksetzen der Höhe ist erforderlich, damit sich die Bilder an die Breite des Elternelements anpassen, dies kann ebenfalls umgedreht und zur Anpassung an die Höhe verwendet werden mittels: max-height: 100%; width: auto !important; dies ist allerdings nicht üblich.
/* Proportionales Skalieren eines Bildes */
[class*=scale] img {
max-width: 100%;
height: auto !important;
}Für Bilder, die einen Schatten nach unten in der Vorlage enthalten, ist es in der mobilen Ansicht erforderlich, dass sie folgende Eigenschaften erhalten, damit sie nicht proportional, sondern verzerrt dargestellt werden: width: 100% !important;
/* Verzerren eines Bildes, um die Höhe zu erhalten */
[class*=skew] img {
width: 100%;
}Mobil-Optimierung
Ausblenden
In der mobilen Ansicht können Inhalte ausgeblendet werden, dies geschieht mittels eines Media Queries und der CSS Eigenschaft display: none;
In der Desktop-Ansicht ist dies nicht möglich, da viele Clients dies aus Sicherheitsgründen nicht erlauben.
Zweispaltiges Layout
Wenn zwei Spalten in der mobilen Ansicht untereinander dargestellt werden sollen, ist es nicht möglich, die enthaltenen Inhalte über die 2 Spalten hinweg auf gleiche Höhe zu setzen, wenn ein Element mehr Inhalt als das andere enthält.
Beispiel:
|
|
Zelle 1 und Zelle 3 können nicht automatisch auf gleiche Höhe gebracht werden, wenn die mobile Darstellung wie folgt aussehen muss:
|
||
|
Tabellen auflösen
Um die Spalten einer Tabelle untereinander darzustellen (diese zu brechen), soll dieser Code in einem Media Query verwendet werden.
Dies verhindert, dass Kind-Tabellen ebenfalls gebrochen und somit aufgelöst werden.
[class*=break] > tbody, [class*=break] > tbody > tr, [class*=break] > tbody > tr > td,
[class*=break] > tr, [class*=break] > tr > td {
float: left;
width: 100% !important;
}Breiten in Pixel vermeiden
Breiten in Pixel sollten sehr sparsam und mit Bedacht eingesetzt werden, da diese bei einer Mobil-Optimierung der Vorlage dies nur unnötig verkomplizieren.
Die wesentlich stabilere Variante ist, nur der Haupttabelle eine fixe Breite zu geben, dies ist erforderlich, damit der Newsletter in der Desktop-Ansicht optimal dargestellt wird. Für mobile Geräte kann mittels Media Query die Breite auf 100% überschrieben werden.
Für alle anderen Breiten im Newsletter sollen auch für die Desktop-Variante nur mehr Prozentwerte verwendet werden, da der Newsletter bei Auflösen der Breite der Haupttabellen automatisch angepasst wird, wenn der Inhalt dies erlaubt.
Mindestgröße Schaltfläche
Klickbare Inhalte sollen für die mobile Ansicht eine Mindestgröße von 40×40 Pixel aufweisen, damit diese mit den Händen einfach und bequem benutzt werden können.
Beispiel: