Hinweise zur Programmierung eigener Vorlagen

In diesem Artikel listen wir verschiedene Hinweise zur Templateprogrammierung auf. 
Sie brauchen diese nur wenn Sie eine komplett eigene Vorlage 

1. Die Breite der E-Mail sollte sich zwischen 600 und 700 Pixel befinden. Die CleverReach-Vorlagen sind für die Breite 600 Pixel optimal ausgelegt.
2. Gestalten Sie die E-Mail so, dass diese auch ohne Bilder gelesen werden kann, falls die Bilder von den E-Mail-Clients geblockt bzw. nicht heruntergeladen werden sollten.
3. Geben Sie allen Bildern eine feste Breite (WIDTH) und Höhe (HEIGHT).
4. Verwenden Sie keine Hintergrundgrafiken. Einige E-Mail-Clients (wie z. B. Outlook 2007) haben Probleme mit dem Anzeigen dieser Grafiken.

Technische Hinweise

1. Verwenden Sie keine Div-Layer, sondern Tabellen (CleverReach- und Drag & Drop-Vorlagen ausgenommen). Auf keinen Fall sollten Sie absolut positionierte Div-Layer verwenden.
2. Wenn CSS-Styles verwendet werden, dann sollten diese möglichst inline gehalten werden. Outlook 2007 und 2010 beispielsweise können nur begrenzt CSS-Styles interpretieren, die im Head deklariert werden. Grundsätzlich sollte aber weitestgehend auf CSS-Styles verzichtet werden, besonders Klassen- und ID-Selektoren (CleverReach-Vorlagen ausgenommen). Auf keinen Fall sollten externe CSS-Dateien eingebunden werden.
3. Breitenangaben einer Tabelle (WIDTH) müssen im 'TD' stehen und nicht in Table. Zusätzlich sollten Sie die Breitenangaben direkt im TD-Attribut definieren, nicht als CSS-Style.
4. Vermeiden Sie die Nutzung von rowspan innerhalb von Tabellen, arbeiten Sie hierbei mit verschachtelten Tabellen.
5. Platzieren Sie Bilder möglichst nicht mit float. Besonders Inline-Styles mit float werden z. B. von Outlook 2007 und 2010 komplett ignoriert.
6. Verwenden Sie den Inline-Style display:block, wenn Sie in Ihren Templates Bilder aneinanderreihen möchten (somit werden fehlerhafte Leerstellen im Layout verhindert).
7. Nutzen Sie zur Höhenangabe keine %-Angaben, besonders nicht bei Bildern (responsive Vorlagen ausgenommen).
8. Halten Sie Linkbezeichnungen kurz, da sich sonst die Breite der Tabelle / Zelle der Linkbezeichnung automatisch anpasst.
9. Verwenden Sie unter keinen Umständen Konvertierungsprogramme, welche aus Grafik-Dateien HTML-Dokumente erstellen. Der generierte HTML-Code wird bei vielen E-Mail-Clients Layoutprobleme verursachen.
10. Verwendete Dateinamen von Bildern sollten eine einfache Bezeichnung haben. Namen wie "bild_1900_x_1600.jpg" können bei einigen E-Mail-Programmen fehlerhaft oder gar nicht dargestellt werden. Auch sollten Sie hier auf Leerzeichen verzichten und die Bilderbezeichnungen ausschließlich mit Klein-Buchstaben versehen (z. B. logo.jpg).
11. Hinterlegen Sie in der Vorlage keinen <title> Tag. Dieser wird durch das System automatisch beim Versand durch den Betreff gesetzt.
12. Verzichten Sie auf die Nutzung von animierten Grafiken (z. B. Roll-Over-Funktion oder animierte Gif-Dateien). Outlook z. B. unterstützt diese Funktion generell nicht.