Die Tücken bei der Werbemittel Programmierung

Leider bedeutet die richtige Darstellung der Werbemittel im Browser nicht, dass dies auch in den verschiedenen Webmailern der Fall ist. Wir helfen weiter!

<div>-Tags

Wird ein Werbemittel mit <div>-Tags programmiert, so wird es im Browser vermutlich keine Anzeichen auf Probleme geben. Schickt man sich das Mailing aber aus dem Versandsystem und schaut es sich beispielsweise in Outlook an, wird man eine böse Überraschung erleben. Grund dafür ist, dass Outlook leider nicht viel von Mailings hält, die nur aus <div>s aufgebaut sind. Hier wird man schnell erkennen, dass zum Beispiel die Breiten der verschiedenen Elemente nicht richtig angezeigt werden. Deshalb ist es beim Erstellen von E-Mail-Templates besonders wichtig, auf eine saubere Tabellenstruktur zu achten, denn nur so kann auch garantiert werden, dass die Darstellung in allen Webmailern passt. Kann und möchte man nicht auf <div>s verzichten, so sollte man denn noch mit einer klar definierten Tabellenstruktur arbeiten und dort an den gewünschten Stellen die <div>-Tags platzieren. So kann trotz dessen mit der richtigen Darstellung in den Webmailern gerechnet werden.

margin und padding

Auch das Definieren von padding und margin innerhalb der <style>-Tags erzielt nicht bei allen Webmailern den gewünschten Erfolg. Leider gibt es auch hier Mailer, die diese Angaben ignorieren, was dazu führt, dass der Abstand zwischen Bild und Text nicht passt oder der Text einen Abstand zum Rand hat, sondern an dem Element/Rand „klebt“. Um dies zu vermeiden, sollte man auch hier lieber mit Tabellen arbeiten. Gerade bei der Darstellung von Buttons, die nicht als Bild in Werbemittel eingebaut werden ist das wichtig, damit nicht nur der Text mit einer Hintergrundfarbe hinterlegt ist, sondern auch die gewünschten Abstände um den Text. Hier kann man eine Tabelle mit drei Zeilen und Spalten anlegen, denen die gewünschten Werte übergeben werden.

Hintergrundbilder

Eines der bekanntesten Probleme ist wohl die Hintergrundbildproblematik. Hier hört man immer wieder, dass die Darstellung in Outlook und t-online nicht möglich ist. Dies ist mittlerweile aber nicht mehr so. Mit Hilfe von VML lassen sich im HTML-Code auch Hintergrundbilder definieren, um eine Darstellung in den genannten Mailern zu garantieren. Wer sich hier unsicher ist, wie genau die Hintergrundbilder via VML eingebunden werden, findet im Internet zahlreiche Tools, die einem den Code erstellen, der ins HTML eingebaut werden muss.

Beispiel für ein Hintergrundbild, das über das komplette Mailing dargestellt werden soll:

Direkt nach dem <body>-Tag muss folgender Code implementiert werden

<!–[if gte mso 9]>

<v:background xmlns:v=“urn:schemas-microsoft-com:vml“ fill=“t“>

<v:fill type=“tile“ src=“BILD“ color=“#Farbe“/>

</v:background>

<![endif]–>

<tr>

Bevor der </body>-Tag geschlossen wird

</td>

</tr>

</table>

</div>

Möchte man den Hintergrund aber nur innerhalb seines Mailings oder einer bestimmten Zelle haben, sollte wie folgt vorgehen:

Mit dem <td>-Tag wird folgender Code implementiert

<!–[if gte mso 9]>

<v:rect xmlns:v=“urn:schemas-microsoft-com:vml“ fill=“true“ stroke=“false“ style=“width:Bildbreite px;height:Bildhöhe px;“>

<v:fill type=“tile“ src=“BILD“ color=“#Farbe“ />

<v:textbox inset=“0,0,0,0″>

<![endif]–>

<div>

Beim Schließen des </td>-Tags folgender Code

</div>

<!–[if gte mso 9]>

</v:textbox>

</v:rect>

<![endif]–>

</td>

Verschachtelte Tabellen – ja oder nein?

Bei einem sauber programmierten Template sind verschachtelte Tabellen kein Problem und sogar von Vorteil, damit die Tabellen / einzelnen Elemente wissen wo ihr Platz ist. Ohne die Verschachtelung kann es sein, dass Tabellen einfach dort angezeigt werden, wo Platz ist.

Bei responsiven Werbemitteln gibt es hier zu beachten, dass Tabellen, die sich in der mobilen Version untereinander schieben sollen, nicht verschachtelt werden sollten, da die einzelnen Tabellen sonst in Spalten sind und dies nicht möglich ist. Da aber auch gerade Outlook Probleme macht und die Tabellen gerne nicht untereinander anzeigt, gibt es hier ein Hilfsmittel, nämlich Conditional Comments.

Diese bewirken, dass die Tabellen trotz dessen verschachtelt werden können und diese Tags aber nur von Outlook beachtet werden. Somit sind die Tabellen für die anderen Mailer nicht verschachtelt und der mobilen Version steht nichts mehr im Wege.

Mehr zu diesem Thema