HTML & CSS: E-Mail-Codierungskonzepte

Das Eintauchen in die Welt des Programmierens kann entmutigend erscheinen, wenn Sie es noch nie zuvor getan haben. Insbesondere die E-Mail-Codierung hat ihre eigenen Regeln. Wenn Sie neu im Programmieren sind, sollten Sie Folgendes beachten, bevor Sie direkt in HTML und CSS für E-Mails eintauchen.

Muss ich meine E-Mail verschlüsseln?

Wenn Sie keine Programmiererfahrung haben, ist das Codieren einer E-Mail von Grund auf keine praktische Lösung für Sie, und es ist sicherlich nicht erforderlich. VerticalResponse bietet eine große Auswahl an mobilfreundlichen Vorlagen und bietet einen benutzerfreundlichen Editor, mit dem Sie unsere sofort einsatzbereiten Vorlagen mit Ihren eigenen Inhalten anpassen können.

Wenn Sie Erfahrung und ein gewisses Maß an Komfort beim Verwenden oder Erlernen von HTML haben, könnte das Codieren einer benutzerdefinierten E-Mail-Vorlage eine großartige Option sein. Wie bei der Codierung einer Webseite müssen Sie immer noch das Browser- und Geräteverhalten berücksichtigen. Berücksichtigen Sie außerdem die einzigartigen Stilvorgaben von Dutzenden von E-Mail-Clients wie Gmail, Yahoo, Outlook und mehr. Wenn Sie daran gewöhnt sind, eine Webseite in HTML zu codieren und ein externes CSS-Stylesheet anzuwenden, müssen Sie sich daran gewöhnen, intern und inline mit CSS zu arbeiten, damit Ihre Stile nicht von diesen E-Mail-Client-Standardeinstellungen überschrieben werden.

Wortschatz zu wissen

Wenn Sie ganz neu im Programmieren sind, sollten Sie Folgendes über HTML und CSS wissen:

HTML ist eine Sprache, die Sie verwenden, um Ihre Inhalte zu strukturieren und zu beschreiben. HTML steht für Hypertext Markup Language. Wenn Sie in HTML codieren, markieren Sie Ihre Inhalte mit Tags, die dem Webbrowser mitteilen, wie er Informationen wie Bilder und Wörter auf einer Webseite anzeigen soll.

CSS ist eine Sprache, die die Darstellung Ihrer Inhalte beeinflusst. Mithilfe von CSS können Sie HTML-Elementen Stile zuweisen. CSS steht für Cascading Stylesheet. Das Wort Kaskade ist von Bedeutung, da Stilerklärungen oder Regeln in der Reihenfolge ihres Erscheinens berücksichtigt werden. Wenn Sie zwei Deklarationen für dasselbe Element vornehmen, wird letzteres berücksichtigt, da es das überschreibt, was davor steht.

Hier sind die Möglichkeiten, Ihr CSS an Ihren HTML-Code zu binden:

Externes CSS: Verwendung eines externen Stylesheets (eine Datei mit dem allgemeinen Namen style.css), auf das in Ihrer HTML-Datei verwiesen wird. Das ist großartig für Websites, denn wenn Sie 100 gemeinsame Elemente haben, die sich über 100 Seiten erstrecken, können Sie sie alle auf einmal mit einer einzigen CSS-Deklaration ändern.

Internes CSS, auch bekannt als Embedded CSS: Fügen Sie Ihren CSS-Code in <style>-Tags oben in Ihrer HTML-Datei ein. Beim Codieren einer E-Mail kann dies großartig sein, um allgemeine Stile zuzuweisen, die für gemeinsame Elemente gelten. Diese Methode wird jedoch nicht immer per E-Mail unterstützt.

Inline-CSS: Anhängen von CSS-Code an ein einzelnes HTML-Element direkt im HTML-Code. Bei der E-Mail-Codierung stellt diese Methode sicher, dass bestimmte Stile nicht durch Browser- und E-Mail-Client-Standardeinstellungen überschrieben werden.

Wenn Sie es gewohnt sind, Ihr CSS extern oder intern einzurichten, können Sie es so erstellen und dann ein Inliner-Tool wie dieses von PutsMail verwenden, um Ihre Stile in Inline-CSS umzuwandeln.

Die Beziehung zwischen HTML und CSS

Um eine bessere Vorstellung davon zu bekommen, wie HTML und CSS zusammenhängen und wie die Trennung von CSS von HTML die Präsentation Ihres HTML-Codes erleichtern kann, besuchen Sie die fantastische und gefeierte Website CSS Zen Garden, auf der Sie dasselbe HTML-Markup mit drastisch unterschiedlichem CSS anzeigen können , codiert von bekannten Designern.

Annäherung an die E-Mail-Codierung

Wenn Sie eine E-Mail von Grund auf neu codieren, halten Sie es so einfach wie möglich. Verwenden Sie einen einfachen Texteditor wie TextWrangler, Notepad oder Sublime und halten Sie sich von visuellen Editoren wie Dreamweaver fern, da sie Ihrem Code unnötige Elemente hinzufügen können.

Versuchen Sie beim Layout, einen Mobile-First-Ansatz zu verfolgen. Das bedeutet, für kleine Bildschirme zu entwerfen und sich nach oben zu arbeiten. Da die Anzeige auf Mobilgeräten ständig zunimmt, ist es wichtiger denn je, sicherzustellen, dass Ihre E-Mails auf Telefonen und Tablets gut aussehen. Es gibt keinen Grund, ein kompliziertes Design zu erstellen, das nur auf einem Desktop gut aussieht. Wenn Sie Ihre Botschaft und Ihr Design für die kleinsten Geräte einfach genug halten, ist es auch einfacher zu codieren, sie wird für Benutzer aller Geräte zugänglich sein und die Aufmerksamkeit Ihrer Leser auf den Hauptaufruf zum Handeln lenken.

Sobald Ihr Layout und Ihre Codierung abgeschlossen sind, verwenden Sie ein Tool wie Litmus oder den Inbox Preview for HTML-Editor von VerticalResponse, um eine Vorschau Ihrer E-Mail in verschiedenen Browsern und E-Mail-Clients anzuzeigen, damit Sie alle Probleme beheben können, bevor Sie auf Senden klicken.

Wo anfangen zu lernen

Es gibt viele Online-Tutorials, in denen Sie im Detail lernen können, wie Sie eine E-Mail codieren. Eine gute Möglichkeit, in die E-Mail-Codierung einzutauchen, besteht darin, eine einfache Vorlage zu finden, die Ihnen gefällt, und einige Zeit damit zu verbringen, den Code zu untersuchen. Machen Sie sich zunächst mit den wichtigsten Tags wie <body>, <head> und <div> vertraut und beachten Sie dann, wie Tags manchmal weiter in IDs oder Klassen definiert werden, wie z. B. <div class=”half-column”>. Beachten Sie, dass die Benennung in einer hochwertigen HTML-Vorlage klar und logisch ist, sodass es einfacher ist zu erkennen, was passiert, wenn es im CSS erscheint.

Wenn Sie für eine Schritt-für-Schritt-Lektion bereit sind, suchen Sie nach aktuellen Tutorials (innerhalb des letzten Jahres). Die Herangehensweise an das Codieren wird ständig überdacht. Eine mobilfreundliche Methode, die in den letzten Jahren an Popularität gewonnen hat, ist beispielsweise der Fluid/Hybrid-Ansatz. Dieses flüssige/hybride Tutorial von Envato Tuts+ ist großartig für diejenigen, die bereits ein gewisses Verständnis von HTML haben. Für Anfänger bietet Lynda.com viele E-Mail-spezifische Programmierkurse an. Ein guter Kurs führt Sie durch eine Programmierübung und bietet eine herunterladbare Beispielprojektdatei, die Sie als Referenz verwenden können.

Verbringen Sie weniger Zeit damit, mehr Kunden zu erreichen

PROBIEREN SIE HEUTE VERTICALRESPONSE AUS

(Es ist kostenlos!)

Anmerkung des Herausgebers: Dieser Blogbeitrag wurde ursprünglich im März 2016 veröffentlicht und wurde hinsichtlich Genauigkeit und Relevanz überarbeitet und aktualisiert.