So erstellen Sie einen HTML-Brief: Schritt für Schritt Anweisungen

Mailinglisten sind ein wichtiger TeilMarketingkampagnen. Das Erstellen von Briefen ist ähnlich wie das Erstellen einfacher Webseiten. Gleichzeitig sollten einige wichtige Unterschiede berücksichtigt werden. Insbesondere das Versenden von HTML-Briefen ist nur wirksam, wenn sie selbst technisch korrekt zusammengestellt wurden und Inhalt und Stil Ihren Zielen entsprechen. Gleichzeitig gibt es die Ansicht, dass ein Nichtfachmann diese Aufgabe nicht bewältigen kann. Dieser Artikel enthält detaillierte Schritt-für-Schritt-Anweisungen zum Schreiben und Senden von HTML-Briefen.

Merkmale der Schöpfung

Der moderne Mensch erhält täglich einen Durchschnitt5-6 und manchmal bis zu 10 E-Mails. Dies bedeutet, dass Sie nur weniger als eine Sekunde Zeit haben, um die Aufmerksamkeit des Empfängers zu erlangen, bevor er die nächste Korrespondenz liest. Andernfalls ist das Senden von HTML-Briefen völlig unwirksam, und Sie verbringen nur Zeit vergebens.

Eine der Nuancen, die Ihre Chancen erhöhtDie Aufmerksamkeit potenzieller Kunden oder einer anderen Zielgruppe auf sich ziehen, ist die Erstellung von Korrespondenz, die an mobile Geräte angepasst ist. Die meisten, an die Mail gerichtet ist, verwenden sie wahrscheinlich viel häufiger als Desktop-Computer und Laptops.

Zu diesem Zweck können Sie beispielsweise ein „responsives Design“ verwenden, das sich leicht an die Größe des Bildschirms anpasst.

Wie soll das Buchstabenmuster aussehen?

Wenn Sie ein Dokument erstellen, das an Korrespondenten gesendet werden soll, müssen die folgenden Anforderungen erfüllt werden:

• Es sollte ziemlich schmal gemacht werden, d. H. In der Größe, sollte es den Bereich von 500 bis 600 Pixel nicht überschreiten, wodurch die korrekte Anzeige von Text und anderen Inhalten auf Geräten jeglicher Art sichergestellt wird.
• Sie müssen eine ausreichend große Schriftart für alle Textinformationen verwenden, da es auf iOS-Geräten unpraktisch ist, den HTML-Buchstaben zu lesen, wenn die Schriftgröße weniger als 13 Pixel beträgt.
• Elemente, die angeklickt werden können, müssen ausreichend groß und von den nächsten Links isoliert sein. In diesem Fall kann der Empfänger sie vom ersten Versuch an leicht aktivieren.

Vorbereitung von

Bevor Sie einen HTML-Brief entwickeln, sollten Sie dies tunErstellen Sie einen neuen Ordner auf einer der Festplatten und nennen Sie ihn beispielsweise "Mailings". Außerdem müssen Sie das Programm Dreamweaver CS3 herunterladen und installieren. Dieses Produkt von Adobe ist ein relativ einfaches Website-Design-Tool und eignet sich gut für die Entwicklung von HTML-Mailinglisten.

Dokument erstellen und speichern

Bevor Sie den Text des Briefes schreiben, müssen Sie:

• Öffnen Sie das beliebte HTML-Briefgestaltungsprogramm Dreamweaver CS3 (DW).
• Erstellen Sie ein Dokument, indem Sie als Typ "Transitional HTML 4.01" auswählen.
• Speichern Sie die Datei mit der Erweiterung ".html";
• Finden Sie den Bearbeitungsbefehl im oberen Menü.
• Entfernen Sie das Häkchen aus dem Kästchen "CSS statt HTML-Tags verwenden".

Schritt-für-Schritt-Anleitung

Überlegen Sie nun, wie Sie einen HTML-Brief erstellen. Dafür:

• Последовательно открывают в меню вкладки "Einfügen" und "Tabelle" und stellen Sie die gewünschten Parameter der Tabelle ein. Die Zeilen sind beispielsweise 2, die Spalten sind 1, die Breite beträgt 700, der Header steht oben. Ränder können gesetzt werden, oder Sie können auf sie verzichten, indem Sie 0 angeben.
• Bilden Sie den Titel des Briefes. Da der HTML-Brief für eine größere Anzahl von Empfängern gedacht ist, verwenden Sie daher den Operator [Vorname], und ersetzen Sie den gewünschten Namen des Empfängers.
• Im unteren Fenster „Eigenschaften“ legen Sie die erforderlichen Parameter für Schriftart, Größe und Farbe des Texts für Titel und Hintergrundfarbe fest.
• "Beenden" aus dem Kopfbereich. Stellen Sie am unteren Rand des Bildschirms die Parameter für den Cursor „Mitte“ und „Mitte“ ein.
• Fügen Sie den fertigen Text des Buchstabens ein oder "schreiben" Sie ihn direkt in das DW-Programm. Wählen Sie die gewünschte Schriftart und -größe sowie die Position des Texts auf der Seite aus.

Erstellen von Hypertext-Links

Wir werden versuchen, HTML-Buchstaben mehr zu erstellenprofessionell und fortgeschritten. Zu diesem Zweck verstecken wir im Inhalt Hypertext-Links. Wählen Sie dazu die Stelle im Text aus, die als Hypertext-Link ausgewählt ist. In der linken Ecke oben auf dem Bildschirm sollten Sie das entsprechende Symbol „öffnen“ und Ihren Link in das ausgefallene Fenster einfügen. Gleichzeitig müssen Sie daran denken, das Kontrollkästchen „_blank“ zu aktivieren, damit der Link in einem neuen Fenster geöffnet wird und der Empfänger den Zugriff auf den Hauptbuchstaben nach dem Anzeigen nicht verliert.

Wie füge ich Bilder ein?

Normalerweise endet die HTML-E-Mail.Kontaktinformationen, vorzugsweise mit einem Foto des Autors oder mit einem geeigneten thematischen Bild. Es kann vom Internet heruntergeladen oder zuvor in das Internet heruntergeladen werden, da Sie die URL dieses Bildes benötigen. Dies geschieht am besten über einen der kostenlosen Dienste.

Um so ein schönes Finale zu machen:

• Fügen Sie im unteren Teil des Buchstabens, in der Haupttabelle, eine weitere mit 3 Spalten und einem Parameter für den Rand von 0 Pixeln ein.
• Setzen Sie den Cursor an die Stelle der Tabelle, an der das Bild angezeigt werden soll.
• Markieren Sie im unteren Fenster "In der Mitte" und "Am oberen Rand" für jeden Abschnitt.
• Wählen Sie im oberen Menü die Registerkarte "Einfügen".
• Klicken Sie auf die Bildbezeichnung "Image" und fügen Sie die kopierte Adresse in das Dropdown-Menü ein.
• Klicken Sie zweimal auf "OK".

Ansehen

Jetzt, da Sie wissen, wie man HTML-E-Mails erstellt,Stellen Sie sicher, dass der Empfänger es in der richtigen Form sieht. Dazu müssen Sie vor dem Senden Ihre Arbeit im Dreamweaver CS3-Browser anzeigen. Klicken Sie dazu im mittleren oberen Menü auf das Symbol mit dem Globus. Wenn Abrakadabra anstelle von Buchstaben auf dem Bildschirm angezeigt wird, sollten Sie die automatische Codierung in Ihren Browsereinstellungen festlegen.

Kodierung

Gehen Sie im Abschnitt "Projekt" zum Codeteil "Code". Wählen Sie im folgenden Fenster alles aus, was zwischen den Tags und eingeschlossen ist, und kopieren Sie es. Speichern Sie die Datei. Fügen Sie als Nächstes den HTML-Code ein.

Senden von HTML-E-Mails

Um den Newsletter zu erhalten, öffnen Sie den "Smart Reporter" (SR). Dann:

• Wählen oder erstellen Sie einen neuen Buchstaben, indem Sie die Zeilen „Name“ und „Absenderadresse“ ausfüllen.
• Füllen Sie die Zeile "Betreff des Briefes" aus.
• Markieren Sie den HTML-Code im Menü oben links.
• fügen Sie den im Programm DW-Code kopierten Code in ein großes Feld "Source" ein;
• Überprüfen Sie die Richtigkeit der Anzeige mit dem Werkzeug "Vorschau";
• Löschen Sie die Textversion des Briefes.
• Teste es auf Spam mit dem gleichnamigen Button neben dem "Submit" -Button.

Mehrere beliebte Muster

Die Verwendung eines Frameworks hilft sehrBeschleunigen Sie die Erstellung von Briefen und machen Sie sie für Entwickler zugänglich, die gerade die Grundlagen der Erstellung von Webdokumenten erlernen. Die beliebtesten Muster sind:

• Cerberus. Dieser Satz von sogenannten Responsive TemplatesMit dieser Option können Sie Briefe erstellen, die normalerweise sowohl in der Google Mail-Mobilanwendung als auch in Outlook angezeigt werden. Sie können HTML-Codeblöcke entweder einzeln oder durch Kombination verwenden.
• Tinte - Dies ist eine leere Liste von Briefen, deren Mailinglisten nahezu universell und mit allen Geräten und Clients kompatibel sind.
• Wirklich einfache HTML-E-Mail-Vorlage. Mit der Vorlage können Sie sehr einfach und schnell Newsletter erstellen. Es ist richtig, dass sie ein äußerst einfaches Design in Form einer einzelnen Spalte haben werden, die einen Aufruf zum Handeln enthält.

Wie man HTML in einen Brief einbettet

Betrachten wir nun ein etwas anderes Problem. Um HTML-Code in eine E-Mail einzufügen, z. B. Google Mail, und zwar wie im folgenden Beispiel im Google Chrome-Browser:

• Drücken Sie die Taste F12 oder wählen Sie die entsprechende Befehlsfolge im Menü aus.
• Suchen Sie im Fenster mit dem Code für die aktuelle Google Mail-Clientseite die Stelle, an der die HTML-Nachricht eingefügt werden soll, klicken Sie mit der rechten Maustaste und wählen Sie "Als HTML bearbeiten".
• Fügen Sie den kopierten HTML-Code ein.
• Drücken Sie die Kombination der beiden Tasten "Strg" und "Enter".

Zum gleichen Zweck können Sie einfach herunterladenmit dem Mozilla Thunderbird-Programm. Mit seiner Hilfe können Sie einen Brief erstellen und dann zuerst "Einfügen" und dann "HTML" auswählen und den Code Ihres Newsletters dort einfügen.

Werkzeuge

WordPress E-Newsletter Plugin ermöglichtProfessionelle Verwaltung von Newslettern und Abonnenten. Beide werden direkt über das WordPress-Admin-Panel ausgeführt. Dieser Umstand bietet vollständige Kontrolle und ist völlig kostenlos, was sich nur freuen kann.

Ein weiteres einfaches Werkzeug - BulletproofHintergrundbilder, ein einfaches Tool, mit dem Sie Code für das Hintergrundbild der generierten Buchstaben abrufen können. Damit können Sie Korrespondenz viel schöner machen. Zum Entwerfen eines Buchstabens müssen Sie lediglich die URL des gewünschten Hintergrundbilds und dessen Sicherungsfarbe angeben sowie angeben, ob diese Parameter auf den gesamten Text des HTML-Buchstabens angewendet werden sollen oder ob sie nur für eine der Tabellenzellen bestimmt sind. Als Ergebnis erhalten Sie vorgefertigten Code, den Sie kopieren und in Ihre Vorlage einfügen möchten.

Jetzt können Sie eine HTML-E-Mail senden.Die Erstellung ist nicht besonders schwierig, insbesondere wenn Sie vorgefertigte Vorlagen verwenden, die im Web nicht fehlen. Daher können auch diejenigen, die keine speziellen Kenntnisse haben, diese Aufgabe leicht bewältigen.