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

TypeScript-Aufzählungstyp

Inhaltsverzeichnis 1. Übersicht 2. Digitale Aufzä...

Beispiele für die korrekte Verwendung von AES_ENCRYPT() und AES_DECRYPT() zum Verschlüsseln und Entschlüsseln von MySQL

Vorwort Kürzlich stieß ich bei der Arbeit auf ein...

Ausführliche Erläuterung der Mysql-Deadlock-Anzeige und Deadlock-Entfernung

Vorwort Vor einiger Zeit ist bei mir ein MySQL-De...

So implementieren Sie die Ajax-Kontrolle gleichzeitiger Anforderungen basierend auf JS

Inhaltsverzeichnis Vorwort Ajax seriell und paral...

Lösung für das Problem einer großen Anzahl von php-cgi.exe-Prozessen auf dem Server, die dazu führen, dass die CPU 100 % belegt

Optimieren Sie die FastCGI-Konfigurationsdatei fc...

CSS zur Erzielung eines schwebenden Kundenservice-Effekts

<div Klasse="Seitenleiste"> <d...

So verwenden Sie einen SSH-Tunnel, um eine Verbindung zum MySQL-Server herzustellen

Vorwort In einigen Fällen kennen wir nur die Intr...

Snake-Spiel mit nativem JS schreiben

In diesem Artikel wird der spezifische Code zum S...

Detailliertes Tutorial zur MySQL-Installation und -Konfiguration

Inhaltsverzeichnis Installationsfreie Version von...

So fixieren Sie Inhalte beim Scrollen einer HTML-Seite an einer festen Position

In diesem Artikel wird hauptsächlich erläutert, w...

So verwenden Sie Docker Compose zum Erstellen eines FastDFS-Dateiservers

Im vorherigen Artikel wurde ein ausführliches Bei...

Einige allgemeine erweiterte SQL-Anweisungen in MySQL

Erweiterte MySQL-SQL-Anweisungen benutze kgc; Tab...

Die neue Version der Chrome-Browsereinstellungen ermöglicht die domänenübergreifende Implementierung

Vorwort Derzeit löst das Front-End domänenübergre...

Definieren der Mindesthöhe der Inline-Elementspanne

Das Span-Tag wird häufig beim Erstellen von HTML-...

Natives JS zum Erzielen eines funkelnden Sterneneffekts

In diesem Artikelbeispiel wird der spezifische Co...