HTML-EMail - Alte Techniken ohne Alternative

2 | 20686 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "HTML-EMail - Alte Techniken ohne Alternative" mit Ihrem Wissen!

Anzeige Hier werben

Wenn Sie sich über Internet Explorer ärgern, und mit seiner Art der Darstellung der Formatierungen unzufrieden sind, dann bereiten Sie sich vor auf etwas noch schlimmeres - die HTML-Emails.

In der Theorie sind die HTML-Emails ganz normale HTML-Dokumente, die dazu gedacht sind, über Email verschickt zu werden. In der Praxis sind die das auch. Nur mit einem großen ABER! Die HTML-Emails, im Vergleich zu Webseiten, die ausschließlich im Browser angesehen werden (ausgehend rein von Nutzerseite), werden mit Email Clients geöffnet. Und diese interpretieren HTML und vor allem CSS ganz anderes.

Der Weg, den man nehmen muss, ist die Rückkehr zum Anfang - alte Techniken beim Coding von HTML, Tabellenlayouts, inline-Formattierungen und ähnliche Dinge.

Gestaltung

Bei der Gestaltung von Email muss man die Einfachheit im Hinterkopf behalten. Möglichst wenig Grafiken, möglichst keine Hintergrundbilder und Breite von maximal 600px sind schon ein paar gute Regeln.

Planung

Um konsistente Darstellung unserer Basisstruktur zu gewährleisten verzichten wir auf jegliche divs und wenden uns den Tabellen zu.

Coding

Der Grundgerüst für unsere Email entspricht dem von einer normalen HTML-Seite.

 
HTML
1
2
3
4
5
6
7
8
9
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Newsletter</title>
    </head>
    <body>
        
    </body>
</html>

DOCTYPE kann man rauslassen, denn dieser wird sowieso in meisten Fällen verworfen.

Struktur

Im <body> wird die Struktur der Email in Form von verschachtelten Tabellen festgelegt. Die Email-Clients berücksichtigen den Code, der innerhalb von <body> steht, jedoch nicht das <body> selbst. Deshalb den ganzen Inhalt in eine Wrapper-Tabelle einpacken mit Breite von 100%. Der wichtige Punkt - die CSS-Formatierungen gehören mit rein.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4">
  <tr>
    <td>
      <table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
        <!-- top area -->
      </table>
      <table id="main" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">          <!-- middle area -->
      </table>
      <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
        <!-- bottom area -->
      </table>
    </tr>
  </td>
</table>
Top area

In der mit <!-- top area --> kommentierten Tabelle platzieren wir den einen Satz mit dem Link zur Fallback-Variante, so dass wenn beim Benutzer die Email trotzdem nicht richtig angezeigt wird, hätte dieser die Möglichkeit, die Email im Browser anzuschauen.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
  <!-- top area -->
  <tr>
    <td align="center">
      <p>
        Wenn diese Nachricht nicht richtig angezeigt wird, klicken Sie
        <a href="#">[hier]</a>
      </p>
    </td>
  </tr>
</table>
Middle area

Im mittleren Bereich, der im Endeffekt unsere Inhalte enthält, brauchen wir wieder Tabellen.

Zuerst erstellen wir einen Header-Bereich:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table id="main" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">
  <!-- middle area -->
  <tr>
    <td>
      <table id="header" cellpadding="10" cellspacing="0" align="center">
        <tr>
          <td width="570" bgcolor="">
            <h1>HTML-Emails erstellen</h1>
          </td>
        </tr>
        <tr>
          <td width="570" bgcolor="8fb3e9">
            <h2>Grundprinzipien für gute HTML-Emails</h2>
          </td>
        </tr>
        <tr>
          <td width="570" align="right" bgcolor="7aa7e9">
            <p>11. Februar 2011</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Als nächstes kommt ein zweispaltiger Abschnitt, in dem links ein Bild positioniert ist und rechts ein Text steht. Hier brauchen wir aber drei statt zwei Zellen in unserer Tabellenzeile. Das aus dem Grund, dass wir zwischen der linken und rechten Spalten ein wenig Abstand brauchen.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<tr>
    <!-- content -->
    <td>
    <table id="content-1" cellpadding="0" cellspacing="0" align="center">
        <tr>
            <td width="170" valign="top">
            <table cellpadding="5" cellspacing="0">
                <tr>
                    <td bgcolor="d0d0d0">
                        <img src="http://example.com/some-image.jpg" />
                    </td>
                </tr>
            </table>
            </td>
            <td width="15"></td>
            <td width="375" valign="top" colspan="3">
                <h3>HTML in Emails</h3>
                <h4>Was Sie beachten bei der Erstellung davon müssen</h4>
            </td>
        </tr>
    </table>
    </td>
</tr>

Anschließend packen wir einen ganz normalen Paragraph, wieder von einer Tabelle umschlossen.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<tr>
    <td>
    <table id="content-2" cellpadding="0" cellspacing="0" align="center">
        <tr>
            <td width="570">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            </td>
        </tr>
    </table>
    </td>
</tr>

Wenn wir allgemein einen größeren vertikalen Abstand erzielen wollen, als der, den wir von cellpadding haben sollen Bilder als Trenner benutzt werden, die die Farbe des Hintergrunds oder gar transparent sind und die benötigte Höhe haben. Das ist aus dem Grund so, dass manche Browser und Mail-Clients die leeren Tabellenzellen einfach verwerfen.

 
HTML
1
2
3
<tr>  
    <td height="30"><img src="http://example.com/some-spacer-image.jpg" /></td>  
</tr>

Und so gehen wir weiter vor. Das Prinzip wiederholt sich immer wieder.

Was man aber beim Zuweisen der Breiten innerer Tabellen beachten muss, ist es, dass die Breite der innen stehenden Tabelle sich um den cellpadding der äußeren Tabelle reduziert.

Auch ist es nicht möglich, die css-Formatierungen in eine externe Datei auszulagern oder diese in den <head> zu übertragen, denn in manchen Fällen werden sie wie !DOCTYPE auch verworfen.

Außerdem müssen Links und die Pfade zu den Bildern absolut sein.

Typografie

Was Typografie angeht, dürfen bei den Angaben von Schriftformatierungen keine Kurzformen (etwa font: 10px bold italic small-caps verdana) vorkommen.

Bilder

Die <img>-Elemente sollen die alt-Attribute besitzen, um im Fall, wenn die Bilder nicht dargestellt werden, die Information, die diese tragen, trotzdem an den Nutzer weiterzugeben, wenn auch nur in Textform.

Außerdem muss jedem Bild die display: block Formatierung zugewiesen werden. Sonst erhalten die Bilder einen padding in Hotmail-Client.

Hintergrundbilder

Hintergrundbilder sollen grundsätzlich so Funktionieren, wie im Browser, mit der Ausnahme, dass diese manchmal nicht angezeigt werden. Deshalb soll für das Element, das einen Hintergrundbild hat, auch eine Hintergrundfarbe festgelegt werden. Das ist insbesondere dann wichtig, wenn die Schriftfarbe einen kontrasten Hintergrund braucht.

 
HTML
1
2
3
4
5
6
7
8
9
<tr>
  <table cellpadding='15' align="center">
    <tr>
      <td style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg); " width="570" bgcolor="8fb3e9">
        <h2>News and Events</h2>
      </td> 
    </tr>
  </table>
</tr>
Testen

Um sicher zu sein, dass die Email in meisten Fällen korrekt dargestellt wird, muss man diese in den gängigen Mail-Clients testen. Und es gibt einen Haufen davon:

  • Thunderbird
  • Outlook 2003/2007
  • GMail
  • Yahoo! Mail
  • Hotmail
  • Apple Mail

Das ist bloß ein kleiner Teil davon. Zum testen muss man als erstes eine Möglichkeit finden, die HTML-Emails zu versenden. Solche Services bieten z.B. Campaigh Monitor oder Mailchimp. Mailchimp bietet sogar die Möglichkeit, bis zu 12000 Emails pro Monat völlig kostenlos abzusenden, was für den einen oder anderen Test ausreichen sollte. Das ist der sicherste Weg für das Testen. Manche Email-Clients lassen es zwar auch zu, den HTML-Code direkt einzugeben, allerdings kann das zu diversen Komplikationen und unerwünschten Ergebnissen führen.

Auch in Webbrowsern muss die Emails getestet werden, denn diese sind auch potenzielle Kandidaten zum Öffnen davon. Also her mit:

  • IE 6-9
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Apple Safari
Problemstellen ausbessern

Manchmal passiert es, dass eine Formatierung, wie z.B. Farbangabe für den Text nicht zu dem erwarteten Ergebnis führt. Das ist z.B. der Fall bei älteren GMail und Hotmail Clients. Da werden oft die Werte mit den vom Standardlayout des Clients überschrieben. Um diese Probleme zu lösen, brauchen wir überall, wo solches verhalten auftritt, zu den eigenen Formatierungen das Schlüsselwort !important dazuzuschreiben.

 
HTML
1
<h3 style="color: #444444 !important;"></h3>

Dieses hebt die entsprechende standardmäßig vorgeschriebene Formatierung auf und setzt unserer Formatierung die höchste Priorität.

Fazit

Wie Sie sehen, die Erstellung von HTML-Emais unterscheidet sich gewiss von Techniken, die beim Erstellen von Webseiten heutzutage eingesetzt werden. Die Art und Weise ist die von 90-er Jahre und ob das sich in nahen Zukunft ändern wird, ist eine gute Frage.

Ressources

CampainMonitor bietet eine ausführliche Übersicht über Verbreitung von Mail Clients und deren CSS Unterstützung


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "HTML-EMail - Alte Techniken ohne Alternative" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "HTML-EMail - Alte Techniken ohne Alternative" hier bearbeiten.

Mitarbeiter