Newsletter-Design
Mit Vorlagen erstellen Sie Mailings im CI-konformen Layout – ohne Grafik- oder HTML-Kenntnisse. Vorlagen bieten Ihnen die gewünschte Flexibilität, indem Sie jedes Element individuell gestalten können. Dabei geht nie das Gesamt-Layout verloren, da Vorlagen alle Einstellungen berücksichtigen, die aus übergeordneten Elementen geerbt werden. Vorteil: Die Text- und Mobilversion Ihrer HTML-Mailings werden automatisch erzeugt und können nachträglich angepasst werden.
Tip
Keine Inspiration? Optimizely erstellt Ihren Newsletter für Sie.
Möchten Sie für Ihren Newsletter auf die Optimizely Design-Kompetenz zurückgreifen, so übernimmt Optimizely gern die Gestaltung Ihrer Nachrichtenvorlage. Wenden Sie sich für weitere Informationen an die Kundenbetreuung.
Layout-Grundlagen
Jeder Paragraph einer Vorlage, und je nach Konfiguration auch die Vorlage selbst, bietet Gestaltungsmöglichkeiten, die das Layout Ihrer Newsletter beeinflussen:
- Hintergrundfarbe des Newsletters und des Newsletter-Hintergrunds
- Hintergrundfarbe oder -bilder einzelner Paragraphen
- Breite des Newsletters
- Anzahl der Spalten
- Ränder und Abstände einzelner Paragraphen
Beispiel und Erläuterungen
- Pre-Header. Der Pre-Header enthält einen Link zur Online-Version. Sie können weitere Pre-Header einfügen und hier Informationen prominent und aufmerksamkeitsstark platzieren.
- Header. Der Header enthält ein Bild und den Newsletter-Titel. Weitere Elemente, wie das Datum, die Nummer können eingefügt werden. Mit einem Grafik-Editor können Sie auch aufwändige Schrifteffekte in das Bild einfügen.
- Seitenleiste. Die Seitenleiste erzeugt ein zweispaltiges Layout. In diesem Beispiel erhält die Seitenleiste eine andere Hintergrundfarbe, um Sie vom Hauptbereich abzuheben. Wenn Sie ein solches Layout wählen, müssen Sie einen Innenabstand angeben, um einen Rand zwischen dem Kasten und dem Text zu erzeugen. Ebenfalls muss ein Abstand zwischen Seitenleiste und Hauptbereich angegeben werden, damit der Text- und Bildblock des Hauptbereiches nicht am Kasten der Seitenleiste „klebt“.
- Hauptbereich. Der Hauptbereich hat hier dieselbe Hintergrundfarbe wie der gesamte Newsletter. Der Text/Bild-Paragraph verläuft daher über die gesamte verfügbare Breite und benötigt keinen Innenabstand. Das Bild ist zentriert zwischen Überschrift und Text positioniert. Der Teaser-Text verlinkt auf eine Landing-Page.
- Inhaltsverzeichnis. Das Inhaltsverzeichnis ist ein eigener Paragraphentyp und kann an jeder beliebigen Stelle in der Vorlage platziert werden. Bei individuellen Mailing-Vorlagen kann das Inhaltsverzeichnis auch fest implementiert werden. Die Texte, die das Inhaltsverzeichnis anzeigt, können Sie in den einzelnen Paragraphen eingeben – oder einfach die Paragraphenüberschriften verwenden (Standard).
- Bildposition. Hier ist das Bild links neben der Überschrift positioniert. Bilder werden auf 50% der verfügbaren Breite verkleinert, wenn sie größer sind. Bilder werden relativ zu Text, Link und Überschrift positioniert. Wenn Sie statt der hier gewählten Positionierung links unter der Überschrift wählen, wird die Überschrift nicht mit einbezogen und erscheint über die gesamte Breite des Paragraphen.
- Laufende Spalte. Paragraphen mit einer geringeren Breite werden bis zum Erreichen der verfügbaren Gesamtbreite nebeneinander gesetzt. Auf diese Weite kann ein Layout mit laufenden, variablen Spalten erzeugt werden. Wird die Breite der Paragraphen genau auf den x-ten Teil der verfügbaren Breite gesetzt, füllen die einzelnen Blöcke den Raum genau aus und erzeugen ein Spalten-Layout.
- Leere Spalte. Im Gegensatz zum laufenden Spalten-Layout wird die Seitenleiste nicht aufgefüllt, wenn hier keine weiteren Inhalte eingegeben werden.
- Einspalter. Bei einem einspaltigen Layout nimmt der Paragraph die gesamte Newsletter-Breite ein. Um in einer Vorlage verschiedene Layouts (z. B. ein- und zweispaltig) zu realisieren, werden Gliederungsparagraphen oder spezielle Paragraphen eingesetzt.
- Hintergrundfarbe. Für diese Paragraphen wurde eine Hintergrundfarbe (dieselbe wie für die Seitenleiste) gewählt. Es muss ein Innenabstand gesetzt werden, damit der Textblock einen Abstand zum Rand des Paragraphen erhält.
- Variabler Footer. Der Footer kann mehrere Paragraphen enthalten. Fuß-Paragraphen können wie normale Inhaltsparagraphen bearbeitet werden.
- Fester Footer. Dieser Footer enthält das Impressum und Kontaktinformationen des Newsletters. Außerdem ist die gesetzlich vorgeschriebene Abmeldemöglichkeit in der Regel hier enthalten. Der Paragraph ist fest in der Vorlage hinterlegt und muss normalerweise nicht angepasst oder bearbeitet werden.
- Newsletter-Breite. Die ideale Breite des Newsletters ist abhängig vom Gerät des Empfängers (Responsive-Design):
- Desktop-Version. 600 Pixel bis 650 Pixel
- Mobilversion. 480 Pixel (siehe Mobile Fusion)
Unterstützte Schriftarten
Im Template-Kit können Sie die folgenden Schriftarten verwenden:
- Arial
- Comic Sans
- Courier New
- Georgia
- Lucinda Sans Unicode
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Sie können abweichende Schriftarten als Bild im Template-Kit hinterlegen. Texte, die auf diese Art umgesetzt wurden, können Sie über das Template-Kit nicht bearbeiten.
Note
Bilder im Mailing sind erst nach dem Laden sichtbar.
Gestaltungsmöglichkeiten
Farb- und Hintergrundverläufe sowie Schatten können nicht dargestellt werden. Es ist jedoch generell möglich, die Ecken abzurunden. Sollten Sie die Nachrichtenvorlage selbst in Optimizely Campaign erstellen, können Sie dies im jeweiligen Gliederungsparagraphen unter Rahmen einstellen.
Mobile Fusion
Das Template-Kit bietet eine Vorschau für die mobile Darstellung Ihrer Mailings auf ausgewählten Smartphones und Tablets. Mit dieser Vorschau können Sie die Mobilansicht Ihrer Newsletter für das Hoch- und Querformat prüfen.
Damit die Leser auf mobilen Endgeräten nicht seitlich, sondern nur von oben nach unten scrollen, werden alle Inhaltselemente in der Mobilversion automatisch untereinander dargestellt. Sie können für die jeweiligen Inhaltsbereiche festgelegen, ob zuerst die Bilder oder die Texte angezeigt werden. Außerdem haben Sie die Möglichkeit, alle Inhaltsbereiche für die Desktop- oder Mobilversion flexibel ein- oder auszublenden.
Weitere Informationen finden Sie unter Mobile Fusion.