So codieren Sie HTML -E -Mail -Newsletter und E -Mail -Vorlagen

Dieser Artikel wurde erstmals 2006 veröffentlicht und dann 2015 aktualisiert.

HTML -E -Mail -Newsletter sind seitdem im Jahr 2006 einen langen Weg zurückgelegt. Die HTML -E -Mail ist nach wie vor ein sehr erfolgreiches Kommunikationsmedium für Verlage und Leser. Verlage können die Tarife für E -Mail -Öffnungen, Weiterleitungen und Klicks verfolgen und das Leserinteresse an Produkten und Themen messen. Die Leser erhalten Informationen, die wie eine Webseite aufgelegt sind, auf eine Weise, die visuell ansprechender ist und viel einfacher zu scannen und zu navigieren ist, als nur E -Mail.

Codierung einer HTML -E -Mail ist ein unterhaltsames, praktisches Problem für Programmierer, die sie lösen können. Im Gegensatz zum Codieren einer Webseite müssen HTML -E -Mails auf alter E -Mail -Software gut angezeigt werden - denken Sie an Outlook oder Mac -Mails sowie an Telefon- und Tablet -Bildschirme. Ich zeige Ihnen, wie Sie HTML -E -Mails erstellen, die auf jedem Gerät gut angezeigt werden, sowie Ideen, um Ihren aktuellen HTML -E -Mail -Code so anzupassen, dass sie auf Telefonen und Tablets angezeigt werden.

Key Takeaways

• Verwenden Sie HTML -Tabellen für das Layout -Design in E -Mail -Newslettern, um die Kompatibilität für verschiedene E -Mail -Clients zu gewährleisten, da die Tabellen konsequenter unterstützt werden als CSS für die Positionierung und Strukturierung von Inhalten.
• Inline -CSS direkt in Ihr HTML anwenden, um Elemente wie Schriftarten und Farben zu stylen, da viele E -Mail -Clients keine externen oder eingebetteten CSS -Stylesheets unterstützen.
• E-Mail-Newsletter von E-Mails mit einem mobilen Ansatz mit reaktionsschnellen Techniken wie Medienabfragen, um die Besichtigung von Telefonen und Tablets zu berücksichtigen, trotz unterschiedlicher Unterstützung über E-Mail-Kunden.
• HTML -E -Mails ausgiebig über mehrere E -Mail -Clients und -geräte testen, um einheitliches Erscheinungsbild und Funktionen zu gewährleisten, wobei Tools wie Kampagnenmonitor und MailChimp zum Testen verwendet werden.
• Vermeiden Sie die Verwendung von JavaScript und komplexen CSS wie Float und Position, da diese häufig von gemeinsamen E -Mail -Clients ausgestattet oder nicht unterstützt werden, was zu potenziellen Layoutproblemen führt.
• Fügen Sie Fallbacks für Bilder und Schriftarten ein, um die Kompatibilität zu verbessern und sicherzustellen, dass der Newsletter auch dann zugänglich ist, wenn bestimmte Elemente vom E -Mail -Client nicht gerendert werden können.
• Halten Sie das Design einfach und den Inhalt klar, um Rendering -Probleme zu vermeiden und die Lesbarkeit und Effektivität Ihrer E -Mail -Newsletter zu verbessern.

HTML -E -Mail -Grundlagen

Der größte Schmerz bei der Codierung von HTML-E-Mails besteht darin, dass so viele verschiedene Softwaretools zur Verfügung stehen, um E-Mails von Desktop-Software wie Eudora, Outlook, AOL, Thunderbird und Lotus-Notizen bis hin zu webbasierten E-Mail-Diensten wie Yahoo! , Hotmail und Google Mail an E -Mail -Apps auf Telefonen und Tablets. Die Software, mit der HTML für jedes E -Mail -Software -Tool rendert, bestimmt, was HTML- und CSS -Code funktioniert und nicht funktioniert.

Wenn Sie der Meinung sind, dass es schwierig ist, die Querbrowser-Kompatibilität Ihrer Websites zu gewährleisten, sollten Sie sich bewusst, dass es sich um ein ganz neues Spiel handelt. Jede dieser E-Mail-Softwaretools kann dieselbe E-Mail auf ganz unterschiedliche Weise anzeigen. Und selbst wenn diese Tools eine HTML -E -Mail ordnungsgemäß anzeigen, wird beispielsweise die Breiten, bei denen die Leser ihre Fenster beim Lesen von E -Mails im Lesen von E -Mails die Leser leiten, noch schwieriger angezeigt.

.

Ob Sie Ihre HTML -E -Mail von Hand (meine persönliche Präferenz) codieren oder eine vorhandene Vorlage verwenden, gibt es zwei grundlegende Konzepte, die Sie beim Erstellen von HTML -E -Mails beachten können:

1. Verwenden Sie HTML -Tabellen, um das Designlayout und einige Präsentationen zu steuern. Sie können es gewohnt sein, reine CSS -Layouts für Ihre Webseiten zu verwenden, aber dieser Ansatz hält sich einfach nicht in einer E -Mail -Umgebung an.
2. Verwenden Sie Inline -CSS, um andere Präsentationselemente in Ihrer E -Mail zu steuern, z. B. Hintergrundfarben und Schriftarten.

Der schnellste und einfachste Weg, um zu sehen, wie HTML -Tabellen und Inline -CSS in einer HTML -E -Mail interagieren, besteht darin, einige Vorlagen von Kampagnenmonitor und MailChimp zu herunterladen. Wenn Sie eine dieser Vorlagen öffnen, werden Sie einige Dinge feststellen, die wir später ausführlicher besprechen:

• CSS -Stildeklarationen erscheinen unterhalb des Body -Tags, nicht zwischen den Kopf -Tags.
• Es wird keine CSS-Shorthand verwendet: Anstatt die Abkürzungsstilregel zu verwenden: 12px/16px Arial, Helvetica, sollten Sie stattdessen diese Abkürzung in seine individuellen Eigenschaften unterteilen: Schriftfamilie, Schriftgröße und Zeilenhöhe.
• Spans und Divs werden sparsam verwendet, um spezifische Effekte zu erzielen, während HTML -Tabellen den Großteil des Layouts erledigen.
• CSS -Stildeklarationen sind sehr einfach und verwenden keine CSS -Dateien.

Mein Code HTML -E -Mail -Site hat auch tatsächliche HTML -E -Mails, die ich heruntergeladen und formatiert habe, damit Sie studieren können, wie andere E -Mails erstellt haben.

Schritt 1: Verwenden Sie HTML -Tabellen für Layout

Das ist richtig: Die Tabellen sind zurück, große Zeit! Webstandards sind möglicherweise zur Norm für die Codierung von Seiten für die Anzeige in Webbrowsern geworden, aber dies ist nicht das Web, Baby. Ein paar E-Mail-Software-Clients stehen im Hinblick auf den CSS-Support leicht Jahre hinter dem Acht-Ball. Dies bedeutet, dass wir darauf zurückgreifen müssen, Tabellen für das Layout zu verwenden, wenn wir wirklich möchten, dass unsere Newsletter für jeden Leser konsequent angezeigt werden (siehe die Leseliste am Ende von Dieser Artikel für einige hervorragende Ressourcen zum CSS -Support bei Mail -Kunden).

Stellen Sie also Ihre Standards-konformen Best Practices und Lean-Markup-Fähigkeiten beiseite: Wir sind dabei, uns die Hände schmutzig zu machen!

Der erste Schritt beim Erstellen einer HTML -E -Mail besteht darin, zu entscheiden, welche Art von Layout Sie verwenden möchten. Bei Newslettern funktionieren Einzelkolumnen und zweispaltige Layouts am besten, da sie das natürliche Chaos steuern, das entsteht, wenn eine große Menge an Inhalten wie eine E-Mail in einen so kleinen Raum geschoben wird. Ein einzelne Spalten -E -Mail -Designs erleichtert auch das gute Anzeigen auf Telefonen und Tablets.

Ein einspaltiges Layout besteht typischerweise aus:

1. Ein Header, das ein Logo und einige (oder alle) der Navigationslinks von der übergeordneten Website enthält, um das Branding zu verstärken und den Besuchern der Website zu vertraut zu machen
2. Intra-email-Links zu Geschichten, die in der E-Mail weiter unten von den Geschichten und Inhalten
erscheinen,
Eine Fußzeile am Ende der E -Mail, die häufig Links enthält, die mit der oberen Navigation identisch sind, sowie Anweisungen für die Abmeldung

Zwei-Spalten-E-Mails verwenden auch eine Header und Fußzeile. Wie bei einer zweispaltigen Webseite verwenden sie normalerweise eine schmale Spalte für die Hausfunktionen und Links zu weiteren Informationen, während die breitere Spalte den Körperinhalt der E-Mail enthält. Um ein zweispaltiges E-Mail-Layout zu erhalten, das auf einem Telefon oder Tablet gut angezeigt wird

Werbe -E -Mails folgen ähnliche Regeln, enthalten jedoch viel weniger inhaltlich und links. Sie enthalten häufig ein oder zwei Nachrichten und verwenden manchmal ein großes Bild mit einem kleinen erklärenden Text und einigen Links unter dem Bild.

Alle diese E -Mail -Layoutmöglichkeiten können problemlos erstellt werden, wobei HTML -Tabellen verwendet werden, um den Speicherplatz in Zeilen und Spalten aufzuteilen. In der Tat ist die Verwendung von HTML -Tabellen die einzige Möglichkeit, ein Layout zu erreichen, das über verschiedene Mail -Clients konsequent rendert.

Unabhängig davon, wie Ihre E -Mail gestaltet ist, ist es wichtig, sich an den wichtigsten Inhalt zu erinnern, der an oder in der Nähe der E -Mail -Adresse angezeigt wird. Daher ist er sofort sichtbar, wenn ein Leser Ihre E -Mail öffnet. Die obere links von einer E -Mail -Nachricht ist oft der erste Platz, an dem die Leute nach dem Öffnen einer E -Mail nachsehen.

Dies ist der Ansatz, mit dem ich HTML -E -Mails erstelle:

• Erstellen Sie für ein zweispaltiges Layout jeweils eine Tabelle für den Header, die beiden Center-Inhaltsspalten und die Fußzeile-das sind insgesamt drei Tabellen. Wickeln Sie diese Tabellen in einen anderen Container -Tisch. Verwenden Sie den gleichen Ansatz für Einspalten-Layouts, geben Sie jedoch die Spalte in der Inhaltstabelle an. Dieser Ansatz ist besonders geeignet, wenn das Design Ihrer E -Mail Bilder enthält, die über mehreren Tabellenzellen aufgebrochen sind. Andernfalls ist eine einzelne Tabelle mit TD -Zeilen für den Header (mit colspan = "2", wenn das Design zwei Spalten verwendet), Inhalte und Fußzeile in allen außer Lotus Notes -E -Mail -Software gut anzeigen.
• Verwenden Sie die Attribute in der Tabelle und den TD -Tags, um die Anzeige der Tabelle zu steuern. Beispielsweise einstellen border = "0", valign = "top", align = "links" (oder in der Mitte, wenn dies dem Design passt), Cellpadding = "0", Cellspacing = "0" usw. Dies hilft älteren E -Mail -Clients in erster Linie, die E -Mail (kaum) akzeptable Weise anzuzeigen.
• Auch wenn das Design Ihrer E -Mail keine Grenze um Ihren Tisch enthält, finden Sie es möglicherweise hilfreich bei der Entwicklung, um Border = "1" zu setzen, um beim Debuggen von Problemen zu helfen und TD -Tags. Ändern Sie es zurück in Border = "0" zum Testen und Produktion.

Während dieser Ansatz Puristen, die es vorziehen, mit den neuesten Standards zu codieren, beleidigen, ist dies zu diesem Zeitpunkt der einzige praktikable Ansatz. Die Tatsache, dass wir Tabellen für das Layout verwenden, bedeutet jedoch nicht, dass wir vollständig auf alte Schulmethoden zurückgreifen müssen. Unabhängig davon, wie schlecht Lotus -Notizen HTML -E -Mail anzeigen, sollten Sie niemals die Verwendung des Schriftarts angeben müssen. Und während die HTML -Rendering -Engine von Outlook 2007 weniger als perfekt ist, zeigt sie grundlegende HTML -Tabellen gut an.

Es gibt jedoch einige Einschränkungen; Schauen wir uns als nächstes den Styling unseres Textes an.

Schritt 2: Fügen Sie CSS -Stile

hinzu

Habe ich gesagt, dass CSS -Support schlecht in Mail -Kunden war? Nun, es ist es. Sie können (und sollten) jedoch immer noch CSS für die Stile in Ihrer E -Mail verwenden, sobald Ihr verschachteltes Tischlayout vorhanden ist. Es gibt nur ein paar Dinge, auf die man achten muss. Hier sind die Schritte, die ich verwende.

Verwenden Sie zunächst Inline -Stile, um alle Ihre Stilinformationen zu speichern, wie hier gezeigt:

<span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>

Dies umfasst Tabelle, TD, P, A und so weiter.

Verwenden Sie die Erklärung im CSS -Stil nicht im HTML -Head -Tag, wie Sie es beim Autorieren von Webseiten vielleicht auch sein mögen. Platzieren Sie stattdessen Ihre Stilerklärung direkt unter das Body -Tag - Google Mail sucht jedoch nach einer Stildeklaration in der E -Mail und löscht sie (hilfreich). Verwenden Sie auch nicht das Link -Element, um ein externes Stilblatt zu verweisen: Google Mail, Hotmail und andere E -Mail -Software ignorieren, ändern oder löschen diese externen Verweise auf ein Stylesheet.

Für Ihre Containertabelle - diejenige, in der die Tabellen der Header, Inhalte und Fußzeile untergebracht sind - stellen Sie die Tischbreite auf 98%ein. Es stellt sich heraus, dass Yahoo! Mail benötigt dieses 1% ige Kissen auf beiden Seiten, um die E -Mail ordnungsgemäß anzuzeigen. Wenn Seitenrinnen für das Design Ihrer E -Mail von entscheidender Bedeutung sind, setzen Sie die Breite auf 95% oder sogar 90%, um potenzielle Probleme zu vermeiden. Natürlich sollten die Tabellen in der Containertabelle auf 100%eingestellt werden.

Geben Sie allgemeine Informationen zur Schriftstil in die Tabelle TD, die dem Inhalt am nächsten liegt. Ja, dies kann zu repetitiven Stildeklarationen in mehreren TD -Zellen führen. Fügen Sie Schriftstil -Definitionen in die Überschrift (z. B. H1, H2), P oder A nur bei Bedarf ein.

Verwenden Sie Divs sparsam, um kleine Inhalte zu schweben und nach rechts oder links in der TD -Zelle einer Tabelle zu verbinden. Zum einen scheint Google Mail die CSS -Schwimmer -Erklärung zu ignorieren (dennoch yahoo! und Hotmail sind damit einverstanden). Manchmal ist es besser, ein komplexeres Tischlayout zu codieren, als sich auf die Float -Erklärung zu verlassen. Oder bitten Sie Ihren Designer, den schwebenden Inhalt stattdessen in die Spalte schmaler Seiten zu stecken, da es allzu einfach ist, eine E -Mail zu überladen. Die flockige Unterstützung für Floats ist ein Problem, das dazu führen kann, dass ein E -Mail -Design überarbeitet wird.

Während Divs kaum nützlich zu sein scheinen, scheinen die Spannweiten fast jedes Mal zu funktionieren, da sie Inline -Elemente sind. In einigen Fällen können Spannweiten für mehr als nur Färben oder Größentext verwendet werden: Sie können verwendet werden, um den Text über oder unter dem Inhalt zu positionieren.

Beachten Sie, dass einige E -Mail -Lieferdienste Stildefinitionen auspacken, um sie expliziter und daher durch alle E -Mail -Software lesbarer zu machen. Zum Beispiel der CSS ShortHand Style = "Margin: 10px 5px 10px 0;" kann in die zuvor gezeigte Erklärung im langen Stil erweitert werden. Testen Sie jede E -Mail und sehen Sie, was mit dem E -Mail -Code passiert. Beginnen Sie mit CSS -Shorthand, da es im schlimmsten Fall gut mit allen E -Mail -Software funktioniert.

Wenn Sie die E -Mail -Vorlagen von Campaign Monitor und MailChimp heruntergeladen und untersucht haben, werden Sie feststellen, dass sie die Containertabelle so behandeln, als wäre es das HTML -Körper -Tag. Das Kampagnenmonitor -Team bezeichnet diese Tabelle als „BodyIposter“, was eine großartige Möglichkeit ist, über den Rahmen- oder Wrapper -Tisch nachzudenken. Aus CSS -Sicht erledigt die Containertabelle das, was das HTML -Körperelement tun würde, wenn Dienste wie Google Mail das Body -Tag nicht deaktiviert oder ignorieren.

Schritt 3: Best Practices

übernehmen

Zu wissen, dass Sie gültige HTML -E -Mails mit den von mir vorgeschlagenen Richtlinien erstellt haben, die nur Teil der Lösung sind - gibt es mehrere Best Practices, die Sie befolgen sollten, um sicherzustellen, dass Ihre E -Mail gut empfangen wird.

Der nächste Schritt besteht darin, Ihre HTML -E -Mail in verschiedenen E -Mail -Clients zu testen. Oft identifiziert dies Probleme, die Problemumgehungen erfordern.

Die ersten Testwerkzeuge sind die Webbrowser Firefox und Internet Explorer. Wenn die E -Mail in beiden Browsern gut oder perfekt angezeigt wird, besteht eine gute Wahrscheinlichkeit, dass die E -Mail in Outlook, Yahoo!, Google Mail und andere Dienste nur geringfügige Probleme aufzeigen. Wenn möglich, würde ich auch empfehlen, Ihre E -Mail in Internet Explorer 6 zu testen. Dies sollte Ihnen einen guten Hinweis darauf geben, wie Ihre E -Mail in Outlook 2003 liefert Explorer 6). Um zu testen, wie E -Mails auf einem iPhone oder iPad aussehen, überprüfen Sie Ihre HTML -E -Mail in einem Safari -Webbrowser.

Sobald die E -Mail in diesen beiden Webbrowsern gut angezeigt wird, verwenden Sie einen E -Mail -Zustellungsdienst, um die E -Mail an eine Reihe von Test -E -Mail -Konten zu senden. Im Idealfall sollte dies Konten mit dem Yahoo!, Hotmail und Google Mail -Diensten enthalten. Die von Ihnen verwendeten Testkonten sollten natürlich von den Domain -Namen in der Mailingliste der Personen festgelegt werden, die die E -Mail erhalten. Wenn beispielsweise keine AOL -Abonnenten auf dieser Liste sind, ist es wahrscheinlich Zeit- und Geldverschwendung, ein AOL -E -Mail -Konto einzurichten und mit zu testen.

Hier sind die häufigsten Code -Optimierungen, die ich in dieser Testerphase für notwendig empfunden habe:

Manchmal ist ein Schalter von prozentualen Breiten zu festen Breiten erforderlich. Dies ist zwar nicht ideal - weil die Leser ihre E -Mail -Fenster beim Lesen ändern können und ändern können, ist die Verwendung einer festen Breite manchmal die einzige Möglichkeit, in mehreren E -Mail -Clients eine ordnungsgemäße Layout anzuzeigen.
Wenn es ein Abstandsproblem mit den Spalten im E -Mail -Design gibt, optimieren Sie zuerst die Cellpadding- und Zellspaziermordes der HTML -Tabellen. Wenn das nicht funktioniert, wenden Sie die CSS -Margin- und Padding -Attribute an. HTML -Abstand funktioniert besser mit älterer E -Mail -Software.
Bildverschiebung kann auftreten, wenn eine TD -Zelle direkt unter einem IMG -Tag geschlossen ist. Dies ist ein altes HTML -Problem. Das Einlegen des -Tags direkt danach (in derselben Zeile wie) Das IMG-Tag beseitigt die nervige und mystifizierende 1-Pixel-Lücke.

Zusätzlich werden die folgenden Best Practices empfohlen:

• Vermeiden Sie die Verwendung von JavaScript. Die meisten E -Mail -Software deaktivieren sie sowieso.
• Wenn ein Bild in mehreren HTML -Tabellenzellen geschnitten und verteilt wird, testen Sie die E -Mail mit vielen Testkonten. Manchmal sieht es in Ausblick vielleicht großartig aus, wird aber von einem oder mehreren Pixeln in Hotmail und anderen Diensten verschoben. Erwägen Sie auch, das Bild zu einem Hintergrundbild in einer neuen HTML -Tabelle zu machen, in der alle Tabellenzeilen und Spalten umgeben, in denen Teile Ihres Hintergrundbildes angezeigt werden. Dies erzielt häufig den gleichen Effekt wie das Schneiden eines Bildes, verwendet jedoch weniger Code und kann bessere Ergebnisse liefern (siehe unten). Beachten Sie, dass Outlook 2007 keine Hintergrundbilder anzeigt. Stellen Sie sicher, dass Sie Ihren E -Mail -Code mit Ihrer Ziel -E -Mail -Software testen.
• Verwenden Sie für Hintergrundbilder das Hintergrundattribut der Tabelle, anstatt CSS zu verwenden. Dies funktioniert konsequenter über E -Mail -Software als andere potenzielle Lösungen.
• Speichern Sie die E -Mail -Bilder auf einem Webserver - vorzugsweise in einem Ordner, der von den Bildern Ihrer Website getrennt ist (z. B. in einem Ordner namens /Bilder /E -Mail), und löschen Sie sie nicht. Einige Leute öffnen sich Wochen oder Monate später E -Mails, so wie Menschen Lesezeichen verwenden, um zu Websites zurückzukehren.
• Stellen Sie sicher, dass alle Ihre Bilder die Attribute ALT, Höhe und Breite verwenden. Das Festlegen von Werten für diese Attribute verbessert die Ergebnisse in Google Mail sowie die Verwaltung Ihres Layouts, wenn ein Leser seine Bilder ausgeschaltet hat. Beachten Sie jedoch, dass Outlook 2007 das Alt -Attribut nicht erkennt.
• Verwenden Sie das Attribut target = "_ leer" für die A -Tags, damit Personen, die mit Webmail -Diensten lesen
Während ein 1 × 1-Pixel-Bild zum Erstellen eines genauen E-Mail-Layouts verwendet werden kann, verwenden Spammer häufig 1 × 1-Pixel-Bilder, um festzustellen, ob ihre E-Mail geöffnet wurde. Die Verwendung dieser Praxis erhöht die Wahrscheinlichkeit, dass Ihre E -Mail als Spam eingestuft wird.
Vermeiden Sie in ähnlicher Weise in der E -Mail ein großes Bild „über der Falte“. Dies ist eine weitere klassische Spammer -Praxis und kann dazu führen, dass Ihre E -Mail als Spam interpretiert wird.

Es ist wichtig, sicherzustellen, dass Ihre HTML -E -Mail mit ausgeschalteten Bildern akzeptabel angezeigt wird. Viele E -Mail -Anwendungen setzen die Anzeige von Bildern standardmäßig auf "Aus". Wenn Sie beispielsweise ein Hintergrundbild verwenden, um eine Hintergrundfarbe mit einer weißen Schriftfarbe darüber bereitzustellen, stellen Sie sicher, dass die Standard -Hintergrundfarbe für diesen Teil der HTML -Tabelle dunkel und nicht weiß ist.

Wenn ich teste, wie eine E -Mail mit Bildern ausgeschaltet wird, verwende ich normalerweise meinen Texteditor, um das SRC -Attribut jedes Bildes durch eine eindeutige Kombination von Zeichen wie „XSRCX“ zu ersetzen und sie nach dem Test wieder zurückzukehren.

Sobald die HTML -E -Mail so optimiert wurde, dass sie in Ihren Test -E -Mail -Konten gut angezeigt wird, besteht der nächste Schritt darin, eine Checkliste zu durchlaufen. Überprüfen Sie beispielsweise Folgendes:

• Zeigt die From -Adresse ordnungsgemäß an (als Name, nicht als nackte E -Mail -Adresse)?
• Ist die Betreffzeile korrekt?
• Sind die Kontaktinformationen korrekt und visuell offensichtlich?
• Zeigt die Oberseite des E -Mail den Text an, „Sie haben diese E -Mail erhalten, weil… Anweisungen am Ende dieser E -Mail stehen.“?
• Enthält Ihre E -Mail -E -Mail -Formulierung die Leser, Ihre von der Adresse zu ihrem E -Mail -Adressbuch hinzuzufügen?
• Enthält die Spitze Ihrer E -Mail einen Link zur Webversion der Nachricht?

Viele E -Mail -Zustellungsdienste enthalten die Möglichkeit, zu sehen, wie Ihre HTML -E -Mail in einer Vielzahl von E -Mail -Software angezeigt wird. Es hilft Ihnen, vor dem Senden zu ermitteln, welche Code -Optimierungen benötigt werden.

Schritt 4: Code für Google Mail, Lotus Notes und Outlook 2007

Google Mail, Lotus Notes und Outlook 2007 stellen ihre eigenen einzigartigen Codierungsherausforderungen vor. Outlook 2007, ob Sie es glauben oder nicht, hat CSS deutlich weniger Unterstützung als frühere Versionen von Outlook!

Die mangelnde Unterstützung von Google Mail ist etwas verzeihlicher - da die Bewerbung in einem Browser den Inhalt der angezeigten E -Mails nicht steuern kann. Infolgedessen mussten die Ingenieure von Google Schritte unternehmen, um sicherzustellen, dass ihre Bewerbung unabhängig von der Qualität des HTML oder CSS, in dem E -Mails geschrieben werden, ordnungsgemäß angezeigt werden.

Infolgedessen wirkt Google Mail wie ein Artefakt der frühen neunziger Jahre, als Webstandards primitiv waren. Es erfordert einige Arbeit, aber es ist möglich, eine Google -Mail -Seite zu öffnen und zu sehen, wie kompliziert ihr Ansatz zur Rendern von HTML -E -Mails tatsächlich ist.

Zum einen löscht Google Mail die CSS -Stile, die zwischen allen Stil -Tags enthalten sind, unabhängig davon, wo sie in der E -Mail angezeigt werden. Und in HTML -Tabellen angezeigte Schriftarten - die einzige Alternative zur Verwendung von Stilen - haben die seltsame Angewohnheit, größer als beabsichtigt zu erscheinen, unabhängig davon, wie die HTML -E -Mail strukturiert ist.

Die gute Nachricht ist jedoch, dass Ihr HTML -E -Mail -Code in den meisten, wenn nicht allen E -Mail -Clients wahrscheinlich gut angezeigt wird, wenn Sie codieren, um die Kuriositäten dieser drei E -Mail -Anwendungen zu berücksichtigen. Hier sind einige Techniken, die in Google Mail und anderen älteren E -Mail -Software gut zu funktionieren scheinen:

• Definieren Sie die Hintergrundfarbe in einer TD -Zelle mit dem BGColor -Attribut, nicht im CSS -Stil.
• Verwenden Sie, wie oben erwähnt, das Hintergrundattribut in der TD -Zelle für Hintergrundbilder anstatt CSS zu verwenden. Ein Nebeneffekt dieses Ansatzes ist, dass das Hintergrundbild bei Bedarf so hoch gemacht werden kann. Wenn der in Ihrer E-Mail-Vorlage verwendete Inhalt wahrscheinlich in der Größe variiert, kann die Verwendung eines extra-Tall-Hintergrundbildes auf diese Weise die Höhe des E -Mail schrumpfen oder erweitern, abhängig von der Höhe der Kopie von einer E -Mail zum nächsten. Denken Sie jedoch daran, dass Outlook 2007 Hintergrundbilder vollständig ignoriert.
• Wenn es besser funktioniert, verwenden Sie die Polstererklärung, um die Ränder in einer TD -Zelle zu kontrollieren. Der Randstil funktioniert in diesen Zellen nicht, aber die Polsterung.
• Wenn Sie einen Rand in einer TD -Zelle benötigen, denken Sie daran, dass Google Mail eine Rand um eine TD -Zelle zeigt, wenn sie in einem DIV definiert ist, aber nicht, wenn sie in einem TD -Tag als Grenzstil definiert ist.
• Wenn Sie einen hellen Link gegen eine dunkle Hintergrundfarbe benötigen, legen Sie die Schriftdefinition in die TD-Zelle (so gilt sie auf P und A-Tags gleichermaßen). Fügen Sie dem A-Tag eine Farbe hinzu: Stil.
• Wenn die P und A -Schriftarten unterschiedliche Größen zu haben scheinen, wickeln Sie das A -Tag in ein P -Tag.
• Google Mail verwendet aggressiv die rechte Spalte der Google Mail-Benutzeroberfläche, die die HTML-E-Mail in das Zentrumbereich drückt. Stellen Sie sicher, dass der Polsterstil im Inhalt TDS auf 10 Pixel eingestellt ist, sodass der Text nicht an den linken und rechten Kanten klingt.
• Beim Testen einer HTML -E -Mail mit einem Google Mail -Konto wird wahrscheinlich festgestellt, dass ein oder mehrere Schriftarten in den TD-, H1-, H2-, P-, A- und anderen Tags fehlen. Überprüfen Sie jede Schriftart sorgfältig, um sicherzustellen, dass Google Mail die Schriftarten korrekt anzeigt.

Neben Google Mail gibt es ein weiteres, weniger offensichtliches Gefahren, mit dem ein Programmierer beim Erstellen von HTML -E -Mails: Lotus Notes enthält. Viele große Unternehmen unterstützen und aktualisieren ihre Notizeninstallationen weiter.

Leider ist es unmöglich zu sagen, welche Unternehmen Notizen verwenden. Der beste Ansatz besteht darin, die in diesem Artikel beschriebenen Richtlinien zu befolgen - je primitiv der Code ist, desto wahrscheinlicher funktioniert er gut, wenn nicht perfekt, mit Notizen.

, so heißt es, dass Lotus -Notizen durchaus möglich sind, wird Ihre HTML -E -Mail -Macken vorstellen, die fast nicht glauben. Zum Beispiel können ältere Versionen von Notizen Bilder in ihre proprietären Formate umwandeln oder einfach makellose grundlegende HTML in einer E -Mail ignorieren, aber andere HTML -Geldstrafe in einer anderen E -Mail anzeigen.

Hier sind einige Tipps, die Ihnen helfen, Notizen zu überzeugen, um Ihre HTML -E -Mail ordnungsgemäß anzuzeigen:

• Wie bereits diskutiert, verwenden Sie eine Containertabelle, die alle internen Layout -Tabellen enthält (z. B. für den Header, den Inhalt und die Fußzeile). Dies hält die E -Mail in einem Stück HTML zusammen, sodass Teile des Layouts weniger wahrscheinlich wandern, wenn sie in Notizen angezeigt werden.
Erstellen Sie eine Rinne um die Containertabelle, indem Sie die Breite auf einen Prozentsatz und/oder eine Zellpaddierung von mindestens 5.
• setzen
Wie ich bereits erwähnt habe, vermeiden Sie es, eine Stildeklaration im Head -Tag Ihrer E -Mail zu verwenden. Es könnte der Ansatz sein, der sich an Webstandards hält, aber Hinweise (wie Google Mail) könnten Ihre Stile löschen. Verlassen Sie sich stattdessen auf Inline -Stile innerhalb der Tabelle, TD, H1, H2, P, A und andere Tags.
Verwenden Sie absolute URLs zu Bildern, die auf einem Webserver gespeichert sind. Sie können nicht viel gegen Notizen tun, die Bilder konvertieren, aber die Verwendung von Remote -Bildern kann helfen.
Intra-email-Links, die benannte Anchors verwenden, arbeiten selten (wenn überhaupt) in Notizen. Es ist einfach am besten, Links zu vermeiden, die die E -Mail zu einem bestimmten Inhalt hinuntersteigen.
Vermeiden Sie Colspans in Ihren HTML -Tabellen. Anmerkungen - insbesondere seine früheren Versionen - können nur mit grundlegenden Tabellenlayouts umgehen.
Stellen Sie sicher, dass Ihre TD -Zellbreiten genau sind. Im Gegensatz zu Webbrowsern, die alle Zellen automatisch auf die am weitesten definierte Breite einstellen, sind die Größen jeder TD-Zelle basierend auf der definierten Breite.
Ein E -Mail -Layout zentrieren, funktioniert normalerweise nicht in Notizen. E-Mail-Layouts müssen im Allgemeinen links ausgerichtet sein.

Verwenden dieser Techniken, um ein erfolgreiches Rendern in Google Mail- und Lotus -Notizen zu erzielen, stellt sicher, dass Ihre E -Mails auch in Outlook 2007 eine Geldstrafe anzeigen, die eine ältere HTML -Rendering -Engine verwendet. Microsoft hat Details darüber veröffentlicht, wie ihre E -Mail -Software nicht ordnungsgemäß angezeigt wird. Weitere Details finden Sie im Abschnitt Ressourcen am Ende dieses Artikels).

Kampagnenmonitor, ein E -Mail -Lieferservice, verfügt über eine umfassende Liste von CSS -Elementen -Unterstützung für jeden beliebten Mobilfunk-, Web- und Desktop -E -Mail -Client.

Schritt 5: Codierung für Telefone und Tablets

Eine erstaunliche Anzahl von Personen, die HTML -E -Mails auf ihren Smartphones und Tablets sowie der Desktop -E -Mail -Software lesen. Die Anpassung Ihrer HTML -Tabellen, um auf diesen Geräten gut anzuzeigen, ist etwas einfach. Es hilft CSS -Unterstützung für die HTML -Rendering -Motoren, die auf neuen Telefonen und Tablets verwendet werden.

Die Lösung besteht darin, die CSS @Media -Definition zu verwenden, um die HTML -Tabelle TD -Zellen abzumelden und die für die gut angezeigten Schriftgrößen zu steigern. Beispielsweise müssen Schriftarten auf einem iPhone 13 Pixel sein, um lesbar zu sein. Das Beste daran? Webmail- und Desktop -E -Mail -Software werden Ihre @media -Definitionen entweder ausziehen oder ignorieren, während Ihr Telefon und Ihr Tablet den Code lesen und alles perfekt anzeigen.

Hier ist ein Beispielsatz von @media-Definitionen, um eine einspaltige HTML-Tabelle für Telefone und Tablets anzuzeigen:

<span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>

Platzieren Sie diesen @media -Code direkt unter Ihr Körper -Tag in Ihre Tabellendefinition und in Ihre TD -Zellen. Wenn Ihre HTML-E-Mail mit einem Gerät (oder einem Webbrowser horizontal neu) weniger als 480 Pixel angezeigt wird, werden diese Definitionen aktiviert.

Das Geheimnis der Codierung einer zweispaltigen HTML-E-Mail, um sich an kleine Telefon- und Tablet-Bildschirme anzupassen? Legen Sie jede Spalte in eine eigene Tabelle. Verwenden Sie für jede HTML -Tabelle inline CSS zum Schwimmen: links und html align = "links", um jede Inhaltsspaltentabelle nach links zu schweben und auszurichten. Fügen Sie dann Ihrer Tabellendefinition und Ihren TD -Zellen hinzu.

Mit dem obigen @media -Code, für Bildschirme von weniger als 480 Pixel breit, setzen Sie die Spaltentabellen, Ihre linken und rechten Spalten, dieselbe Breite wie die Spalte des linken Inhalts und rutschen unter der Hauptspalte.

.

Dieser Ansatz kann verwendet werden, um Änderungen des Layoutdesigns für die Arbeit mit Telefonen und/oder Tablets abzuzielen.

Diese Lösung stammt aus einer hervorragenden Anleitung aus dem Kampagnenmonitor und dem reaktionsschnellen E -Mail -Design, das noch mehr Details und Ideen zur Reaktion von HTML -E -Mails auf verschiedene Bildschirmgrößen enthält.

Zusammenfassung

Viele Personen, die eine E -Mail erhalten, bevorzugen HTML aus mehreren Gründen über Text. Für Programmierer erscheint jedoch die Aufgabe, eine HTML -E -Mail zu erstellen, in der sowohl einfach als auch schrecklich komplex angezeigt werden. In diesem Artikel wurde viele der Probleme und Strategien für die Erstellung von Markup beschrieben, die über E -Mail -Software in der gesamten E -Mail -Software funktionieren.

Was ist die beste Idee, um diesen Artikel zu entfernen? Wenn zwischen einem einfachen E -Mail -Design und einer komplexeren Lösung die Wahl getroffen werden muss, ist die Einfachheit immer die sicherste Wette.

Weiteres Lesen

Diese Ressourcen bieten wertvolle Informationen, die Ihnen helfen, wenn Sie mehr über die Codierung von HTML -E -Mails erfahren möchten.

Kampagnenmonitor: Anleitung zum CSS -Support in E -Mail
Kampagnenmonitor: Responsive E -Mail -Design
MailChimp: E -Mail auf mobilen Geräten
MailChimp: E -Mail -Blaupausen
MailChimp: E -Mail -Marketing -Feldhandbuch

Und hier sind noch mehr…

E -Mail -Standard -Projekt

Das E -Mail -Standard -Projekt ist wahrscheinlich der beste Ausgangspunkt, um genau zu verstehen, inwieweit HTML und CSS von verschiedenen E -Mail -Kunden unterstützt werden. Die Website führt auch einen Säuretest bei, der verwendet werden kann, um die Einhaltung der E -Mail -Software zu vergleichen, und es gibt verschiedene Möglichkeiten, wie Sie teilnehmen können, um die E -Mail -Support von Webstandards zu verbessern.

Kostenloser Kampagnenmonitor und MailChimp HTML -E -Mail -Vorlagen

Beide E -Mail -Lieferdienste testen ihre Vorlagen im Laufe der Zeit aktiv mit verschiedenen E -Mail -Clients. Es gibt jedoch subtile Unterschiede in dem Ansatz, den jeder verfolgt - der Kampagnenmonitor legt eine Stilerklärung innerhalb des Head -Tags, während MailChimp nicht der Fall ist. Stellen Sie sicher

Klartext E -Mail -Design -Richtlinien
Dieser Artikel listet eine Reihe einfacher Techniken auf, um Text -E -Mails zu scannen.

HTML -E -Mail
testen In diesem Artikel werden Testverfahren in mehreren E -Mail -Clients untersucht.  Weitere verwandte Artikel sind das Erstellen von HTML -E -Mail -Layouts und das Verständnis multivariater Tests.

Artikel über blockierte E -Mail -Bilder nach

"> Clickz und Kampagnenmonitor
Ab dem Jahr 2004 zeigt der Clickz -Artikel, wie eine wichtige E -Mail -Software vergleicht, wenn Bilder blockiert werden oder wenn der Inhalt in einem Vorschau -Bereich angezeigt wird. Der Artikel des Kampagnenmonitors geht ein detaillierterer Details aus, wobei die tatsächlichen Beispiele und Ideen aufgeführt sind, wie Sie die Standard-Image-Off-Wiedergabe Ihrer E-Mails bekämpfen und Ihre E-Mails so entwerfen, dass sie in den Vorschau-Panes in Ordnung aussehen.

Word 2007 HTML- und CSS -Rendering -Funktionen in Outlook 2007
Die offizielle Beschreibung von Microsoft, was Outlook 2007 für HTML und CSS nicht rendert und nicht. Enthält einen Link zu einem Validator, der in Dreamweaver und Microsoft -Bearbeitungswerkzeugen arbeitet.

MailChimp: HTML -E -Mail -Vorlagen Erste Schritte
Viele großartige Informationen zu allen Aspekten von HTML -E -Mails, einschließlich der Funktionsweise von Spam -Filtern. Eine gute Auswahl an Tools ist enthalten, um den Prozess zu vereinfachen.

Die "Geheimnisse der HTML -E -Mail" -Serie
Einige dieser Informationen sind alt, aber ein gutes Stück zu Lotus -Notizen wird angeboten.

CSS und E -Mail, küsst in einem Baum
Dieser hervorragende CSS-Ansatz zur HTML-E-Mail wurde von einer Liste getrennt. HINWEIS: Der Autor hat ein Update zu diesem Artikel geschrieben, der im Kampagnenmonitor -Blog veröffentlicht wurde, um die CSS -Präsentation in HTML -E -Mails zu optimieren.

Wie sich der HTML-Code auf die E-Mail-Lieferbarkeit auswirkt
Ein anständiger Überblick, der beschreibt, wie unterschiedliche E -Mail -Dienste die HTML anzeigen, die Sie in einer HTML -E -Mail aufnehmen. Sie können jedes Problem nicht direkt angehen (z. B. das Erstellen einer klaren Grenze zwischen HTML und Textversionen Ihrer E -Mail ist ein Problem für Ihren E -Mail -Dienstanbieter, wenn Sie eine verwenden), aber es hilft zu wissen, was passiert.

Der 6 -Stufen -E -Mail -Marketing -Handbuch für Anfänger zum Erfolg
Hier finden Sie ein Leitfaden zum E -Mail -Marketing, der das Thema vollständiger abdeckt als der zugängliche Titel, und es enthält einen Abschnitt mit guten Informationen, um die besten Ergebnisse Ihres Lesers aus den Entwurfsentscheidungen herauszuholen, die Sie beim Erstellen von E -Mail -Vorlagen treffen werden. Es ist Ende 2020 und bietet einen soliden Ausblick auf den E -Mail -Marketingraum, sobald es heute aussieht.

So starten Sie ein Blog im Jahr 2020 (und Geld verdienen): Einfacher Leitfaden, um heute zu bloggen
Eine der besten Möglichkeiten, um Ihre Mailingliste auszubauen, besteht darin, einen konsistenten Blog auszuführen. Dieser Leitfaden ist ein seltener Fund. Er zeigt Ihnen, wie Sie schnell einen effektiven Blog -Laufen und die Erzeugung von Ergebnissen erhalten und viel von dem Lärm in der Blogging -Ratschläge durchlaufen. Es deckt auch mit Ihrem E -Mail -Newsletter mit dem Ausbau Ihres Blog -Publikums ab und erstellt einen tugendhaften Zyklus für Ihren gesamten Vorgang.

häufig gestellte Fragen (FAQs) zu HTML -E -Mail -Newsletter

Was sind die Best Practices für die Codierung von HTML -E -Mail -Newslettern? Verwenden Sie zunächst immer Tabellen für das Layout. Im Gegensatz zum modernen Webdesign hängt das E -Mail -Design immer noch stark auf Tische ab. Zweitens ist Inline CSS der richtige Weg. Dies liegt daran, dass nicht alle E -Mail -Clients eingebettete oder verknüpfte CSS unterstützen. Drittens verwenden Sie HTML -Attribute für Breite, Höhe und mehr. Dies stellt sicher, dass Ihre E -Mail in verschiedenen E -Mail -Clients korrekt angezeigt wird. Testen Sie zuletzt Ihre E -Mail immer, bevor Sie sie senden. Es stehen verschiedene Tools online zur Verfügung, mit denen Sie testen können, wie Ihre E -Mail in verschiedenen E -Mail -Kunden aussieht. Sicherstellen, dass es auf allen Geräten gut aussieht, von Desktop -Computern bis hin zu Mobiltelefonen. Um dies zu erreichen, können Sie Medienabfragen in Ihrem CSS verwenden. Mit Medienabfragen können Sie je nach Bildschirmgröße des Geräts verschiedene Stile anwenden. Nicht alle E-Mail-Kunden unterstützen jedoch Medienabfragen. Daher ist es wichtig, Ihre E-Mail mit einem mobilen Ansatz zu entwerfen. Dies bedeutet, zuerst für den kleinsten Bildschirm zu entwerfen und dann Medienabfragen hinzuzufügen, um sich an größere Bildschirme anzupassen.

Kann ich Web -Schriftarten in meinem HTML -E -Mail -Newsletter verwenden? Ihr HTML -E -Mail -Newsletter. Beachten Sie jedoch, dass nicht alle E -Mail -Clients Web -Schriftarten unterstützen. Für diejenigen, die dies nicht tun, sollten Sie immer eine Fallback -Schriftart bereitstellen. Dies ist in der Regel eine Standardschrift, die weithin unterstützt wird, wie Arial oder Times New Roman. Um eine Web-Schriftart zu verwenden, würden Sie die Schriftdateien in Ihrem CSS mit der @font-face-Regel in Ihr CSS einfügen.

Wie kann ich meinem HTML-E-Mail-Newsletter Bilder hinzufügen? Der HTML -E -Mail -Newsletter kann mit dem

-Tag durchgeführt werden. Es gibt jedoch einige Dinge zu beachten. Geben Sie zunächst immer die Breiten- und Höhenattribute in Ihr

-Tag ein. Dies stellt sicher, dass das Bild korrekt angezeigt wird. Zweitens verwenden Sie absolute URLs für Ihre Bilder. Dies bedeutet, dass die Bildquelle eine vollständige URL sein sollte, kein relativer Weg. Fügen Sie schließlich immer ALT -Text für Ihre Bilder hinzu. Dies ist eine Beschreibung des Bildes, das anzeigt, wenn das Bild nicht geladen werden kann.

Wie kann ich sicherstellen, dass mein HTML -E -Mail -Newsletter in allen E -Mail -Kunden gut aussieht? Es gibt jedoch einige Strategien, die Sie anwenden können. Verwenden Sie zunächst immer Tabellen für Layout- und Inline -CSS. Diese werden bei E -Mail -Kunden weithin unterstützt. Testen Sie zweitens Ihre E -Mail in verschiedenen E -Mail -Clients, bevor Sie sie senden. Es stehen Online -Tools zur Verfügung, mit denen Sie dies tun können. Halten Sie Ihr Design schließlich einfach. Je komplexer Ihr Design ist, desto wahrscheinlicher ist es, dass bestimmte E -Mail -Clients eingebrochen werden.

Kann ich JavaScript in meinem HTML -E -Mail -Newsletter verwenden? JavaScript in Ihrem HTML -E -Mail -Newsletter. Dies liegt daran, dass viele E -Mail -Clients JavaScript nicht unterstützen oder es aus Sicherheitsgründen standardmäßig deaktivieren lassen. Halten Sie stattdessen für Ihr E-Mail-Design bei HTML und CSS. Ihr HTML -E -Mail -Newsletter kann mit HTML und CSS durchgeführt werden. Der einfachste Weg ist die Verwendung eines Tags mit CSS, um es wie eine Taste zu stylen. Für eine bessere Kompatibilität zwischen E -Mail -Clients können Sie jedoch eine Tabelle mit einer einzigen Zelle und einem einzigen Stil verwenden, um wie eine Taste auszusehen. 🎜> Hinzufügen einer Hintergrundfarbe zu Ihrem HTML -E -Mail -Newsletter kann mit CSS durchgeführt werden. Sie können die Eigenschaft von Hintergrundfarben verwenden, um eine Hintergrundfarbe für Ihre gesamte E-Mail oder für bestimmte Elemente wie Tabellen oder Tabellenzellen festzulegen. Beachten Sie jedoch, dass nicht alle E -Mail -Kunden Hintergrundfarben unterstützen. Für diejenigen, die dies nicht tun, sollten Sie eine Fallback -Farbe unter Verwendung des BGColor -Attributs in Ihrem HTML bereitstellen.

Wie kann ich Links zu meinem HTML -E -Mail -Newsletter hinzufügen? Der Newsletter kann mit dem Tag durchgeführt werden. Sie können zu Websites, E -Mail -Adressen oder Telefonnummern verlinken. Um auf eine Website zu verlinken, verwenden Sie das HREF -Attribut mit der vollständigen URL der Website. Um mit einer E -Mail -Adresse zu verknüpfen, verwenden Sie das Protokoll von Mailto: Protokoll im HREF -Attribut. Um zu einer Telefonnummer zu verlinken, verwenden Sie das Protokoll von Tel: Protokoll im HREF -Attribut. Der Newsletter kann mit Bildern und Links durchgeführt werden. Sie würden ein

Tag für das Symbolbild verwenden und dies in ein Tag einwickeln, um mit Ihrem Social -Media -Profil zu verlinken. Fügen Sie immer ALT -Text für Ihre Bilder hinzu und verwenden Sie absolute URLs sowohl für die Bildquelle als auch für den Link HREF.

Das obige ist der detaillierte Inhalt vonSo codieren Sie HTML -E -Mail -Newsletter und E -Mail -Vorlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!