Studie: Der ideale Zeitpunkt für den Newsletter Versand! Jetzt Ergebnisse herunterladen >

Handbuch zur E-Mail-Template-Erstellung

Mobile Vorlagen erstellen

Unterstütze Geräte

Hier finden Sie die Liste der Geräte die die Mobile Darstellung unterstützen

Unterstütze Geräte

Besonderheiten

Newsletter sollten mit Prozentangaben aufgebaut werden, da es beim Newsletter somit einfacher ist, diesen mobil zu optimieren. Die Einzige fixe Breite ist die der Haupttabelle, damit der Newsletter nicht über eine Maximalbreite hinausragt.
Rahmen sollen mittels CSS und Inline definiert werden. Es muss Inline definiert werden, da es sonst im GMail nicht angezeigt wird. Der einzige E-Mail Client, der diese Technik nicht unterstützt ist der Lotus Notes.
Schriftgrößen die im Editor definiert wurden, können nicht oder nur schwer überschrieben werden.
Tabellen die im Editor definiert werden, benötigen Breitenangaben in Prozent, damit sie bei den mobilen Geräten optimal dargestellt werden.
Bilder die nicht in ein dafür vorgesehenes Bildfeld sondern in das Editorfeld eingefügt werden, können Fehler in der mobilen Darstellung auslösen.

Vorgehensweise

Es empfiehlt sich bei der Umsetzung eine Kampagne zu erstellen, welche keine wiederholbaren Abschnitte besitzt. Da es bei den Umbauten einfacher ist. Die Abschnitte sollten erst eingefügt werden, wenn die Vorlage selbst bereits mobiloptimiert ist.

Die Breite des Newsletters als ersten Breakpoint definieren.

Bei diesem Breakpoint die Breiten des Newsletters auflösen. z.B.:

@media only screen and (max-width: 620px) {
    [class*=mainTable] {
    	width: 100% !important;
    }
}

Bilder und Spacer skalierbar machen. Spacer dürfen sich nur in eine Richtung skalieren, nicht in beide wie Bilder, da es ansonsten zu Fehldarstellungen kommen kann.

[class*=stretchImg] {
    	width: 100% !important;
	height: auto !important;
}
[class*=stretchWidth] {
    	width: 100% !important;
}
[class*=stretchHeight] {
    	height: 100% !important;
}

zurück