SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

HTML/Tutorials/responsive E-Mail-Newsletter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Man kann 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.[1]


Kopf

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

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. Du kannst …

  • keine externen Stylesheets oder auch nur style-Blöcke im head verwenden. Diese werden oft nicht mitgeladen.
    Du kannst 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 musst Einzelangaben wie font-size, font-weight, etc festlegen.
Caniemail.png

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 kannst du 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.

Beachte: 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.

Beachte: Setze bei Farbangaben immer den vollen sechsstelligen Hex-Code, da dreistellige Kurzformen manchmal nicht akzeptiert werden.
Empfehlung: Damit E-Mails auf mobilen Geräten gut lesbar sind, solltest du

Einbinden von inline-Grafiken

Obwohl es möglich ist, Grafiken in deine 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.[4]

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

Empfehlung: Teste das Einbetten von Bildern mit problematischen Clients wie Gmail und Outlook.
Empfehlung: Komprimiere 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.

Siehe auch

  • Symfony-Mailer
     

Weblinks

  1. ↑ thunderbird-mail.de: Reintext-Nachricht oder formatierte Nachricht (HTML)?
  2. ↑ tutsplus: What You Should Know About HTML Email
  3. ↑ t3n.de: So gestaltet man Responsive HTML-Newsletter
  4. ↑ sendgrid: Embedding Images in Your Emails. The Facts.


E-Mail Testing

Templates

Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/responsive_E-Mail-Newsletter&oldid=98698“