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 oder Lotus 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. CSS3-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

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

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" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>E-Mail Beispiel</title>
</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

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.

Siehe auch:

  • Can I email? – Übersicht über Email-Clients und welche HTML und CSS-Features unterstützt werden.

fluides Layout

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

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-Element werden durch das style-Attribut 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 der Tabelle auf 100% gesetzt.
Beachten Sie: Der Rahmen border="1" dient nur der besseren Übersicht und wird am Ende auch auf 0 gesetzt.

Mehrspalten-Layout

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:

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

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.

Ü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 × 44px groß anlegen[2]

Einbinden von inline-Grafiken

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

  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


E-Mail Testing

Templates

Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/responsive_Newsletter&oldid=87537“