Email Signaturen mit Tabellen-Layout: Formatierungsprobleme umgehen

Vor einigen Jahren noch, hat man bei der Positionierung von Elementen auf Websites meist ein Tabellen-Layout verwendet. Heute jedoch, formatiert und positioniert man Elemente mithilfe von CSS (Cascading Stylesheets). Das hat den Vorteil, dass der erstellte Code wesentlich schlanker und Barrierefrei(er) ist. Leider ist diese Entwicklung noch nicht wirklich bei den Emails und den Signaturen angekommen. Wir haben in letzter Zeit festgestellt, dass es in Zusammenhang mit Tabellenlayouts häufig zu Formatierungsproblemen kommt. So wird die Schrift z.B. fehlerhaft dargestellt oder die Formatierung (andere Schrift, Schriftgröße, …) wird gar nicht erst übernommen.

Wie bei vielen Webseiten werden auch bei Email Signaturen, Tabellen gerne verwendet um Elemente (Grafiken oder Text) zu positionieren. Wir stellen fest, dass es dabei häufig zu Problemen bei der Formatierung der Schrift kommt. So wird die Schrift z.B. fehlerhaft dargestellt oder die Formatierung (andere Schrift, Schriftgröße, …) wird gar nicht erst übernommen. Das macht sich meist erst bemerkbar nachdem man die, mit einem HTML Editor erstellte, Signaturvorlage in Outlook kopiert bzw. verwendet.

Umstellung auf Outlook 2007 verstärkt Formatierungsprobleme

Verstärkt hat sich das Problem zusätzlich durch die Umstellung auf Outlook 2007. Denn, seit Outlook 2007 ist man gezwungen Tabellen für zweispaltige Layouts zu verwenden. Grund dafür ist, dass seit Outlook 2007 Microsoft Word von Outlook als einziger Editor zum Schreiben und Anzeigen von Emails verwendet wird. Bei den früheren Versionen von Outlook (2000 / XP / 2003) war es noch möglich das in Outlook unter "Extras > Optionen > E-Mail-Format" einzustellen (siehe Screenshot).

Anstatt den neuen Internet Explorer 7, bei dem die Darstellung von Cascading Stylesheets (CSS) deutlich verbessert wurde zu verwenden, verliert Outlook 2007 durch die Umstellung auf Word 2007 einen Großteil dieser Funktionalität. So wird beispielsweise das Attribut "align", welches zur Erstellung mehrspaltiger Layouts benötigt wird, nicht mehr unterstützt. Deshalb muss man nun auf Tabellen zurückgreifen. Hinzu kommt, dass Word 2007 Formatierungen mittels dem Tag innerhalb von Tabellen nicht interpretiert - hier muss man das Tag in Verbindung mit dem "style" Attribut verwenden. Nachdem allerdings viele HTML Editoren das Tag zur Formatierung der Schrift verwenden, kommt es hier zu Problemen. Die Fehler werden meist erst dann ersichtlich, wenn man den mit einem HTML Editor erstellten Code in Outlook verwendet. Was vorher optisch ansprechend war (hoffentlich ;)) sieht nach dem Kopieren plötzlich zum davonlaufen aus.

Das nachfolgende kleine Beispiel soll das Ganze verdeutlichen. Es handelt sich um eine Tabelle mit 2 Spalten und einem Beispieltext. Die Schriftart soll Arial, 12px, Farbe: #dddddd (hellgrau) sein.

Die meisten Editoren erzeugen dafür folgenden Code:

<table>
  <tr>
    <td>
      <font face="arial" size="12px" color="#dddddd">
        Beispieltext 1
      </font>
    </td>
    <td>
      <img src=http://www.irgendeineurl.de/img.jpg /><br />
      <font face="arial" size="12px" color="#dddddd">
        Beispieltext 2
      </font>
    </td>
  </tr>
</table>

Die rot markierten Tags werden von Microsoft Word nicht interpretiert. Stattdessen muss das <span> Tag in Verbindung mit dem "style" Attribut verwendet werden. Der Code sieht dann wie folgt aus.

<table>
  <tr>
    <td>
      <span style="font-family:arial; font-size:12px; color:#dddddd;">
        Beispieltext 1
      </span>
    </td>
    <td>
      <img src=http://www.irgendeineurl.de/img.jpg /><br />
      <span style="font-family:arial; font-size:12px; color:#dddddd;">
        Beispieltext 2
      </span>
    </td>
  </tr>
</table>

Mit dieser Änderung wird die Signatur auch in Outlook 2007 immer korrekt angezeigt.

Hier noch einige weiterführenden Informationen zum Thema:

Für Kunden die unseren in CI-Sign integrierten HTML-Editor verwenden, haben wir unter Support > FAQ eine Beschreibung hinzugefügt, die zeigt wie Sie das Problem mit unserem Editor umgehen können.

Kategorie: 

Neuen Kommentar schreiben

Das könnte Sie auch interessieren

Fehlende Grafik in E-Mail Signatur unter Outlook 2016

Anstelle von Grafiken in der E-Mail Signatur (z.B. Logos, Banner, ...), zeigt Outlook dem Anwender nur noch einen grauen Platzhalter an. CI-Sign ab Version 6.0.9 behebt dieses Outlook Problem. Mit einem Update für Office bzw. Outlook 2016, zeigt Outlook dem Anwender beim...

Vor- und Nachteile der Client- und Serverbasierter E-Mail Signatur und Marketing.

Dieser Artikel soll Ihnen die Unterschiede der verschiedenen Arten von Signaturen aufzeigen. Dies ist unabhängig von der eingesetzten Software oder Hersteller. Ebenso zeigen wir eine Kombination der Produkte CI-Sign und CI-Mail-Policy auf mit der Sie ein Maximum an Vorteilen...

E-Mail Signaturen für Alle. Mit CI-Sign jetzt auch CI-Mail-Policy nutzen.

E-Mail Signaturen für alle Geräte & Devices. Mit einer gültigen CI-Sign Lizenz können Sie jetzt auch CI-Mail-Policy nutzen. CI-Sign ist ein Multitalent - für jede Anforderung gibt es eine Lösung. Das ist bekannt. Jetzt setzen wir noch eins...