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:

• HTML in E-Mails - Mit Outlook 2007 in die Steinzeit - Bericht erschienen auf golem.de
• A Guide to CSS Support in Email: 2007 Edition - Eine Studie zur CSS-Unterstützung der verschiedenen Email Clients (englisch)
• A Guide to CSS Support in Email (Chart PDF) - PDF Chart (2 Seiten) mit einer Übersicht welche CSS Eigenschaften von welchen Clients unterstützt werden.
• Detaillierte Informationen zum <font> Tag sowie zu den CSS-Entsprechungen finden Sie unter http://de.selfhtml.org/html/text/schrift.htm. SELFHTML ist übrigens eine sehr gute Quelle, mit Dokumentation und vielen nützlichen Tipps, wenn es um HTML und CSS geht.

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.