Autor: Thomas Fellinger

HTML Emails - Richtlinien

zur Hauptseite
Inhaltsverzeichnis

Einleitung

Bei der Erstellung von HTML-Emails gilt es einiges zu beachten. Wir müssen auf die Anzeigebreite von Webmail-Anbietern zu achten, wollen sämtliche Mail-Clients unterstützen und sollen die Vorgaben: Maximal 40KB und nicht mehr als 10 Bilder einhalten.

Um das zu erreichen gibt es einige Richtlinien, die dabei helfen Mail-Client-, Browser- und Webmail- Konsistente HTML-Emails zu Designen und zu Erstellen.

zum Seitenanfang

Vorgaben

Daher dürfen die Layouts nicht zu aufwendig sein, sollen aber natürlich trotzdem ansprechend sein und uns viele Kunden bescheren. In diesem Artikel geht es darum, genau das zu erreichen.

Maximal 40KB Email Größe

Ganz klar: Auch wenn die Breitband-Verbindungen immer mehr werden, gibt es gleichzeitig auch wieder viele Internet Anschlüsse mit Mobilen Geräten, die vor allem im ländlichen Bereich nur mit GPRS Empfang surfen, der nur maximale Datenübertragungsraten von 64kb/s bieten kann, außerdem haben Auswertungen ergeben, das bis zu 30% der Internet-Nutzer nur maximale Übertragungsraten von 200kb/s haben.

Nicht mehr als 10 Bilder

In dieselbe Kerbe schlägt diese Vorgabe. Jedes zu übertragende Bild verursacht einen http-request. Wir können sie umgehen, in dem wir die Bilder eingebettet mit der Email übertragen. Jedoch erweitert sich dadurch der Quelltext der Email um ein vielfaches.

zum Seitenanfang

Design

Beim Designen fängt das Sparen bereits an :-). Es gibt gute Tricks, die die spätere Dateigröße der Slices sehr stark beeinflussen können. Was gilt es nun beim Design genau zu beachten?

zum Seitenanfang

Format

Die Breite des Inhalts sollte zwischen 560 Pixel und 580 Pixel liegen. Wenn es zum Design passt, kann es auch schmäler sein, breiter jedoch in keinem Fall, da die Anzeigebereiche der diversen Webmail-Anbieter nicht über 580 Pixel hinausgehen (Ausnahme: web.de).

Der Mailbody soll klar strukturiert sein, damit nicht unnötige Tabellenreihen und Tabellenspalten erstellt werden müssen, was viel Code und damit KB spart.

Beispiel:

Layoutbeispiel1

Bitte nicht falsch verstehen. Keine Email muss exakt so aussehen, und es können ruhig mehr Spalten, Zellen und auch Ecken drinnen sein Aber: Immer mit Maß und Ziel.

Grund:

Dadurch das wir beim erstellen von HTML-Emails nur sehr limitiert arbeiten können und bei allem auf Tabellen-Layouts zurück greifen müssen, erzeugen viele Tabellen auch viel Code, der sich leider schon merklich auf die Dateigröße der Email niederschlägt.

Und: Ist bereits das Email selbst groß, bleibt um so weniger Möglichkeit für qualitativ gute Bilder, die man mitschicken kann.

weitere Beispiele

zum Seitenanfang

Dateigröße

Um die spätere Dateigröße klein zu halten gibt es noch weitere Dinge zu beachten:

Texte nur auf einfarbigem Hintergrund

Jeder Text, der nicht auf ein Bild muss kann über HTML niedergeschrieben werden. Wir können aufgrund einiger Einschränkungen keine Hintergrund-Bilder verwenden. Gleichzeitig verursacht Text in Slices beim Komprimieren die meisten unschönen Effekte und gleichzeitig ist er einer der Hauptgründe warum ein Slice trotz aller Komprimierung immer noch eine beachtliche Größe hat. Logos sind davon ausgenommen, sollten aber nicht zu groß sein.

Keine großen Buttons

Schöne Buttons sind immer ansprechend. In groß natürlich noch mehr. Aber wieder tritt das Problem mit der Komprimierung der Schrift auf. Wenn es ein großer Button sein soll kann man versuchen an den Seiten des Buttontextes das zu erreichen was einen Button ausmacht.

Beispiele:
Großer Button

Dateigröße: 5KB
Photoshop Slice Qualität: 10

Großer Button2

Dateigröße: 12KB
Photoshop Slice Qualität: 60

Bei 40KB Gesamtgröße der Email sind wir hier also sehr schnell am Limit haben aber keinen schönen Button weil die Schrift unschön verzerrt wird. Außerdem kommen ja noch diverse Content-Vorschaubilder hinzu, und wenigstens die sollten ja ansprechend aussehen.

Andere Optionen nutzen

Großer Button3

Dateigröße: 5KB
Photoshop Slice Qualität: 70

Bei diesem Button ist die Dateigröße trotz besserer Slicequalität geringer, weil es einen einfarbigen Hintergrund gibt. Man kann sogar versuchen nur die Schnörksel an den Seiten bei mehreren Texten in HTML zu verwenden und so wieder zu verwenden.

Header Höhe

Schöne große Header gefallen. Jedoch sind die Headergrafiken oft die größten Dateien in der HTML-Email überhaupt. Daher ist es wichtig darauf zu achten, das auch im Header ein Teil der Überschrift in HTML gemacht werden kann. Was auch reduzierend hinzukommt ist die Höhe des Headers. Wenn der Header mehr als 300Pixel hoch ist, und dabei noch jede Menge Schrift enthält ist es kaum machbar ihn auf unter 20KB zu Slicen.

Beispiele:
Großer Header

Dateigröße: 17KB
Photoshop Slice Qualität: 0

In diesem Header sieht unser Teaser Girl leider nicht mehr wirklich gut aus und alle Texte haben schlimme Ausfransungen.

Großer Header

Dateigröße: 42KB
Photoshop Slice Qualität: 50

Wenn das Headerbild in ausreichender Qualität gesliced wird hat es mindestens 40KB Dateigröße. Eindeutig zu viel und trotzdem kann man hier im Schriftzug "Amateurseite" und in der Roten Leiste oben noch deutliche Artefakte erkennen.

Andere Optionen nutzen

Kleiner Header

Header Logo
Dateigröße: 4KB
Photoshop Slice Qualität: ~70

Hier wurde im Header nur das Logo verwendet, der Rest ist Text. Ein Teaser Girl kann an anderer Stelle positioniert werden wie zum Beispiel an der Seite oder auch in Verbindung mit dem Header, unterhalb des Logos. Jedenfalls so, das eine Seite zum Texten frei bleibt.

Fotos

Vorschaubilder sind wichtige Werbemittel um Kundeninteresse zu erwecken. Zum Glück kann man Fotos schön herunter komprimieren bei relativ guter Qualität. Wenn also ein großes Bild vorhanden sein soll, kann man aus Fotos am meisten herausholen. Auch hier sollte dann aber kein Text eingeblendet werden.

zum Seitenanfang

Umsetzung

Bei der Umsetzung von HTML-Emails kommt hauptsächlich HTML zum Einsatz. CSS lässt sich nur in sehr eingeschränktem Ausmaß nutzen.

zum Seitenanfang

Grundlagen

Erinnern wir uns am besten an früher ca. Mitte der 1990er, als Tabellen-Layouts die Regel waren. Genau hier beginnen wir, unsere Email zu schreiben. Das hat mehrere Gründe:

Microsoft Outlook 2007

Outlook 2007 hat (scheinbar beabsichtigt) einen deutlichen Rückschritt in Bezug auf CSS Support im Gegensatz zu seinen Vorgängerversionen gemacht. Vieles, was modernes semantisches HTML/CSS ausmacht, wie zum Beispiel:

Somit gibt es kein modernes Box-Model mehr und Hintergrundbilder ebenfalls nicht.

CSS Shorthand

CSS Shorthands werden von Outlook 2007 und den meisten Webmail-Anbietern nicht interpretiert. Will man margin:5px 0 10px 3px; haben, muss man margin-top:5px;margin-bottom:10px;margin-left:3px; schreiben

Auch andere Shorthands wie font: oder background: werden kaum unterstützt.

CSS Classes/Stylesheets

Ebensowenig Sinn macht es, mit Stylesheets und CSS Classes zu arbeiten. Diverse Webmail-Anbieter filtern diese und ergänzen oder entfernen Buchstaben aus Classnames oder filtern Bezeichnungen wie "background" oder "width" aus Stylesheets aber auch aus inline-styles heraus.

zum Beispiel:
Google Mail
  • Löscht den kompletten Header
  • Löscht <style> - </style> und sämtlichen inhalt dazwischen
  • Background: nur "background-color"
  • Löscht Position
  • Löscht sämtliche "class" Attribute
Live Mail
  • Background: nur "background-color"
  • Löscht Margin
  • Löscht Position
  • Fügt "class" Attributen das Präfix "EC_" hinzu
Yahoo Mail
  • "font-family" wird auf im Mail Body auf Times New Roman gesetzt, in inline-styles bleibt es erhalten.
  • Löscht Position

Eine detaillierte Auflistung findet Ihr hier: Guide to CSS support in email clients. Diese Auflistung ist zeitlich auf 2008 begrenzt und wird jedes Jahr erneuert.

Warum das alles?

Bei Outlook 2007 dürften vor allem sicherheitsrelevandte Überlegungen dazu geführt haben, CSS derart zu beschneiden. Vor allem wurde der Internet Explorer als HTML Interpreter durch Word 2007 ersetzt, damit eine Email nicht den IE aushebeln kann, außerdem wollte man Inkonsistenzen zwischen dem Verfassen einer Email mit Word und dem Anzeigen einer Email mit IE entgegentreten. Ganz nachvollziehbar ist es allerdings nicht, den der HTML Interpreter von Word 2007 entspricht in etwa dem Internet Explorer 5.5. Welch ein Fortschritt für die Sicherheit, welcome to 1994.

Bei den Webmail-Anbietern hat vieles damit zu tun, das ihr eigenes Layout in dem eine Email angezeigt wird, nicht zerschossen werden soll, es darf auch aus der Mail heraus kein Overlay-Div aufgehen, sozusagen als Pop-Up Werbung. Hier zeigt sich bei Yahoo wofür das I-Frame gut ist. Bei Yahoo hat man die wenigsten Einschränkungen, das hilft aber nix, weil man die Email ja für alle Empfangbar machen muss (-:

Mit diesen Grundlagen im Handgepäck kann es also losgehen...

zum Seitenanfang

Struktur

Wie bereits erwähnt verwenden wir das Tabellen-Layout und verschachteln die Tabellen, zwar so wenig wie möglich aber so viel wie nötig, um eine gute Browser übergreifende Konsistenz zu erreichen.

Um Links beim hovern und im Aktiv-Status zu stylen benützen wir den <body> Tag sowie ein Container <div> gleich innerhalb des Bodys

<body>

Dem <body> geben wir so viele Informationen wie möglich mit:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="B10909" text="#000000" link="#D30909" vlink="#B10707" alink="#FF0000" style="background-color:#B10909;">

Bei den meisten Mail Clients kommen diese Informationen in verschiedenster Form an und werden fast immer übernommen, auch wenn der <body> Tag selbst gelöscht wird.

div < body

Bevor wir mit der Tabelle anfangen fügen wir zwischen <body> und <table> einen <div> ein, dem man ebenfalls Informationen mit gibt:

<div style="background-color:#B10909;color:#000000;font-family: Arial, Helvetica, FreeSans, sans-serif;font-size:12px;">

Diese Informationen werden von den meisten Interpretern Inheritet (Ausnahme: Outlook 2007), allerdings nur, wenn sie in einem <div> Tag stehen, der <body> wird bei allen Webmail Clients gelöscht (aber die Information oft übernommen).

Direkt anschließend kann noch ein Stylesheet folgen. Auch wenn es in den meisten Fällen gelöscht wird, kann es nicht schaden. Nur zu lang darf es nicht werden, um die Dateigröße nicht auf zu blasen. Es sollte sich in einer Zeile gut lesbar ausgehen.

Tabellen

Tabellen sind in HTML-Emails DAS Mittel zum Zweck. Um sie semantisch und Konsistent zu machen werden sie verschachtelt. Das sieht dann so aus (gekürzt):

Anzeigebeispiel

<table cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td style="background-color:#FFFFFF">&nbsp;</td>
  <td style="background-color:#FFFFFF" width="560">
   <table cellpadding="0" cellspacing="0">
    <tr>
     <td rowspan="2"><a href="der_link" target="_blank"><img src="bilder/head.jpg" title="title" alt="alt" border="0"></a></td>
     <td rowspan="2" width="10">&nbsp;</td>
     <td>
      <div style="font-family: Arial, Helvetica, FreeSans, sans-serif;">
       <span style="font-size:35px;color:#593301;line-height:25px;font-weight:bold;">Das ist ein Test</span><br />
       <span style="font-size:85px;color:#593301;line-height:80px;font-weight:bold;">Titel</span><br />
       <p style="font-size:14px;line-height:17px;font-weight:bold;color:#D30909;">Weit hinten, hinter den Wortbergen<br />
        fern der Länder Vokalien und Konsonantien<br />
        leben die Blindtexte.
       </p>
      </div>
     </td>
    </tr>
    <tr>
     <td><a href="der_link" target="_blank"><img src="bilder/1.jpg" title="title" alt="alt" border="0"></a></td>
    </tr>
   </table>
  </td>
  <td style="background-color:#FFFFFF">&nbsp;</td>
 </tr>
 <tr>
  <td style="background-color:#F6DBB6">&nbsp;</td>
  <td style="background-color:#F6DBB6" width="560">
   <table cellpadding="0" cellspacing="0">
    <tr>
     <td>
      <table cellpadding="0" cellspacing="0">
       <tr>
        <td height="5" style="line-height:5px;">&nbsp;</td>
       </tr>
       <tr>
        <td width="374" style="background:#F8E4C7;">
         <div style="height:40px;line-height:40px;color:#593301;text-indent:17px;font-size:18px;font-weight:bold;font-family: Arial, Helvetica, FreeSans, sans-serif;">Abgeschieden wohnen Sie</div>
        </td>
        <td width="196" style="background:#F8E4C7;">
         <div style="height:40px;line-height:40px;color:#593301;font-size:12px;font-weight:bold;font-family: Arial, Helvetica, FreeSans, sans-serif;"><img src="bilder/2.jpg" alt="" border="0"/> <a href="der_link" target="_blank">in Buchstabhausen an</a></div>
        </td>
       </tr>
       <tr>
        <td height="5" style="line-height:5px;">&nbsp;</td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td>
      <table cellpadding="0" cellspacing="0">
       <tr>
        <td>
         <table cellpadding="0" cellspacing="8">
          <tr>
           <td>
            <table cellpadding="10" cellspacing="0" style="background:#F8E4C7;">
             <tr>
              <td><a href="der_link" target="_blank"><img src="bilder/user01.jpg" title="title" alt="alt" border="1" style="border:1px solid #FCF9D7;"></a></td>
             </tr>
             <tr>
              <td><a href="der_link" target="_blank" style="font-size:11px;font-weight:bold;font-family: Arial, Helvetica, FreeSans, sans-serif;">Name</a></td>
             </tr>
            </table>
           </td>
          </tr>
         </table>
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
  <td style="background-color:#F6DBB6">&nbsp;</td>
 </tr>
</table>

Je nach Design werden es mehr oder weniger Tabellen sein. Weniger ist besser als mehr, da auch dieses Tabellen-Layout recht KB intensiv ist (zwischen 5KB und 15KB).

Weitere Tags

Absätze (<p>)

Den <p> Tag können wir in HTML-Emails nicht verwenden. Dadurch, das "margin" nicht ausreichend supportet wird und jeder Interpreter automatisch einen Abstand (und jeder einen anderen) unter <p> Tags setzt, ist es sehr sicher, daß uns dieser Abstand das Layout zerreißen wird.

Überschriften (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)

Das selbe gilt für sämtliche Überschriften. Da diese im Normalfall noch dazu einen Abstand oben hinzugefügt bekommen, sind sie noch problematischer, wir verzichten einfach aus sie.

Listen (<ol>, <ul>, <dl>)

Bei Listen, egal ob geordnet (<ol>), ungeordnet (<ul>) oder definiert (<dl>) ist es ähnlich, aber nicht ganz so schlimm. Wichtig ist, sich vorher an zu sehen, wieviel Abstand im Layout vorhanden ist.

Block-Element <div>

Das Block-Element <div> kann beliebig eingesetzt werden, wenn es sich innerhalb von <td> Elementen befindet die (direkt im <td> oder in äuseren Elementen (<table>, etc.)) bereits eine Breitenangabe haben. Sonst kann es das Layout leicht zerschießen. Es kann genutzt werden um Bereiche innerhalb eines <td> zu trennen und um paddings und margins (keine CSS-Shorthands) mit zu geben.

Alternativen:

<br />

Da uns also so wie so fast alle HTML Spezifischen Tools zur semantischen Textauszeichnung abhanden gekommen sind bleibt nur der gute alte Zeilenumbruch.

Wenn es also einmal keine eigene Tabellenreihe benötigt, werden Abstände mit <br /> gemacht.

<span>

Der <span> Tag eignet sich hervorragend als Inline-Element zur Textauszeichnung in Block-Elementen. Inline-Styles zur Schrift-Formatierung werden übernommen und es gibt keine "margins". zum Seitenanfang

Testing

Was und wo testen?

zum Seitenanfang

Microsoft Outlook 2003/2007

Diese Email-Programme sind bei den meisten Empfängern installiert, daher müssen die Emails dort ganz einfach passen. Outlook ist bei den meisten Firmen aber auch in Privat-Haushalten zu finden.

font-family

Outlook interpretiert in jedes Inline-Element die font-family Times New Roman hinein, unabhängig davon, welche font-family einem übergeordneten Element zugeordnet ist. Deswegen müssen wir jedem Inline-Element den Inline-Style font-family mitgeben. Außerdem kommt es vor, daß die font-size zurückgesetzt wird. Also auch die font-size immer dem letzten Inline-Element mitgeben.

Das Text nicht direkt in einem Block Element ohne Textauszeichnung stehen soll ist hier besonders wichtig, da auch Inline-Styles in Block-Elementen nicht immer übernommen werden (Ausnahme: <div>)

zum Seitenanfang

Webmail

Folgende Webmail-Dienste sollten getestet werden:

zum Seitenanfang

Internet Explorer 6

Alle Tests müssen auch am IE6 vorgenommen werden, allerdings wird man mit dem Tabellen-Layout kaum Probleme mit unserem Lieblingsbrowser bekommen (-:

zum Seitenanfang

Weiterführende Links:

zum Seitenanfang