Vorschläge zum Erstellen geschäftlicher HTML-E-Mails

Vorschläge zum Erstellen geschäftlicher HTML-E-Mails

Durch E-Mail-Marketing auf Genehmigungsbasis lassen sich nicht nur die Kosten für Marketing und Werbung erheblich senken, sondern Informationen können auch direkt und präzise an die Kunden übermittelt werden.

Die Frage, die ich heute untersuche, ist, wie man vom technischen Aspekt aus beginnt und eine hervorragende E-Mail erstellt, die sowohl mit der Benutzersicht als auch mit E-Mail-Clients kompatibel ist.

1. Wählen Sie HTML oder Nur-Text
Manche Leute mögen einfachen Text, andere sehen lieber umfangreiches HTML. Wie treffen wir unsere Wahl?
Für Marketing-E-Mails wird die Verwendung des HTML-Formats (Bild) empfohlen.

Für Bestätigungs-/Erinnerungs-/Benachrichtigungs-E-Mails wird die Verwendung von Text oder einfachem HTML (Bild) empfohlen.

Warum verwenden wir für diese beiden unterschiedlichen E-Mail-Typen unterschiedliche Produktionsmethoden? Dies hat folgende Gründe:
Der Inhalt von Marketing-E-Mails ist umfangreich und vielfältig; der Inhalt von Bestätigungs-E-Mails ist individuell und einzigartig.
In Marketing-E-Mails achten Kunden mehr auf die Reichhaltigkeit des Inhalts und die Schönheit der visuellen Effekte.
In Bestätigungs-E-Mails möchten wir, dass Kunden die Bestätigungsinformationen sehr direkt sehen. Komplexe Inhalte und visuelle Effekte führen nur dazu, dass Kunden den Hauptinhalt der E-Mail – die Bestätigungsinformationen – ignorieren.
(Im Folgenden geht es um die HTML-Erstellung von Marketing-E-Mails)

2. Grundlegende HTML-Kenntnisse basierend auf Tabellenlayout + CSS <br />Es gibt zwei Arten von Kung Fu, eine ist extrem Yang und extrem hart, die andere ist extrem Yin und extrem weich. Der Grund, warum Zhang Sanfeng den Gipfel erreichte, liegt darin, dass er eine gute Grundlage in Kampfkunst und solide grundlegende Shaolin-Kenntnisse hatte, die es ihm ermöglichten, dieses Tai Chi zu verwirklichen, das sowohl extrem Yin als auch extrem Yang ist.
Dasselbe gilt für HTML-E-Mails. Wir wissen, dass es heute viele Arten von E-Mail-Lese-Clients gibt, darunter das traditionelle Outlook, Thunderbird, Lotus Notes und Online-Mac Mail, Gmail, Hotmail usw. Die Interpretation von E-Mails ist unterschiedlich. Die meisten Online-E-Mail-Systeme blockieren die Codes zwischen den Tags <head></head>.

Um sicherzustellen, dass alle Benutzer, die unterschiedliche Clients verwenden, dieselbe E-Mail sehen, müssen Sie über sehr gute HTML-Grundkenntnisse verfügen. Manche Leute sagen DIV+CSS, andere sagen, es sei SEO-Tag-Semantik. Es ist unbestreitbar, dass es als Webentwickler sehr beliebt wäre, diese beiden beliebten HTML-Entwicklungsideen zu haben. Dies gilt jedoch nicht für die E-Mail-Produktion. Unser Ziel besteht darin, Kunden die Anzeige desselben Informationsinhalts in verschiedenen E-Mail-Clients zu ermöglichen. Dazu ist die primitivste Methode des Schriftsatzes erforderlich: Tabellenlayout + CSS. Werfen wir einen Blick auf die aktuelle E-Mail-Client-Unterstützung für HTML und CSS (Bild):

*Hotmail kann den <style> zwischen <body></body> analysieren, blockiert aber auch den <style> zwischen <head></head>

3. Beim Erstellen von HTML-E-Mails sollten Sie folgende Punkte beachten:

  1. Schreiben Sie den Stil innerhalb des HTML-Tags und nicht in eine unabhängige externe Datei, und schreiben Sie ihn nicht zwischen <style></style> (Bild).

  2. Fügen Sie jedem Tag mit Inhalt CSS hinzu, auch wenn es sich wiederholt und umständlich ist.
  3. Verwenden Sie kein CSS, um HTML-Element-Tags zu positionieren;
    Verwenden Sie zur Positionierung eine Kombination aus absoluter Größe (Pixel) und relativer Größe (Prozentsatz).
  4. Fügen Sie in die E-Mail kein Javascript, Flash oder spezielle Tags (wie etwa: Marquee) ein.
    Die meisten E-Mail-Clients blockieren Flash und Javascript sowie einige spezielle Tags und Attribute.
  5. Verwenden Sie keine Hintergrundbilder
    Die Hintergrundbildeigenschaft ist in den meisten Online-E-Mail-Clients blockiert. In Gmail können Sie keine Hintergrundbilder sehen.
  6. Geben Sie für jedes Bild die Werte für Breite, Höhe und Alt-Attribut an.
    Das src-Attribut des Bildes muss eine absolute Adresse verwenden:
    Richtig: <img src=”http://blog.54575.com/logo.gif” width=”297″ height=”160″ alt=”Gut leben = sinnvoll” />
    Fehler: <img src=”logo.gif” />
  7. Bitte verwenden Sie keine Bilder, um wichtige Informationen anzuzeigen. Zeit, Ort, Inhalt und andere Informationen zur Ausstellung sind sehr wichtig. Da die Bilder möglicherweise nicht angezeigt werden, wird nicht empfohlen, diese Inhalte in Bildern anzuzeigen.
    Auch wenn es in einem Bild platziert ist, drücken Sie es bitte in Textform im E-Mail-Inhalt aus und fügen Sie den Inhalt dem Alt-Attribut des Bildes hinzu.
  8. Verwenden Sie die einheitliche UTF-8-Kodierung.

4. Die Breite der E-Mail: 650 Pixel? Oder 600 Pixel?
 Wir alle wissen, dass die aktuelle Standardbreite von Webseiten 950/960 Pixel beträgt, was von unserer Monitorauflösung abhängt.
E-Mails werden üblicherweise auf zwei Arten geöffnet: Software-Clients und Online-Clients (Bild).
*Microsoft Outlook 2003

*NetEase 163 Postfach

Wie aus der Abbildung ersichtlich, werden E-Mails häufig nicht im Vollbildmodus angezeigt.
Wenn die Standardbreite von 960/950 Pixeln für Webseiten verwendet wird, wird ein Teil des E-Mail-Inhalts abgedeckt, was zu zwei Bildlaufleisten (horizontal und vertikal) führt und das Browsen für Kunden erschwert.
Eine zu geringe Breite führt jedoch zu einer Platzverschwendung (Abbildung)

Was ist also die optimale Breite für HTML-E-Mails? Schauen wir uns zunächst die Breiten an, die mehrere namhafte Unternehmen beim Erstellen von HTML-E-Mails verwenden:

NetEase Youdao: 600px

QQ-Mitglied: 650px

Dell Home & Office: 650 Pixel

Cisco Webex: 600px

Es ist zu erkennen, dass die Marketing-E-Mails dieser namhaften IT-Unternehmen zwei Breiten aufweisen: 600px und 650px.
Aufgrund meiner vierjährigen Erfahrung in EDM und Webdesign bevorzuge ich Letzteres, also 650 Pixel als Standardbreite für HTML-Marketing-E-Mails.
Vorteile von 650px:
Wenn der Inhalt der E-Mail in zwei Spalten aufgeteilt wird, können 650px in X+10+Y aufgeteilt werden, wobei X=linke Spalte, Y=rechte Spalte, 10 der Abstand ist, X+Y=640 und 640 genau durch 20 teilbar ist, 640=2×2x2×2×2×2x10 ,
Wenn der Inhalt der E-Mail in drei Spalten aufgeteilt wird, können 650px in X+10+Y+10+Z aufgeteilt werden. Ähnlich ist X+Y+Z=630 und 630 ist genau durch 30 teilbar, 630=3×3x7×10 .
Um zu verstehen, warum dies nicht funktioniert, sehen Sie sich diese Untersuchung zur Rasterung von Webseiten an.
Deshalb habe ich 650px statt 600px gewählt.
Natürlich ist dies nur mein persönlicher Standard und er hat sich noch nicht zum weltweiten Standard entwickelt, aber ich hoffe, dass diese Breite eines Tages von der überwiegenden Mehrheit der Ersteller und Empfänger von HTML-E-Mails anerkannt wird.

<<:  CSS3-Analyse der Schritte zur Erstellung des Douyin-LOGO

>>:  Detaillierte Erläuterung des Prozesses zur Realisierung der Rechnerfunktion in Javascript

Artikel empfehlen

Testen des Hyperlink-Öffnungsziels

Das Zielattribut eines Links bestimmt, wohin der L...

WeChat-Applet-Picker - Mehrspalten-Selektor (Modus = MultiSelector)

Inhaltsverzeichnis 1. Wirkungsdiagramm (mehrere S...

Meine persönliche Zusammenfassung der Installationsschritte für die MySQL 5.7-Datenbank

1.mysql-5.7.19-winx64.zip (das ist die kostenlose...

JavaScript-Singleton-Modus zum Implementieren benutzerdefinierter Popup-Fenster

In diesem Artikel wird der spezifische Code des J...

Die spezifische Verwendung und der Unterschied zwischen Attribut und Eigenschaft in Vue

Inhaltsverzeichnis Als Attribut- und Eigenschafts...

So konfigurieren Sie die Linux-Firewall und öffnen die Ports 80 und 3306

Port 80 ist ebenfalls konfiguriert. Geben Sie zun...

Implementierungsbeispiel eines React-Projekts von der Neuerstellung bis zur Bereitstellung

Neues Projekt starten Dieser Artikel zeichnet hau...

Lösen Sie das Problem „Rand: oberer Kollaps“ in CCS

Die HTML-Struktur ist wie folgt: Die CCS-Struktur...

mysql 5.7.11 winx64 anfängliche Passwortänderung

Laden Sie die komprimierte Version von MySQL-5.7....

Methode der Toolbibliothek zur Generierung von Vue-Komponentendokumenten

Inhaltsverzeichnis Analysieren von VUE-Dateien Do...

Analyse der Gründe, warum der Index bei der Suche im MySql-Bereich nicht wirksam wird

1 Problembeschreibung Dieser Artikel sortiert den...

Master-Slave-Synchronisationskonfiguration und Lese-/Schreibtrennung der MySQL-Datenbank

Die Verwendung der MySQL Master-Slave-Replikation...

Detaillierte Erläuterung des Prozesses der Verwendung von GPU in Docker

Inhaltsverzeichnis tf-gpu herunterladen Erstellen...

Verwenden von JS zum Implementieren eines einfachen Rechners

Verwenden Sie JS, um einen einfachen Rechner für ...

Vue Element Front-End-Anwendungsentwicklung, dynamische Menü- und Routing-Assoziationsverarbeitung

Inhaltsverzeichnis Überblick 1. Menü- und Routing...