Was ist zu beachten?

Hier finden Sie auf die häufigsten Fragen und Problemstellungen beim Umsetzen einer Vorlage Antworten und Lösungswege.

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 wiederrum 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"(&nbsp;) 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">&nbsp;</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 diese Bilder die folgenden 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
Zelle 2
Zelle 3
Zelle 4

Zelle 1 und Zelle 3 können nicht automatisch auf gleiche Höhe gebracht werden, wenn die mobile Darstellung wie folgt aussehen muss:

Zelle 1
Zelle 2
Zelle 3
Zelle 4
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ächen

Klickbare Inhalte sollen für die mobile Ansicht eine Mindestgröße von 40 x 40 Pixel aufweisen, damit diese mit den Händen einfach und bequem benutzt werden können.

Beispiel:

  Mobile Newsletter Templates »  

 

Haben Sie noch Fragen?

Kontaktieren Sie uns