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

Docker-Installation von Nginx Probleme und Fehleranalyse

Frage: Beim Installieren Nginx in Docker ist der ...

Tutorial zur HTML-Tabellenauszeichnung (9): Zellabstandsattribut CELLSPACING

Damit die Tabelle nicht zu kompakt wirkt, kann zw...

Verwenden Sie die Tools iptables und firewalld, um Verbindungsregeln für die Linux-Firewall zu verwalten

Firewall Eine Firewall ist eine Reihe von Regeln....

So führen Sie Befehle auf einem Remote-Linux-System über SSH aus

Manchmal müssen wir einige Befehle auf einem Remo...

Detaillierte grafische und textliche Anweisungen zur Installation von MySQL 5.7.20 unter Mac OS

Installieren von MySQL 5.7 aus TAR.GZ auf Mac OS ...

IE8 Beta 1 hat zwei Bereiche, die Ihre Aufmerksamkeit erfordern

<br />Verwandte Artikel: Web-Kenntnisse: Lös...

Verwendung und Ausführungsprozess des HTTP-Moduls im Knoten

Welche Rolle spielt http im Knoten? Die Aufgabe d...

Lombok-Implementierung JSR-269

Vorwort Einführung Lombok ist ein praktisches Too...

Eine erfahrene Person zeigt Ihnen, wie Sie ein professionelles und standardisiertes MySQL-Startskript entwickeln

Jeder qualifizierte Linux-Betriebs- und Wartungsm...

Zusammenfassung wichtiger Breakpoint-Debugging-Techniken für JavaScript (empfohlen)

Inhaltsverzeichnis Warum einen Debugger verwenden...

Warum der Befehl „explain“ MySQL-Daten ändern kann

Wenn Sie jemand fragen würde, ob die Ausführung v...

In IIS 7.5 unterstützt HTML die Include-Funktion wie SHTML (Modulzuordnung hinzufügen).

Als ich das erste Mal anfing, fand ich viele Fehl...

Das WeChat-Applet implementiert feste Header- und Listentabellenkomponenten

Inhaltsverzeichnis brauchen: Funktionspunkte Rend...

Installieren Sie .NET 6.0 im CentOS-System mithilfe eines Cloud-Servers

.NET SDK-Download-Link https://dotnet.microsoft.c...

Grundlegende Kenntnisse zum MySQL UNION-Operator

MySQL UNION-Operator Dieses Tutorial stellt die S...