HTML/Tutorials/responsive Newsletter
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.
Inhaltsverzeichnis
Kopf
Mit einem XHTML-Dokument haben Sie die wenigsten E-Mail-Reader Probleme[1].
<!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
oderbackground
verwenden, sondern müssen Einzelangaben wiefont-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.
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Text</td>
</tr>
</table>
</body>
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:
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.
<tr>
<td style="font-size: 24px; font-family: Arial, sans-serif; color: #ff0000;">
<b>Überschrift</b>
</td>
</tr>
- 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.
Quellen
- ↑ tutsplus: What You Should Know About HTML Email
- ↑ t3n.de: So gestaltet man Responsive HTML-Newsletter
- ↑ sendgrid: Embedding Images in Your Emails. The Facts.
Weblinks
- thunderbird-mail.de: Reintext-Nachricht oder formatierte Nachricht (HTML)?
- t3n: So gestaltet man Responsive HTML-Newsletter
- drweb.de: INK: So erstellt ihr responsive E-Mail-Newsletter, die einfach funktionieren
- drweb.de: Cerberus: Responsive HTML E-Mail, die überall funktioniert
- drweb.de: Aufbau von MIME-Mails
- tutsplus: Erstellen Einer Einfachen "Responsive" HTML Email (im Tabellen-Layout)
- CRM Evolution: Ultimativer Guide: Erstelle ein responsives HTML-E-Mail-Template für Deinen Newsletter (2019)
E-Mail Testing
- emailonacid: Email Testing and Analytics
- litmus.com: Email Testing and Email Marketing Analytics
Templates
- tutsplus: Say Hello to the HTML Email Boilerplate
- maschable.com: 32 Responsive Email Templates for Your Small Business
- zurb.com: Responsive Email Templates
- zurb.com: Foundation for Emails 2 (Ten Templates to Get You Started Faster)
- Cerberus: A few simple, but solid patterns for responsive HTML emails. Even in Outlook and Gmail
body
-Element werden durch dasstyle
-Attribut Abstände auf0
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) Attributecellpadding
undcellspacing
werden auf 0, die Breite der Tabelle auf 100% gesetzt.