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

Anfänger lernen einige HTML-Tags (3)

Anfänger, die mit HTML in Berührung kommen, lerne...

Eine Analyse von Div+Float, einem sehr wichtigen Konzept im Website-Design

Beim Erstellen einer Website treten immer wieder P...

Mehrere Lösungen für die Ausrichtung von CSS-Datensatztextsymbolen

Während der Entwicklung kommt es sehr häufig vor,...

Lösung für das Problem, dass die lokale MySQL-Anmeldung keine Portnummer zum Anmelden verwenden kann

Als ich mich kürzlich lokal unter Linux anmeldete...

Einführung in die Verwendung benutzerdefinierter Datenattribute in HTML- und Plug-In-Anwendungen

Sie werden oft HTML mit Datenattributen sehen. Die...

So ändern Sie die Farbe der gesamten Zeile (tr), wenn die Maus in HTML stoppt

Verwenden Sie reines CSS, um die Hintergrundfarbe...

Lösung für das domänenübergreifende Problem der SpringBoot- und Vue-Interaktion

Inhaltsverzeichnis Same Origin-Richtlinie für Bro...

Tutorial zum Bereitstellen von LNMP und Aktivieren des HTTPS-Dienstes

Was ist LNMP: Linux+Nginx+Mysql+(php-fpm,php-mysq...

Tutorial-Diagramm zur Installation von mysql8.0.18 unter Linux (Centos7)

1 Holen Sie sich das Installationsressourcenpaket...

Eine kurze Diskussion zum Problem des Docker-Run-Containers im erstellten Status

Bei einem aktuellen Problem gibt es folgendes Phä...

Prinzip des Ladens von Docker-Images

Inhaltsverzeichnis Docker-Images Was ist ein Spie...

Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode

Methode 1: Verwenden Sie Tabellenattribute: Heade...

Einführung in lokale Komponenten in Vue

In Vue können wir lokale Komponenten selbst defin...

Webdesign-Tutorial (3): Designschritte und Denkweise

<br />Vorheriges Tutorial: Webdesign-Tutoria...

So verwenden Sie Lottie-Animationen in React Native-Projekten

Lottie ist eine von Airbnb entwickelte Open-Sourc...