Look & Feel

Aufbau des HTML-Newsletters

Der Header eines HTML-Newsletters enthält die wichtigsten Elemente zur Wiederer­kennung des Absenders. Das Markenlogo (1) wird oben im 
Headerbereich eingesetzt. Es stehen hierbei zwei Optionen zur Verfügung.

Technische Anforderungen

Die Darstellung eines HTML-Newsletters ist abhängig vom verwendeten
E-Mail-Programm bzw. Web-Mail-Anbieter. Unter Umständen werden einzelne Bereiche und Elemente nicht oder nur unvollständig angezeigt. Inhalte können
dazu führen, dass der HTML-Newsletter vom Spam-Filter geblockt wird. 
Folgende technischen Anforderungen sind daher für eine sichere Zustellung sowie für die optimale Darstellung in allen E-Mail-Programmen zu beachten:  

• Die Breite des HTML-Newsletters beträgt maximal 600 px.

• Das Datenpaket ist nicht größer als 205 KB.

• Der Quelltext umfasst höchstens 999 Zeichen.

• Die Umsetzung des Newsletters erfolgt ausschließlich in HTML.

• Für Bilder sollten zusätzlich sog. „alt-Tags“ gesetzt werden,
  die – falls nötig – Bilder mit Platzhalter-Texten ersetzen.

• Als Alternative sollte eine reine Text-Version mitgeliefert werden.

Das Erstellen und Versenden von HTML-Newslettern übernehmen externe
oder interne Dienstleister. Der Produktionsprozess sowie gesonderte technische Rahmenparameter sind mit diesen abzustimmen.

Option 1: Einsatz des Markenlogos im Logostreifen

• Die DB Bildmarke hat eine Breite von 36 px. 

• Die Höhe des Keyvisuals ist variabel.

• Die Farbfläche hat stets die Kennfarbe des Absenders

• Der Logostreifen kann über oder unter dem Keyvisual platziert werden
  und hat eine Standardhöhe von 1½ DBx = 54 px und eine Mindesthöhe
  von 1/3 DBx = 12 px.

Option 2: Einsatz der Logobox

• Die DB Bildmarke in der Logobox hat eine Breite von 36 px. 

• Der Abstand der Logobox zum Bildrand beträgt ¾ DBx = 27 px. 

Einsatz von Markierungen

Optionale Markierungen werden rechts im Layout im DB Winkel platziert.
Der Abstand nach rechts und links entspricht ½ DBx = 18px.
Die Versalhöhe beträgt 1/3 DBx = 12 px.

Weitere Informationen

Es kommt unsere Hausschrift „DB Type“ zum Einsatz. Für die Anwendung in elektronischen Medien wurden ausgewählte Schnitte als Webfonts entwickelt. Als Ersatzschrift für Fließtexte wird eine Systemschrift verwendet. Diese
dient der Darstellung von Textinhalten bei Nutzern, die nicht über die
DB Type verfügen. Feste Bausteine, wie bspw. der Newsletter-Titel, die Headline, oder DB Interaktionselemente können als Bild eingesetzt werden.

Der Umgang mit der Headline (1) ist ein charakteristisches Merkmal unseres Erscheinungsbildes. Der Fett-Fein-Kontrast hebt einzelne Worte hervor und betont die Kernaussage. Die Headline wird idealerweise mit prägendem Zeilenversatz gesetzt – alternativ linksbündig.

• Schriftart: DB Head Light und
  DB Head Black 

• Zeilenabstand: 115–125%

• Schriftgröße: mindestens 20 px 

• Schriftfarbe: Weiß oder DB 03-13

• Innerhalb der Headline kommt nur eine Schriftgröße und -farbe zum Einsatz.
  

Weitere typografische Bausteine wie z.B. Ausgabe und Erscheinungsdatum werden gut lesbar in der DB Sans Bold gesetzt.
 

• Schriftart: DB Sans Bold

• Schriftgrößenempfehlung:
  mind. 14 px

Text auf Transparenzen

Das Anschreiben eines HTML-Newsletters vermittelt einen persönlichen Briefcharakter. Es wird auf einer hellen Fläche (in Weiß oder einem sehr hellen Grauton aus der
DB Farbpalette) unter dem Bildbereich platziert. 

Eingebettete Schaltflächen basieren auf den 
DB Interaktionselementen (3). Eine handschriftliche 
Signatur (4) schließt das Anschreiben ab. 

Wichtig ist zudem eine Verlinkung zu den Social Media-Kanälen. Die Symbole hierfür sind aus den DB Icons (5) 
zu entnehmen.

Im Inhaltsbereich können ein oder mehrere Teaser platziert werden. Teaser werden mit weißer Grundfläche (1) gestaltet. Die Anordnung von Flächen, Text- und Funktionselementen innerhalb des Teasers ist variabel. 

Das Impressum ist verpflichtend und kann entweder im Footer platziert  oder verlinkt werden.

Ein Störer lenkt die Aufmerksamkeit
auf wichtige Teilaspekte der Werbebotschaft und enthält z.B. spezielle Angebote oder ergänzende Informationen. Form und Farbe können frei gewählt werden. Der Einsatz dezenter Schlagschatten und Lichtkanten ist möglich.

Richtlinien für den Einsatz eines Störers:

Es werden die DB Icons verwendet. Diese können auf Flächen in Farben der DB Farbpalette platziert werden. Der Einsatz von dezenten Schlagschatten hinter den Farbflächen ist möglich.
Für Social Media Icons werden zwecks schneller Wiedererkennbarkeit die jeweiligen Unternehmensfarben verwendet. 

Grundsätzlich werden DB Interaktionselemente in HTML-Newslettern in den Kennfarben des Absenders gestaltet. Der Einsatz der DB Sekundärfarben ist möglich, um spezifische, thematische Akzente zu setzen.