Begrüßen Sie das HTML Email Boilerplate

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Das Herausfinden von HTML-E-Mails wird die Geduld eines jeden Menschen auf die Probe stellen. Ein scheinbar kleines Formatierungsproblem wird unweigerlich auftreten, und Sie denken sich: "Ich bin selbst ein erstklassiger Webentwickler, der in der neuesten und besten Version von HTML5/CSS3/Was auch immer geschult ist. Ich kann dies mit vielen Tastenanschlägen angehen."

Einige Stunden/Tassen Kaffee/Googeln später sind Sie bereit, sich die Haare auszureißen und darüber nachzudenken, was Sie mit der Person/den Personen tun würden, die {hier den leeren E-Mail-Client ausfüllen} erstellt haben. Das ist so ziemlich der Grund, warum es das HTML Email Boilerplate gibt.

Das HTML-E-Mail-Boilerplate ist eine Art Vorlage, bei der weder Design noch Layout vorhanden sind. So können Sie einige der Hauptprobleme beim Rendern mit den gängigsten E-Mail-Clients vermeiden - Google Mail, Outlook, Yahoo usw. - dem HTML-E-Mail-Boilerplate

Auf der Boilerplate finden Sie einige Beispiele und hilfreiche Tipps, damit Ihr E-Mail-Design so formtreu wie möglich bleibt. Sie können das Boilerplate als Ausgangspunkt verwenden, um Ihre E-Mail zu erstellen. Für fortgeschrittenere Benutzer möchten Sie möglicherweise bestimmte Snippets auswählen, die Ihren Anforderungen entsprechen.

In diesem Artikel werden einige der wichtigsten Aspekte des Boilerplates aufgeschlüsselt und die Implementierung erläutert.

Bevor wir beginnen, wollen wir uns einige grundlegende Mandanten von HTML-E-Mails ansehen:

Das einzige, worauf Sie extern verweisen können, sind Bilder. Keine externen Stylesheets, Schriftarten, Videos (HTML5 beginnt dies jedoch zu ändern) usw.
CSS-Elemente werden von E-Mail-Clients nur eingeschränkt unterstützt (E-Mail-Client=Outlook, Google Mail, Hotmail, Yahoo usw.). Hier können Sie in einer hilfreichen Tabelle nachlesen, welcher Client welche Funktionen unterstützt.
Tabellen werden am häufigsten zum Layout einer HTML-E-Mail verwendet.
Und fast teuflisch in der Natur, müssen Sie über E-Mail-Client, Browser und Betriebssystem testen.

1: Einstellen des DOCTYPE

Während viele E-Mail-Clients den Doctype entfernen oder überhaupt keinen zulassen, bedeutet dies nicht, dass wir keinen für unsere eigenen Testzwecke festlegen möchten. In diesem Fall wird der XHTML 1.0 Strict-Doctype hauptsächlich verwendet, weil zwei beliebte Clients, die Ihren Doctype entfernen, Google Mail und Hotmail, ihn als Standard verwenden.

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2: Arbeiten mit Bildern

Bei der Arbeit mit Bildern in HTML-E-Mails sind einige Probleme zu beachten:

Das Verknüpfen von Bildern mit einer anderen Seite kann schwierig sein. Verschiedene Clients setzen unerwünschte (und hässliche) Ränder um ein anklickbares Bild.
Einige E-Mail-Clients fügen zusätzlichen Platz am unteren Rand des Bildes hinzu.
Da viele E-Mail-Clients Bilder standardmäßig deaktivieren kann das Format/der Rahmen Ihrer Nachricht verzerrt sein.

Um diese Probleme zu bekämpfen, werden auf der Kesselplatte einige sinnvolle Standardeinstellungen im Kopf des Dokuments festgelegt. Die Ränder um verknüpfte Bilder werden auf Null zurückgesetzt. Es wird eine Klasse (image_fix) eingerichtet, die verwendet werden soll, wenn Sie keinen Platz unter Ihren Bildern haben möchten. Auf der Boilerplate finden Sie auch ein Beispiel für die Einrichtung Ihrer Bilder, wobei Sie immer die Breite, Höhe, Alts und Titel festlegen. die helfen, Ihr Format intakt und konsistent zu halten.

/* Some sensible defaults for images
		Bring inline: Yes. */
		img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
		a img {border:none;} 
		.image_fix {display:block;}

Das Boilerplate hilft bei der Verwaltung einiger Probleme, die bei der Verwendung von Bildern in HTML-E-Mails auftreten können. Bringen Sie diese Erklärungen inline, um sicherzustellen, dass Ihre E-Mail so gerendert wird, wie Sie es beabsichtigt haben.

3: Tabellen, Tabellen und weitere Tabellen

Es ist wahrscheinlich sicher anzunehmen, dass Sie zuvor Tabellen verwendet haben. Ich meine, seit Beginn der (Internet-) Zeit gibt es Tabellen. Und obwohl Tabellen nicht die neueste oder coolste Methode sind, sind sie das häufigste Framng-Werkzeug für HTML-E-Mails und eine bewährte Methode, um effektiv Speicherplatz zu schaffen. Darüber hinaus ist das Verschachteln von Tabellen eine großartige Möglichkeit, Inhalte zu gruppieren und zu trennen, um die kompliziertesten Designs zu erobern.

Das Boilerplate bietet Ihnen einige Ausgangspunkte für die Arbeit mit Tabellen. Die erste ist eine äußerste Tabelle (#backgroundTable), die als eine Art Container fungiert und sich bis zur Breite des sichtbaren Bereichs in einem E-Mail-Client erstreckt. Dies ist erforderlich, da einige Clients den zu rendernden Bereich willkürlich einschränken - was möglicherweise zu seltsam ausgerichteten Inhalten führt.

1	#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

1	<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
2	<tr>
3	<td valign="top">
4	...

Die Klasse #backgroundTable hilft beim Zurücksetzen einiger E-Mail-Client-spezifischer Formatierungen, während Sie den Arbeitsbereich festlegen, in dem Sie arbeiten können.

Die zweite (innere) Tabelle ist zentriert und auf eine Pixelbreite von (600 Pixel) eingestellt. Dies ist eine gute Breite, um zu verhindern, dass sich Ihre E-Mail über die sichtbare Fläche eines E-Mail-Clients hinaus erstreckt (siehe Vorschaufenster).

Darüber hinaus legt das Boilerplate wie bei Bildern einige Standardeinstellungen für Tabellen fest, um Formatierungsprobleme zu vermeiden. Die Ränder, das Auffüllen von Zellen und der Zellenabstand werden auf Null gesetzt, und der Inhalt wird vertikal am oberen Rand der Zelle ausgerichtet.

Hinweis: Aufgrund der eingeschränkten Unterstützung von Divs in E-Mail-Clients sind Tabellen die beste und manchmal einzige Möglichkeit, Inhalte zu formatieren und zu positionieren.

4: Client-spezifische Korrekturen

Der Hauptgrund, warum dieses Boilerplate und andere, die es mögen, existieren, besteht darin, scheinbar zufällige Sabotageakte durch Yahoo, Google, Microsoft und dergleichen zu vereiteln. Yahoo setzt Ihre Absatzränder auf Null und bringt Ihren Text in einem großen Blob zusammen. Google Mail ignoriert (löscht wirklich) jegliches Styling im Kopf Ihres Dokuments und verschraubt es mit Ihren Bildern. Hotmail hasst Ihre Header und Outlook ist seit langem der Fluch der Existenz eines HTML-E-Mailers.

Daher versucht die Boilerplate, einige dieser Nuancen nach Möglichkeit zu neutralisieren und die Auswirkungen des Restes abzuschwächen.

Insbesondere für Yahoo setzt das Boilerplate den Absatzrand im Kopf des Dokuments auf 1em und weist an, es inline zu bringen. (mehr dazu später "Inlining")

1	p {margin: 1em 0;}

Änderungen:

Dazu:

Bei Hotmail überschreibt das Boilerplate das grüne Header-Design von Hotmail, normalisiert die Zeilenhöhe und legt eine Standardbreite fest.

1	.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}

1	h1, h2, h3, h4, h5, h6 {color: black !important;} /* or whatever color you want it to be */

Für Outlook setzt das Boilerplate "border-collapse: collapse", um einige Standardauffüllungen zu entfernen.

Tipp: Durch Festlegen von #outlook a {padding: 0;} im Kopf Ihres Dokuments können Sie Outlook zwingen, die Option 'Ansicht im Browser' anzubieten. Eine interessante Funktion, die großartig wäre, wenn andere Kunden sie anbieten würden. (H/T Fabio Carneiro und MailChimp für dieses hervorragende Snippet.)

5: Mobil

Mobile ist einer der aufregendsten Bereiche beim Erstellen von HTML-E-Mails. Während wir aus Markup-Sicht größtenteils im 20. Jahrhundert festsitzen, haben uns neue Smartphones einen Einblick gegeben, wie das Leben aussehen könnte. Schließlich haben wir die Möglichkeit, mit "neueren" Webtechnologien zu spielen. Wir können in den Bereichen Responsive Design herumtollen, wir können nach Herzenslust abfragen und wir können sicherlich verschiedene Plattformen ansprechen. Okay, vielleicht wurde ich ein wenig mitgerissen, aber angesichts des E-Mail-Status sieht das Handy jeden Tag besser aus.

Mit Blick auf das mobile Rendering bietet das Boilerplate einen guten Ausgangspunkt für das mobile Targeting. Es hilft beim Ändern der Schriftgröße (oder beim Stoppen). Es hilft, Ihre E-Mails für Mobilgeräte zu optimieren, indem Sie das Ansichtsfenster auf die Breite des Geräts einstellen. Außerdem erhalten Sie die @media-Abfragen, die für das iPhone (3+4), Tablets (über Auflösung), Android-Telefone und eine bedingte Anweisung für Windows Mobile erforderlich sind.

Erinnerung: Sie sollten keine in den @media-Abfragen deklarierten Stile inline bringen.

6: Arbeiten mit dem EBP: Wann und wie werden Stile inline gebracht?

Werkzeuge wie der Premailer von Dialect machen das Inlining zum Kinderspiel. Ein großartiges Werkzeug, das jeder HTML-E-Mailer in seiner Brust, seinem Gürtel oder seinem Taschenschutz haben kann.

Wie bereits erwähnt, gibt es einige Clients, die Ihre eingebetteten Stile in der Kopfzeile entfernen. Wir müssen einen weiteren Schritt tun, indem wir nur die eingebetteten Stile in der Kopfzeile haben und sie inline bringen. Sie können dies entweder manuell tun, das integrierte Werkzeug Ihrer E-Mail-Clients verwenden (beliebte Werkzeuge wie Campaign Monitor und Mailchimp haben sie integriert) oder ein eigenständiges Werkzeug wie Premailer verwenden. Befolgen Sie in beiden Fällen die Anweisungen auf der Kesselplatte, um herauszufinden, was inline gebracht werden soll.

Um Ihnen eine Vorstellung davon zu geben, wovon wir sprechen, lesen Sie den im Artikel erwähnten Yahoo-Absatz-Fix. Es muss inline sein, um zu funktionieren. Wenn nicht, werden Ihre Randdeklarationen ignoriert und Ihre Absätze werden zusammengefasst. Auf der anderen Seite muss mit einem anderen Fix in der Boilerplate kein Markup wie die table td {border-collapse: collapse;}, die auf ein Auffüllproblem in Outlook abzielt, inline gebracht werden. Outlook respektiert Ihre eingebetteten Stile (zum größten Teil :).

Als Beispiel würden Sie davon ausgehen:

1	p {margin: 1em 0;}

1	<p>Pellentesque habitant morbi tristique senectus ...</p>

Dazu:

1	p {margin: 1em 0;}

1	<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">Pellentesque habitant morbi tristique senectus ...</p>

Beachten Sie, dass das Styling in und direkt nach den @media-Abfragen nicht inline erfolgen sollte. Ich würde empfehlen, die abgefragten Stile zu entfernen, bis Sie mit Ihrer E-Mail zufrieden sind, und sie dann wieder einzuarbeiten, nachdem Sie Ihre anderen Stile eingefügt haben.

7: Ein paar ehrenwerte Erwähnungen

Es gibt ein paar Themen, die erwähnenswert sind, aber aus dem einen oder anderen Grund nicht auf die Kesselplatte gekommen sind.

HTML5-Video: Obwohl es sehr, sehr eng ist, gibt es in Hotmail einige große Support-Mängel, die das Einfügen umständlich gemacht haben. Derzeit werden einige interessante Taktiken getestet, mit denen ein tatsächliches Video in einer E-Mail bei einer Reihe von Clients gerendert und in ein anklickbares Bild umgewandelt werden kann. Hotmail wirft jedoch einen kleinen Schraubenschlüssel in das Ganze, da es das Video zeigt und die Wiedergabe ermöglicht, jedoch ohne visuelle Steuerung. Rechtsklick funktioniert, aber das scheint eine Strecke zu sein, um Ihre Leser zu bitten, dies zu tun. Sie könnten das Video auch auf Autoplay einstellen - aber könnten Sie wirklich damit leben, dass Sie das tun?
Facebooks Open Graph: Wahrscheinlich ein Kandidat für die nächste Veröffentlichung. Ich wäge immer noch ab, wie sich dies in einer E-Mail auswirkt, und insbesondere, wenn keine Browserversion der E-Mail verfügbar ist - sollte sie vorhanden sein?

8: Der Status der E-Mail

CSS3? Kommen wir zuerst zu CSS2.

Viele E-Mailer beklagen, dass sie wie 1999 codieren müssen. Tabellen, nicht Divs, stehen an oberster Stelle. CSS3? Kommen wir zuerst zu CSS2. E-Mail-Clients unterstützen zufällig Tags, Deklarationen und ganze Spezifikationen. Mit dem Aufkommen von iOS-Geräten und einigen Bewegungen im Client-Bereich tauchen jedoch Rendering-Engines wie Webkit auf und erleichtern E-Mailern das Leben ein wenig. Aufgrund dieses und anderer Faktoren sehen wir einige der kompliziertesten und schönsten Designs aller Zeiten. Es ist definitiv eine aufregende Zeit für E-Mailer.

Diese Bewegung hat eine Menge mit mobilen iOS-Geräten zu tun. Ab Juni dieses Jahres war der zweitbeliebteste E-Mail-Client ein iOS-Gerät. Das bedeutet, dass wir fast alles verwenden können, was ein Webkit-Browser zum Erstellen unserer E-Mails unterstützt - Dinge wie CSS3, HTML5 kommen alle ins Spiel (woohoo). Seien Sie jedoch nicht zu aufgeregt, Sie müssen immer noch berücksichtigen, dass in vielen anderen Desktop-/Web-E-Mail-Clients (nicht woohoo) keine CSS3- oder HTML5-Unterstützung vorhanden ist.

Trotzdem hat dieses Anheben der Messlatte einen bereits komplizierten Raum definitiv komplizierter gemacht. Während einige E-Mail-Clients beispielsweise auf webbasierte Standards umsteigen, verwendet Outlook auf einem Mac jetzt das Webkit genau wie das Apple Mail-Gegenstück, wechseln die meisten Desktop-E-Mail- und webbasierten Clients in einem schildkrötenartigen Tempo zu akzeptabler HTML/CSS-Unterstützung. Während Mobile uns am Ende des Tunnels etwas Licht gezeigt hat, hat es der bereits überfüllten Matrix von Testmöglichkeiten eine weitere Spalte hinzugefügt.

Wie ich bereits erwähnt habe, ist dies definitiv eine aufregende Zeit für E-Mailer. Bei so vielen großartigen Unternehmen und Einzelpersonen, die alles daran setzen, was möglich ist, ist es unvermeidlich (zumindest hoffe ich das), dass die Dynamik die Dinge in die richtige Richtung treibt - und mit "Dingen" meine ich ein wenig bessere HTML/CSS-Unterstützung Standardisierung und weniger Kopfschmerzen.

Abschluss

Das Boilerplate ist hier, um einige der Fallstricke der Entwicklung für E-Mail und E-Mail-Clients aufzuzeigen und hervorzuheben. Und obwohl es nicht gerade Plug-and-Play-fähig ist, bietet es mit ein wenig Ellbogenfett einige hilfreiche Beispiele und Ausschnitte, mit denen Ihr E-Mail-Design so formtreu wie möglich dargestellt wird. Zumindest erspart es Ihnen einige Zeit beim Googeln und vor allem Haare.

Ich würde gerne von Ihnen hören. Wenn Sie etwas haben, das Sie in der Boilerplate sehen möchten, lassen Sie es mich hier oder @seanpowell wissen.

Danke vielmals

Wenn es darauf ankommt, ist das HTML Email Boilerplate einfach eine Zusammenstellung von Tipps, Ausschnitten und Best Practices, die auf meinen Schreibtisch gestoßen sind, und ich möchte nicht erwähnen, dass Ros Hodgekiss, Brian Theis und Ros Hodgekiss großartig und offen sind das Team bei Campaign Monitor; und an Fabio Carneiro und Mailchimp für die großartige Arbeit, die sie leisten (und den großartigen Reset, den die Boilerplate verwendet). Das Boilerplate wird auch mit zwei großartigen E-Mail-TestWerkzeugs, Litmus und Email on Acid, auf Herz und Nieren geprüft - ohne sie wäre dies eine unmögliche Aufgabe gewesen.

Ressourcen

Nur ein paar, die ich regelmäßig benutze...

Blog und CSS-Support-Spickzettel von Campaign Monitor
MailChimp's Blog und tolle Field Guides
Das Premailer Inliner Werkzeug von Dialect... oder dieses von MailChimp... oder dieses von Dave Cranwell
Litmus Email Testing Service
Email on Acid Email Testing Service
Emailogy - E-Mail auf Acids großartigem Boilerplate
Und natürlich das HTML Email Boilerplate