Best Practices für das Styling von HTML-E-Mails [geschlossen]

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 Styling von HTML-E-Mails?

Campaign Monitor verfügt über eine hervorragende Support-Matrix, in der detailliert beschrieben wird, was unterstützt wird und was nicht.

Sie können einen Dienst wie Litmus verwenden, um anzuzeigen, wie eine E-Mail auf mehreren Clients angezeigt wird und ob sie von Filtern usw. erfasst werden.

Ich habe den HTML-E-Mail-Kampf schon einmal geführt. Hier sind einige meiner Tipps zum Styling für maximale Kompatibilität zwischen E-Mail-Clients.

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

• Verwenden und missbrauchen Sie Tabellen gegen Ihr besseres Urteilsvermögen . <div>s schneidet es einfach nicht (besonders in Outlook).

• Verwenden Sie keine Hintergrundbilder , sie sind fleckig und nerven Sie.

• Denken Sie daran, dass einige E-Mail-Clients getippte Hyperlinks automatisch in Links umwandeln (wenn Sie sie nicht selbst verankern <a>). Dies kann manchmal negative Auswirkungen haben (z. B. wenn Sie jedem der Hyperlinks einen Stil hinzufügen, um eine andere Farbe anzuzeigen).

• Seien Sie vorsichtig, wenn Sie einen tatsächlichen Link mit etwas anderem verknüpfen. Geben Sie zum Beispiel nicht ein http://www.google.comund verknüpfen Sie es dann mit https://gmail.com/. Einige Clients kennzeichnen die Nachricht als Spam oder Junk.

• Speichern Sie Ihre Bilder in möglichst wenigen Farben , um Größe zu sparen.

• Wenn möglich, binden Sie Ihre Bilder in Ihre E-Mail ein. Die E-Mail muss nicht an einen externen Webserver gesendet werden, um sie herunterzuladen, und sie werden nicht als Anhänge zur E-Mail angezeigt.

Und zum Schluss testen, testen, testen ! Jeder E-Mail-Client macht die Dinge anders als ein Browser.

Mail-Schimpansen haben einen schönen Artikel darüber, was sie nicht tun sollen. (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 und die für das Webdesign schlecht sind, die einzige Option für HTML-E-Mails zu sein.

Die Grundlagen sind:

• Absolute Pfade für Bilder haben (z. B. 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 auch CSS der alten Schule, höchstens 2.1, Box-Shadow funktioniert zum Beispiel nicht;))

Testen Sie einfach so viele E-Mail-Clients, wie Sie in die Hände bekommen können, 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!

Lesen Sie zusätzlich zu den hier veröffentlichten Antworten diesen Artikel:

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

Die Ressource, auf die ich immer wieder zu HTML-E-Mails zurückgreife, ist der CSS-Leitfaden von CampaignMonitor .

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

'Fraid so. Ich würde eine HTML-Seite mit einem Stylesheet erstellen und dann mit jQuery das Stylesheet auf den Stilattr jedes Elements anwenden. 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 es in der E-Mail.

Ich finde, dass Image Mapping 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 zumindest eine Farbe festlegen, die mit dem Gesamtgefühl der E-Mail übereinstimmt, ist dies für den Benutzer weniger schockierend. Versuchen Sie niemals, Stylingblätter zu verwenden. Oder überhaupt CSS! Vermeiden Sie es einfach.

Je nachdem, ob Sie Inhalte aus einem Wort oder einem freigegebenen Google Doc kopieren, müssen Sie (Befehl + F) alle (') und (") suchen und 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 setzen Sie die Grenze auf 0, damit Sie keine seltsamen Linien um Ihr Bild erhalten.

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

Außerdem fand ich die Zeile unter Links besonders ärgerlich, wenn Sie <style = "Textdekoration: keine; Farbe: # welche Farbe auch immer Sie hier wollen!" > Dadurch wird die Linie entfernt und Sie erhalten das gewünschte Aussehen.

Es gibt eine Menge, die das gesamte Erscheinungsbild wirklich durcheinander bringen kann.