Tipps und Tricks

Manche E-Mail Clients machen manchmal Darstellungsprobleme, hier sind die Lösungen dafür.

Google Mail, Hotmail

Manche E-Mail Clients wie Google Mail und neuerding auch Hotmail stellt Bilder die untereinander aufgelistet werden mit einem Abstand dar.
Die Lösung dafür ist der Tabelle, in der die Bilder sind, die Linien-Höhe "0" mitzugeben.
Hier ein Beispiel:

<td width="618" style="line-height:0;font-size:0px;"><img src="http://..." /><img src="http://..." />...

Internet Explorer und Outlook allgemein

Im Outlook (ältere Versionen z.B. 2007), wo zum Rendern des HTMLs noch die Internet Explorer Engine verwendet wird, werden Abstände angezeigt, wo eigentlich keine sind.
Die Lösung dafür ist in den "td" der Tabellen, keine Leerzeichen und Umbrüche zu verwenden. Also eigentlich alles in einer Zeile schreiben.
Hier ein negatives Beispiel, wie man es nicht machen sollte:

<td width="618" style="line-height:0;font-size:0px;">
  <
img src="http://..." />
  <
img src="http://..." />...
</td>

Hier ein positives Beispiel, wie man es machen sollte:

<td width="618" style="line-height:0;font-size:0px;"><img src="http://..." /><img src="http://..." />...</td>

Outlook 2007

Manchmal werden ImageMaps bei Outlook nicht dargestellt. Dies passiert nur bei Polygongen (Typ: Poly), weil die HTML Rendering-Engine von Outlook erwartet, dass ein Polygon geschloßen wird. D.h. der erste Punkt des Polygones sollte auch am Ende der Koordinaten auftauchen.

Hier ein Beispiel, wie man es machen sollte:

<MAP NAME="meinBild"><AREA SHAPE="POLY" COORDS="294,24, 289,193, 23,194, 294,24" HREF="http://www.example.de" TITLE="Poly"> </MAP>

Outlook 2013

Outlook 2013 stellt Bilder die untereinander aufgelistet werden falsch dar. Die Bilder überlappen sich. Die Lösung dafür ist der Tabelle, in der die Bilder sind, die Schriftgröße 0px mitzugeben.
Hier ein Beispiel:

<td width="618" style="line-height:0;font-size:0px;"><img src="http://..." /><img src="http://..." />...

Sprungmarken setzten

Es wird zwar nicht in allen E-Mail-Clients unterstützt (z.B. Windows Mail unter Windows 8), aber die meisten erlauben die Nutztung von sog. Sprungmarken oder Jump-URLs.
Ein häufiger Fehler ist, IDs dazu zu verwenden, da z.B. Outlook damit Probleme machen kann.
Es empfiehlt sich dafür "names" zu nutzten

<a href="#c8274">Ich bin eine Sprungmarke - Link</a>

<a name="c8274"></a>
<p>Ich bin ein beliebiger Text der intern verlinkt wird</p>