HTML- und CSS-Codierung in E-Mails

Wer sich dem E-Mail-Marketing verschrieben hat, sollte wissen, wie man E-Mails in HTML erstellt.

newsletter.jpg

Wir werden einige Empfehlungen für das Entwerfen, Codieren und Zustellen von E-Mails im HTML-Format sowie für das Erscheinungsbild Ihres Newsletters für die meisten E-Mail-Clients sehen.

Der Versand von Newsletter-E-Mails ist eine gute Möglichkeit für die Kommunikation zwischen den Redakteuren und den Lesern. Wenn wir dies jedoch auch im HTML-Format tun, können wir das Dokument mit visuellen Elementen anreichern, die die E-Mail attraktiver machen, Verknüpfungen zu anderen Standorten und ermöglicht es uns, Messungen an E-Mail-Öffnungen vorzunehmen, die von Ihnen besuchten Links zu verfolgen und zu zählen, die Interessen des Lesers zu messen usw.

Beim Versenden einer E-Mail im Nur-Text-Format können wir nicht alle diese Funktionen nutzen. Im Gegenteil, durch das Nichteinschließen von HTML-Tags erhalten wir andere Vorteile, z Kunden

Das Codieren von HTML für E-Mails kann Ihnen viel Kopfzerbrechen bereiten, da E-Mail-Clients sowohl auf dem Desktop als auch im Web keinen Webstandard erfüllen, HTML-Code und Stylesheets nicht interpretieren oder auf ihre eigene Weise interpretieren. Hinzufügen oder Löschen von Code zu der empfangenen E-Mail, sodass sich das Design der E-Mail, die der Empfänger erhält, erheblich vom Design des Editors unterscheiden kann, der die E-Mail gesendet hat.

HTML über CSS
Versuchen Sie, HTML-Tags und ihre Eigenschaften so oft wie möglich anstelle von Stylesheets zu verwenden, da für Web-Clients viele CSS-Eigenschaften und -Selektoren eingeschränkt sind.

Verwendung von Tabellen für das Layout
Ja, wir gehen zurück zu den Tischen. Die Webstandards besagen, dass Sie die Tabellen nicht zum Entwerfen einer Webseite verwenden sollten. Dies ist jedoch keine Webseite, sondern eine E-Mail, und es wird empfohlen, sie anstelle von <div> zu verwenden, wenn unser Newsletter in den meisten Fällen korrekt angezeigt werden soll E-Mail-Leser. Außerdem unterstützen E-Mail-Clients nicht viele der Eigenschaften, die zum Entwerfen mit <div> -Divisionen erforderlich sind.
Verwenden Sie die Attribute der Tabelle und der Zelle, um die Tabelle anzuzeigen, anstatt CSS-Eigenschaften zu verwenden. Weisen Sie beispielsweise border = “0”, valign = “top”, align = “left” (oder center), cellpadding = “0”, cellspacing = “0” usw. zu. Damit erhalten Sie die Tabelle, um auf alten Mail-Clients gut auszusehen.

Verwenden Sie eine Tabelle als Container für alle Tabellen und internen Elemente (z. B. für die Kopf-, Inhalts- und Fußzeile).

See also  So passen Sie den Wordpress 4.1-Administrator an

Versuchen Sie, nicht viele Tabellen zu verschachteln, und vermeiden Sie die Verwendung der Eigenschaft “colspan”, da diese Eigenschaft von einigen Desktop-Clients nicht sehr gut verstanden wird.
Größe und Auflösung Sicherlich sind Sie es gewohnt, Webseiten in einer Größe von ungefähr 800 × 600 oder 1024 × 768 zu codieren, aber für die Gestaltung von E-Mails in HTML funktioniert dies möglicherweise nicht sehr gut, da die meisten Clients die E-Mails in einer Art “Vorschaufenster” anzeigen. “was normalerweise ein Teil des gesamten verfügbaren Platzes ist.

Am ratsamsten ist es, die Breite in 500-600px zu konfigurieren oder eine Größe in Prozent anzugeben, wie ich es normalerweise mache, um mich an den verfügbaren Platz anzupassen.

Verwendung von Cascade Style Sheets (CSS)
Die Verwendung von Stylesheets in HTML-Dokumenten für E-Mails ist begrenzt und abhängig davon, welcher Client mehr oder weniger Eigenschaften zulässt. Im Idealfall sollten die Stile auf das Etikett selbst angewendet werden (Inline-Stile), anstatt die Klassen in <style> </ style> auf dem Head-Etikett wie auf einer Webseite zu deklarieren.

Beispielsweise ist es ratsam, <p style = “color: red;”> anstelle von <p class = “colorRed”> zu verwenden.

Wenn wir Bilder verwenden, ist es besser, den vollständigen Pfad zu der Domäne zu verwenden, in der das Bild gehostet wird.

administrator

Leave a Reply

Your email address will not be published. Required fields are marked *