HTML/Tutorials/responsive Newsletter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können E-Mails und E-Mail-Newsletter mit HTML und CSS gestalten. Da diese aber häufig nicht im Browser, sondern in speziellen E-Mail-Readern wie Outlook, Gmail oer Louts Notes gelesen werden, gelten hier einige spezielle Regeln.

So sind E-Mails einer der wenigen Anwendungsbereiche, in denen noch Tabellen-Layouts aus dem Jahre 1996 benötigt werden. CCS3-Features wie media queries werden von einigen Apps wie Gmail nicht berücksichtigt und können nur eingeschränkt verwendet werden.

Es sollte deshalb gut überlegt werden, ob man E-Mails im HTML-Format oder als reinen Text verfasst.


Kopf[Bearbeiten]

Mit einem XHTML-Dokument haben Sie die wenigsten E-Mail-Reader Probleme[1].

Beispiel: XHTML-Seitenkopf
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>E-Mail Beispiel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

Der Meta-Viewport-Tag verhindert, dass die E-Mail von mobilen Browser so an den Viewport angepasst wird, dass sie sehr klein und nur schwer lesbar ist. Trotzdem kann man Sie durch Fingerziehen skalieren.

Seitenauszeichnung und -gestaltung[Bearbeiten]

Hier muss erst einmal geklärt werden, was in E-Mails alles nicht geht. Sie können

  • keine externen Stylesheets oder auch nur style-Blöcke im head verwenden. Diese werden oft nicht mitgeladen.
    Sie können Stylesheets von einem Programm wie mailchimp oder premailer in das Markup übertragen, das dann aber nur noch schwer nachträglich zu warten ist.
  • keine mehrfachen Klassen pro Element verwenden.
  • keine zusammenfassenden CSS-Eigenschaften wie font oder background verwenden, sondern müssen Einzelangaben wie font-size, font-weight, etc festlegen.

fluides Layout[Bearbeiten]

Mit einem fluiden Layout ohne feste Breitenangaben können Sie E-Mails erstellen, die auf jedem Viewport gut aussehen.

Beispiel: sichtbarer body mit Tabelle
<body style="margin: 0; padding: 0;">
 <table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
 <td>
   Text
 </td>
</tr>
 </table>
</body>
Im body werden durch ein style-Attribut alle Ränder und Abstände auf 0 gesetzt, um unterschiedliche Darstellungen auszuschließen.
Da Stilangaben für das body-Element manchmal ignoriert werden, dient die folgende Tabelle als Container für den Inhaltsbereich. Die (in HTML5 obsoleten) Attribute cellpadding und cellspacing werden auf 0, die Breite auf 100% gesetzt.
Beachten Sie: Der Abstand border="1" dient nur zur besseren Übersicht und wird hinterher auch auf 0 gesetzt.

Mehrspalten-Layout[Bearbeiten]

Mehrere Spalten können nicht mit semantisch sinnvollen Elementen wie section oder aside und auch nicht durch entsprechende Tabellenzellen, sondern nur durch ineinander verschachtelte Tabellen realisiert werden:

Beispiel: mehrere Spalten
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table border="1" cellpadding="0" cellspacing="0" width="600"> <tr> <td> Spalte 1 </td> <td> Spalte 2 </td> </tr> </table> </td> </tr> </table>

Auszeichnung von Text und Überschriften[Bearbeiten]

Da das Verhalten der einzelnen Programme inkonsistent ist (Outlook verwendet zum Parsen von HTML die Word HTML Rendering Engine), ist es besser, anstelle der semantischen Elemente h1, h2 und p Tabellenzeilen mit einzeln festgelegten CSS-Eigenschaften zu verwenden.

Beispiel: Überschrift als Tabellenzeile
<tr>
 <td style=“font-size: 24px; font-family: Arial, sans-serif; color: #ff0000;”>
   <b>Überschrift</b>
 </td>
</tr>
Die Überschrift wird durch ein b-Element fett dargestellt; alle weiteren Festlegungen werden über das inline Style-Attribut getroffen.
Beachten Sie: Setzen Sie bei Farbangaben immer den vollen sechsstelligen Hex-Code, da dreistellige Kurzformen manchmal nicht akzeptiert werden.
Empfehlung: Damit Ihre E-Mail auf mobilen Geräten gut lesbar ist, sollten Sie
  • für Text eine Mindestschriftgröße von 14px verwenden
  • Überschriften entsprechend größer darstellen
  • Links und Touch-Icons mindestens 44px x 44px groß anlegen[2]

Einbinden von inline-Grafiken[Bearbeiten]

Obwohl es möglich ist, Grafiken in Ihre E-Mails zu integrieren, werden sie von manchen Readern aus dem Quelltext entfernt und nicht mitgeladen. Früher wurden diese Grafiken meist als Anhang (attachment) mitgeliefert und aus der E-Mail referenziert.[3]

Ein bequemer Weg ist das direkte Einbinden von base64-codierten Data-URI Grafiken innerhalb eines img-Tags.

Empfehlung: Testen sie das Einbetten von Bildern mit problematischen Clients wie Gmail und Outlook.
Empfehlung: Komprimieren Sie Bilder so stark wie möglich. Eine E-Mail sollte optimalerweise nicht mehr als 100kb haben, die maximale Größe sollte 250kb aber nicht überschreiten.

Quellen[Bearbeiten]

  1. tutsplus: What You Should Know About HTML Email
  2. t3n.de: So gestaltet man Responsive HTML-Newsletter
  3. sendgrid: Embedding Images in Your Emails. The Facts.

Weblinks[Bearbeiten]



E-Mail Testing[Bearbeiten]

Templates[Bearbeiten]