it-swarm.com.de

Best Practices für das Gestalten von HTML-E-Mails

Ich entwerfe eine HTML-Vorlage für einen E-Mail-Newsletter. Ich habe erfahren, dass viele E-Mail-Clients verknüpfte Stylesheets ignorieren und viele andere (einschließlich Google Mail) CSS-Blockdeklarationen insgesamt ignorieren. Sind Inline-Stilattribute meine einzige Wahl? Was sind die Best Practices für das Gestalten von HTML-E-Mails?

190
Joe Mornin

Campaign Monitor bietet eine hervorragende Support-Matrix Detailliert, was von verschiedenen Mail-Clients unterstützt wird und was nicht.

Sie können einen Dienst wie Litmus verwenden, um zu sehen, wie eine E-Mail auf mehreren Clients angezeigt wird und ob diese von Filtern abgefangen werden.

125
Jim

Ich habe schon einmal an der HTML-E-Mail-Schlacht teilgenommen. Hier sind einige meiner Tipps zum Stylen für maximale Kompatibilität zwischen E-Mail-Clients.

  • Inline-Stile bist du bester Freund. Verknüpfen Sie auf keinen Fall Stylesheets und verwenden Sie kein <style> - Tag (GMail entfernt beispielsweise dieses Tag und den gesamten Inhalt).

  • Gegen dein besseres Urteilsvermögen Gebrauchs- und Missbrauchstabellen. <div> Schneidet es einfach nicht (besonders in Outlook).

  • Verwenden Sie keine Hintergrundbilder, sie sind fleckig und ärgern Sie.

  • Denken Sie daran, dass einige E-Mail-Clients typisierte Hyperlinks automatisch in Links umwandeln (wenn Sie sie nicht selbst verankern <a>). Dies kann manchmal negative Auswirkungen haben (z. B. wenn Sie jedem Hyperlink einen Stil zuweisen, um eine andere Farbe zu erhalten).

  • Achten Sie darauf, einen tatsächlichen Link mit etwas anderem zu verknüpfen. Geben Sie beispielsweise nicht http://www.google.com Ein und verknüpfen Sie es dann mit https://gmail.com/. Einige Clients kennzeichnen die Nachricht als Spam oder Junk.

  • Speichern Sie Ihre Bilder unter möglichst wenige Farben, um die Größe zu verringern.

  • Wenn möglich, binde deine Bilder ein in deine E-Mail ein. Die E-Mail muss nicht an einen externen Webserver gesendet werden, um sie herunterzuladen, und sie wird nicht als Anhang zur E-Mail angezeigt.

Und zum Schluss Test, Test, Test! Jeder E-Mail-Client verhält sich anders als ein Browser.

242

Mail-Schimpanse haben einen ganz netten Artikel darüber, was man nicht tun soll. (Ich weiß, es klingt falsch herum für das, was Sie wollen)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

Im Allgemeinen scheinen alle Dinge, die Sie gelernt haben, die für das Webdesign eine schlechte Praxis sind, die einzige Option für HTML-E-Mails zu sein.

Die Grundlagen sind:

  • Habe absolute Pfade für Bilder (zB https://stackoverflow.com/random-image.png )
  • Verwenden Sie Tabellen für das Layout (hätte nie gedacht, dass ich das empfehlen würde!)
  • Verwenden Sie Inline-Stile (und Old-School-CSS, höchstens 2.1, Box-Shadow wird zum Beispiel nicht funktionieren;))

Testen Sie einfach so viele E-Mail-Clients, wie Sie benötigen, oder verwenden Sie Litmus, wie oben vorgeschlagen! (Dank an Jim)

EDIT:

Mail-Schimpansen haben großartige Arbeit geleistet, indem sie dieses Tool der Community zur Verfügung gestellt haben.

Es wendet Ihre CSS-Klassen für Sie inline auf Ihre HTML-Elemente an!

35
SamMullins

Stellen Sie sicher, dass Sie zusätzlich zu den hier veröffentlichten Antworten den folgenden Artikel lesen:

http://24ways.org/2009/rock-solid-html-emails

9
Stephan Muller

Die Ressource, auf die ich mich immer wieder mit HTML-E-Mails beschäftige, ist CampaignMonitors CSS-Leitfaden .

Da sich ihr Geschäft ausschließlich auf die Zustellung von E-Mails konzentriert, kennen sie sich so gut aus wie alle anderen

6
Gareth

'Fraid so. Ich würde eine HTML-Seite mit einem Stylesheet erstellen und dann jQuery verwenden, um das Stylesheet auf die Stilattr jedes Elements anzuwenden. Etwas wie das:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Kopieren Sie dann das DOM und verwenden Sie das in der E-Mail.

5
Nathan MacInnes

Ich finde, dass die Bildzuordnung ziemlich gut funktioniert. Wenn Sie Kopf- oder Fußzeilen haben, die Bilder sind, stellen Sie sicher, dass Sie bgcolor = "Füllen Sie die Lücke aus" anwenden, da Outlook das Bild in den meisten Fällen nicht lädt und Sie eine transparente Kopfzeile erhalten. Wenn Sie mindestens eine Farbe festlegen, die dem Gesamtgefühl der E-Mail entspricht, ist dies für den Benutzer weniger schockierend. Versuchen Sie niemals, Styling-Folien zu verwenden. Oder überhaupt CSS! Vermeide es einfach.

Je nachdem, ob Sie Inhalte aus einem Word- oder einem freigegebenen Google-Dokument kopieren, müssen Sie (Befehlstaste + F) alle (') und (") suchen und sie in Ihrer Bearbeitungssoftware (insbesondere Dreemweaver) ersetzen, da sie als Code angezeigt werden und es ist einfach nicht gut.

ALT ist dein bester Freund. Verwenden Sie das ALT-Tag, um allen Ihren Bildern Text hinzuzufügen. Weil die Chancen stehen, werden sie nicht richtig geladen. Und dieser ALT-Text bringt die Leute dazu, auf die Schaltfläche (siehe Bilder) zu klicken. Definieren Sie auch die Breite und Höhe Ihrer Bilder und machen Sie die Grenze zu 0, damit Sie keine seltsamen Linien um Ihr Bild sehen.

Bearbeiten Sie alle Bilder in Photoshop mit einer 15-Pixel-Grenze auf jeder Seite (machen Sie den Hintergrund transparent und speichern Sie ihn als PNG 24). Manchmal lesen die E-Mail-Clients keine Füllstile, die Sie auf die Bilder anwenden, so dass seltsame Formatierungen vermieden werden!

Auch ich fand die Linie unter Verbindungen besonders ärgerlich, also wenn Sie <style = "text-decoration: none; color: #whatever color you want here!" > es wird die Linie entfernen und Ihnen das gewünschte Aussehen geben.

Es gibt eine Menge Dinge, die das gesamte Erscheinungsbild beeinträchtigen können.

1
Stephen