vorlage Best Practices für die Gestaltung von HTML-E-Mails




html to email converter (6)

Mail-Schimpansen haben einen schönen Artikel darüber, was nicht zu tun ist. (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 all die Dinge, die Sie gelernt haben, die schlechte Praxis für Web-Design sind, die einzige Option für HTML-E-Mail zu sein.

Die Grundlagen sind:

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

Testen Sie so viele E-Mail-Clients, wie Sie bekommen können, oder verwenden Sie Litmus als jemand, der oben vorgeschlagen wurde! (Kredit 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 auf Ihre HTML-Elemente inline für Sie an!

Ich entwerfe eine HTML-Vorlage für einen E-Mail-Newsletter. Ich habe gelernt, dass viele E-Mail-Clients verknüpfte Stylesheets ignorieren und viele andere (einschließlich Google Mail) CSS-Blockdeklarationen ignorieren. Sind Inline-Style-Attribute meine einzige Wahl? Was sind die besten Praktiken zum Formatieren von HTML-E-Mails?


»Ich fürchte es. Ich würde eine HTML-Seite mit einem Stylesheet erstellen und dann mit jQuery das Stylesheet auf die Stilattribute 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 dieses in der E-Mail.


Die Ressource, über die ich immer wieder zu HTML-E-Mails komme, ist der CSS-Guide von CampaignMonitor .

Da ihr Geschäft ausschließlich auf die E-Mail-Zustellung ausgerichtet ist, kennen sie ihre Inhalte genau so gut wie jeder andere


Ich habe den HTML-Email-Kampf zuvor bekämpft. Hier sind einige meiner Tipps zum Thema Styling für maximale Kompatibilität zwischen E-Mail-Clients.

  • Inline-Stile sind dein bester Freund. Verknüpfen Sie Stylesheets absolut nicht und verwenden Sie kein <style> -Tag (z. B. entfernt Google Tag das Tag und den gesamten Inhalt).

  • Gegen dein besseres Urteil, benutze und missbrauche Tabellen . <div> s wird es gerade nicht schneiden (besonders in Outlook).

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

  • Denken Sie daran, dass einige E-Mail-Clients automatisch typisierte Hyperlinks in Links umwandeln (wenn Sie sie nicht selbst verankern). Dies kann manchmal negative Auswirkungen haben (sagen Sie, wenn Sie einen Stil auf jeden der Hyperlinks setzen, um eine andere Farbe zu sehen).

  • Seien Sie vorsichtig Hyperlinks zu einem tatsächlichen Link mit etwas anderem. Geben Sie beispielsweise http://www.google.com und verknüpfen Sie sie dann mit https://gmail.com/ . Einige Clients kennzeichnen die Nachricht als Spam oder Junk.

  • Speichern Sie Ihre Bilder in so wenigen Farben wie möglich , um an Größe zu sparen.

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

Und zu guter Letzt, testen, testen, testen ! Jeder E-Mail-Client macht Dinge anders als ein Browser tun würde.


Ich finde, dass Image-Mapping ziemlich gut funktioniert. Wenn Sie Kopf- oder Fußzeilen haben, die Bilder sind, stellen Sie sicher, dass Sie ein bgcolor = "füllen Sie das leere Feld" anwenden, da Outlook das Bild in den meisten Fällen nicht lädt und Sie einen transparenten Header erhalten. Wenn Sie zumindest eine Farbe angeben, die mit dem Gesamteindruck der E-Mail arbeitet, ist dies für den Benutzer weniger schockierend. Versuchen Sie niemals Styling-Blätter zu verwenden. Oder CSS überhaupt! Vermeide es einfach.

Abhängig davon, ob du Inhalte aus einem Wort oder aus einem geteilten Google Doc kopierst, vergewissere dich (Befehl + F) alle (') und (") und ersetze sie in deiner Schnittsoftware (speziell Dreemweaver), 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 Chancen sind, werden sie nicht richtig laden. Und dieser ALT-Text bringt Leute dazu, auf die Schaltfläche (siehe Bilder) zu klicken. Definieren Sie auch Ihre Bilder Breite, Höhe und machen Sie die Grenze 0, so dass Sie keine seltsamen Linien um Ihr Bild bekommen.

Betrachten Sie alle Bilder in Photoshop mit einem 15px Boarder auf jeder Seite (Hintergrund transparent machen und als PNG 24 speichern) des Bildes. Manchmal lesen die E-Mail-Clients keine Füllstile, die Sie auf die Bilder anwenden, so dass keine seltsamen Formatierungen auftreten.

Auch finde ich die Zeile unter Links besonders nervig, wenn man also <style = "text-decoration: none; color: #jewelche Farbe will man hier!" > Es wird die Linie entfernen und Ihnen das gewünschte Aussehen geben.

Es gibt eine Menge, die wirklich mit dem Aussehen und dem Gefühl verderben kann.


Campaign Monitor verfügt über eine hervorragende Support-Matrix, die detailliert beschreibt, was unterstützt wird und was nicht zwischen verschiedenen Mail-Clients ist.

Sie können einen Dienst wie Litmus zu sehen, wie eine E-Mail über mehrere Clients hinweg angezeigt wird und ob sie von Filtern usw. abgefangen werden.







email