Suche

Hinweise zur Programmierung eigener Vorlagen

In diesem Artikel listen wir verschiedene Hinweise zur Templateprogrammierung auf. 
Sie brauchen diese nur, wenn Sie selbst eine komplett eigene Vorlage programmieren möchten. 

Allgemeine Hinweise

  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.