Hybrid-Templates Leitfaden

Mit Hybrid Designs die größte Anzahl von Mobil- und Desktop-Clients abdecken.

 

Hybrid-Design für Ihr E-Mailing-Template

Da eMailings und auch Newsletter immer häufiger auf mobilen Endgeräten abgerufen werden, sollte der Darstellung auf kleineren Viewports eine hohe Priorität eingeräumt werden. Zeitgleich muss natürlich auch die optimale Darstellung des eMailings für Desktop-Bildschirme gewährleistet sein. Die Hybrid-Programmiertechnik ermöglicht genau das: Über ein klar strukturiertes, mobil orientiertes Layout wird die größte Anzahl von Mobil- und Desktop-Clients abgedeckt. Dabei bleiben alle Größenangaben und Ausrichtungen in der Desktop- und mobilen Version gleich, um für Ihren Newsletter ein möglichst einheitliches Erscheinungsbild auf allen Clients zu gewährleisten. In diesem Leitfaden erklären wir Ihnen, was Sie bei der Erstellung Ihres Template-Layouts im Hybrid-Design beachten müssen und, was Sie vermeiden sollten.

 

Schematische Darstellung

Über ein klar strukturiertes, mobil orientiertes, Layout wird die größte Anzahl von Mobil- und Desktop-Clients abgedeckt.

 

Desktop-Ansicht

 

Design-Leitfaden für Hybrid-Templates

Wichtige Gestaltungsgrundlagen

• Orientieren Sie sich für Ihren Entwurf an Ihrem Corporate Design und verwenden Sie ein gleichbleibendes Layout. So erhöhen Sie die Wiedererkennung im Posteingang.
• Wählen Sie eine klare und einfache Struktur. Das führt am Ende zu einer besseren Darstellung der Newsletter beim Empfänger. Ein hybrid-freundliches Layout enthält keine zusätzlichen Verschachtelungen in der Tabellenstruktur.
• Zeigen Sie verschiedene Darstellungsvarianten in Ihrem Layout (z.B. Artikel mit/ohne Bild, mit/ohne Headline, viel und wenig Text, ein- und mehrzeilige Headlines).
• Berücksichtigen Sie auch die Einbindung von Sonderelementen (z.B. Social-Media-Icons).
• Verzichten Sie auf Hintergrundbilder und -verläufe, da diese in einigen Clients nicht korrekt dargestellt werden.
• Das E-Mailing wird in allen relevanten Clients und in den Browsern hauptsächlich mittig platziert, verfügt über einen Hintergrund und benötigt ggf. zur Abgrenzung vom Hintergrund Linien – zu einem kompletten Template-Layout zählen alle Elemente, wie Hintergrund, Begrenzungen und das E-Mailing selbst.
• Bitte denken Sie bereits bei der Layout-Erstellung daran, dass wir für die Umsetzung eine offene PSD-Datei als Programmiervorlage von Ihnen benötigen.

 

Inhaltliche „Must-haves“

• Abbestellmöglichkeit: Der Abmelde-Link in Newslettern und E-Mailings ist vorgeschrieben und (Best Practice: One-Click) sollte im Footer platziert werden.
• Impressum: Für Newsletter gilt die Kennzeichnungspflicht mit allen Kontaktdaten.
• Tracking: Es sollte möglich sein, über einen Link im Newsletter personenbezogenes Tracking zu deaktivieren.
• Alles weitere Wissenswerte zum Thema „zulässiges E-Mail-Marketing“ finden Sie zum Nachlesen in der eco Richtlinie: https://certified-senders.org/wp-content/uploads/2017/05/Marketing-Richtlinie.pdf

 

Schriftarten und -größen

Bei einem Hybrid-Template bleiben alle Größenangaben in der Desktop- und der mobilen Variante gleich. Dies gilt auch für die Schrifttypen und -größen. Achten Sie daher bereits in der Desktop-Version auf eine ausreichende Schriftgröße: Um bei einer kleineren Bildschirmgröße die Lesbarkeit zu gewährleisten, ist es sinnvoll, eine Schriftgröße von mindestens 14 px bis 16 px für Fließtexte und Call-to-Action-Buttons zu verwenden.

• Verwenden Sie ausschließlich webkonforme, plattformübergreifende, serifenlose Standard-Fonts (Arial, Helvetica und Verdana). Sonderschriften können nicht verwendet werden.
• Beschränken Sie sich bei der Gestaltung auf wenige Schrifttypen und -größen, da der Newsletter sonst unübersichtlich und unseriös wirken kann.
• Eine feste Höhe von Text-Elementen (Headline mehrzeilig, Kurztext mit festgelegter Zeilenzahl) sollte vermieden werden, da eine feste Höhe von einigen Clients nicht unterstützt wird und es zu unschönen Darstellungen kommen kann.
• Es ist keine automatische Silbentrennung und kein bildumfließender Text möglich.

 

Call-to-Action-Buttons

Die Breite eines Call-to-Action-Buttons passt sich automatisch an die Länge des Call-to-Action-Textes an. Achten Sie grundsätzlich darauf, dass Sie möglichst kurze und zeitgleich aktivierende CTA-Texte einsetzen (z.B. „Mehr erfahren“ statt „Erfahren Sie auf den folgenden Seiten mehr“). Die Größe des Buttons muss zur Bedienung mit dem Finger auf mobilen Endgeräten ausreichend sein. Die Schriftgröße sollte mindestens 14 px betragen. Die Buttons werden als vollflächig klickbare Buttons programmiert.

• Vermeiden Sie nach Möglichkeit CTA-Buttons mit abgerundeten Ecken. Diese werden in einigen Clients häufig eckig dargestellt.
• Beachten Sie, dass bei der Kombination von Text-CTA und CTA-Grafik nicht gewährleistet werden kann, dass die Grafik immer auf der korrekten Höhe angezeigt wird. In einigen Clients sind Verschiebungen nach oben und unten möglich.
• Der Zeilenabstand des Textes im Button kann nicht variabel programmiert werden. Verzichten Sie auf 2-zeilige Buttons.

Die Länge des CTA-Buttons richtet sich nach der Textlänge.

 

Bildgrößen

• Bei einem Hybrid-Template bleiben alle Größen-Angaben und damit auch die Bildgrößen gleich. Bilder werden also nur in einer Größe hinterlegt und dann, je nach Viewport, klein- bzw., sofern möglich, hochskaliert. Das Seitenverhältnis des Bildes ändert sich nicht bei der Skalierung.
• Definieren Sie keine festen Bildhöhen. Bei der Programmierung wird lediglich die Breite des Bildes fix im Template hinterlegt. Die Höhe wird nicht definiert, da es sonst zu Bildverzerrungen kommt, wenn das Bild vom Redakteur nicht in der richtigen Größe eingebunden wird.
• Verzichten Sie auf die Einbettung von Texten und Logos innerhalb eines Bildes. Da Bilder kleinskaliert werden, kann das Bild oder der Text unter Umständen sehr klein und damit schlecht lesbar werden. Verwenden Sie hierfür lieber ein separates Logo bzw. ein gesondertes Textfeld.
• Verzichten Sie auf „runde Icons“, da diese durch die Skalierung auf den unterschiedlichen Viewports schnell „pixelig“ aussehen können.
• Bilder können in der Mobil-Ansicht technisch bedingt nicht in allen Clients auf die Breite des Viewports hochskaliert werden. In diesem Fall werden die Bilder in der Mobil-Ansicht in derselben Größe angezeigt, in welcher sie auch in der Desktop-Ansicht angezeigt bzw. definiert werden.

Bei Texten in Bildern kann der Text beim Skalieren der Bilder leicht unleserlich werden.

 

Viewport

Beim Hybrid-Design passt sich der Newsletter automatisch an die unterschiedlichen Gerätegrößen an, sobald die maximale Breite des Newsletters (z.B. 600 px) auf dem jeweiligen Viewport (z.B. Desktop-Bildschirm, Vorschaufenster Outlook, Mobile Device) unterschritten wird.

Newsletter-Darstellung in unterschiedlichen Viewports

 

Ein- und Ausblenden von Elementen

Die Hybrid-Programmierung verzichtet auf Media Queries. Das Hinzufügen und Ausblenden von Elementen (z.B. Inhaltsverzeichnis wird in der Desktopversion angezeigt, nicht aber in der Mobilversion) ist daher nicht möglich. Beachten Sie daher bei der Gestaltung, dass alle Elemente in beiden Versionen vorhanden sein müssen.

 

Newsletter-Breite und Basis-Abstand

Bei einem Hybrid-Template bleiben alle Größenangaben und Ausrichtungen in der Desktop- und mobilen Version gleich. Aus allen mehrspaltigen Bereichen des Layouts wird in der mobilen Variante automatisch ein einspaltiges Layout. Dafür benötigt jedes Objekt zwingend den gleichen sogenannten Basis-Abstand. Dieser Basis-Abstand definiert in der Desktop-Version den Abstand der Objekte zueinander und in der mobilen Version den Abstand zum Displayrand. Die Gesamtbreite des Newsletters ergibt sich dann als Summe der einzelnen Spalten-Variationen. Dabei sollte die Newsletter-Breite zwischen 600 und 780 px für die Desktop-Variante und 320 px für die mobile Variante liegen.

 

1-spaltiges Layout

Ein Artikel geht immer über die Gesamtbreite des Newsletters. Dabei kann der Text auch neben dem Bild stehen.

Spaltenbreite: 660 px
Artikelbereich: 640 px (= Gesamtbreite - 2 x Basis-Abstand(rot))

 

2-spaltiges Layout

Ein Artikel nimmt die Hälfte der Gesamtbreite des Newsletters ein.

Spaltenbreite: 330 px (= Gesamtbreite : 2)
Artikelbreite: 310 px (= Spaltenbreite - 2 x Basis-Abstand (rot))

 

3-spaltiges Layout

Ein Artikel nimmt ein Drittel der Gesamtbreite des Newsletters ein.

Spaltenbreite: 220 px (= Gesamtbreite : 3)
Artikelbreite: 200 px (= Spaltenbreite - 2 x Basis-Abstand (rot))

 

Abstände zwischen Artikelelementen

Die Detailansichten für die unterschiedlichen Artikel-Layouts (1-spaltig, 2-spaltig, 3-spaltig) finden Sie auf den nachfolgenden Seiten. Bitte beachten Sie, dass es sich bei den Pixelangaben um Beispiele auf Basis der allgemeinen Gestaltungsgrundlagen handelt. Es soll hier insbesondere verdeutlicht werden, dass alle Größenangaben und Abstände in der Desktop- und mobilen Version identisch sind.

 

1-spaltiges Layout: Bild über/unter Text

Unabhängig vom Artikel-Layout bleiben alle Abstände und Schriftgrößen in der Desktop-und mobilen Version gleich.

Basis-Abstand: 10 px (rot)
Schriftgröße Headline: 18 px
Schriftgröße Kurztext: 14 px
Abstand A: 15 px
Abstand B: 10 px
Abstand C: 10 px
Abstand D: 10 px
CTA-Schriftgröße 16 px

 

1-spaltiges Layout: Bild neben Text

Da sich dieses Artikel-Layout mit Bild neben Text vom Aufbau wie ein 2-Spalter verhält, ist zu beachten, dass zwischen den Objekten der doppelte Basis-Abstand entsteht. In der Desktop- Variante ergibt sich ein doppelter horizontaler Basis-Abstand zwischen Bild und Text, in der mobilen Variante ein vertikaler.

 

1-spaltiges Layout: Bild ohne Basis-Abstand

Wenn Sie in Ihrem Layout Bilder ohne Basis-Abstand verwenden möchten, ist dies natürlich ebenfalls möglich. Beachten Sie in diesem Fall, dass der Basis-Abstand für die anderen (Text-) Elemente des Newsletters dennoch berücksichtigt werden muss.

 

Mehrspaltige Layouts und Abstände

Sind mehrspaltige Layout-Varianten für Artikel gewünscht, empfehlen wir diese 2-spaltig in einer 50:50-Aufteilung anzulegen. Um den Anforderungen an ein klar strukturiertes und mobil orientiertes Layout nachzukommen, ist die Verwendung von 1- und 2-spaltigen Artikeln für die Content-Pflege optimal. Bei einem 3-spaltigen Artikel- Layout berücksichtigen Sie bitte die im Design-Leitfaden genannten Besonderheiten.

2-spaltiges Layout

Auch in mehrspaltigen Layouts bleiben alle Abstände und Schriftgrößen in der Desktop- und der mobilen Version gleich.

Basis-Abstand: 10 px (rot)
Schriftgröße Headline: 18 px
Schriftgröße Kurztext: 14 px
Abstand A: 15px
Abstand B: 10 px
Abstand C: 10 px
Abstand D: 10 px
CTA-Schriftgröße 16 px

 

3-spaltiges Layout

Sollten Sie ein 3-spaltiges Layout in Betracht ziehen, bedenken
Sie bitte Folgendes:

• 3-spaltige Artikel werden meist sehr schmal. Da Mail-Clients keine Silbentrennung unterstützen, können längere Wörter schnell das komplette Layout verschieben.
• Es besteht die Gefahr, dass Texte in Buttons zu lang werden und der Button 2-zeilig dargestellt wird. Da der Zeilenabstand im Button nicht variabel programmiert werden kann, führt dies zu Darstellungsproblemen.

In der Mobil-Ansicht werden die Artikel analog zum 2-spaltigen Layout untereinander dargestellt. 

 

 

Anordnung der Elemente

Elemente innerhalb eines Artikels

Bei der Anordnung der Elemente (Bild, Headline, Kurztext usw.) innerhalb eines Artikels sind Sie bei der Gestaltung grundsätzlich flexibel. Die im Layout definierte Anordnung wird dann für die Programmierung übernommen. Bei 1-spaltigen Artikeln mit Bild links oder rechts und daneben stehendem Textbereich können Sie entscheiden, ob das rechte Element in der mobilen Version vor oder nach dem linken Element dargestellt wird.

Der Textblock kann entweder vor oder nach dem Bild in der Mobilversion angeordnet werden, dies muss allerdings vorher in der Programmierung definiert werden.

 

Ausrichtung von Objekten

Bei einem Hybrid-Template bleiben nicht nur die Größenangaben, sondern auch die Ausrichtung immer gleich. Alle Objekte innerhalb eines Artikels müssen einheitlich ausgerichtet sein (alle Elemente rechtsbündig, linksbündig ODER mittig), damit in der mobilen Version kein unschöner Versatz entsteht.

 

Bild und Text links ausgerichtet

Sind Objekte im Newsletter einheitlich angeordnet, entsteht in der Mobil-Ansicht kein Versatz.

 

Bild und Text links/rechts ausgerichtet

Wenn Objekte im Newsletter rechts- und linksbündig angeordnet sind, entsteht in der Mobil-Ansicht ein unschöner Versatz.

 

Dateianforderungen (PSD) für das Screendesign

Für die Programmierung des Templates benötigen wir Ihr freigegebenes Hybrid-Layout als offene PSDDatei. Aus der PSD-Datei entnehmen unsere Programmierer 1:1 alle Größen und Abstände. Die PSD-Datei muss folgende Anforderungen erfüllen:

• Farbraum: RGB
• Auflösung: 72 dpi
• Anlage: offen in Ebenen (Texte und Bilder)
• Texte: als Text eingebunden (Nur webkonforme Standardschriften Arial, Verdana, Helvetica)
• Abstände und Größen: sauber und einheitlich in ganzen Pixeln angeben
• Logische, saubere Ebenenstruktur und Ebenen sinnvoll benannt
• Eine PSD-Datei für das Desktop-Layout und eine separate PSD-Datei für die mobile Version (ggf. weitere
• PSD-Datei für das Landingpage-Layout, siehe „Zusätzliche Darstellungsformen“)
• Logos und Social-Media-Icons separat als transparentes PNG anliefern

 

Zusätzliche Darstellungsformen

Zu einem Hybrid-Template gehören in jedem Fall folgende Darstellungsvarianten: eMail (HTML) für Desktop und Mobil sowie eMail (Text). Die Textversion wird automatisch auf Basis der HTML-Variante generiert und für eMail-Clients angezeigt, die kein HTML darstellen können oder sollen. Hierfür benötigen wir keine gesonderte Vorlage von Ihnen. Sofern Sie darüberhinaus die Darstellung erweiterter Inhalte eines Artikels (Langtext) auf einer Landingpage wünschen, benötigen wir hierfür eine separate Vorlage von Ihnen. Das Landingpage-Layout orientiert sich in der Regel stark am Template-Layout. Insbesondere Header- und Footerbereich werden oft 1:1 aus dem Mailing übernommen. Zusätzlich könnten dann beispielwiese eine Bildergalerie auf der Landingpage integriert werden.

 

Darstellungsformen des Newsletters

Bei der Erstellung eines Templates ist auf die diversen Darstellungsformen zu achten.

Auch ohne Template eigene Landingpage haben Sie natürlich die Möglichkeit, auf eine externe, bereits existierende Website durch Eingabe der entsprechenden URL im Artikel zu verlinken. Sofern Sie eine PDFVersion, also eine druckoptimierte Form des Newsletters benötigen, sprechen Sie uns bitte an.

 

Client- und Browser-Kompatibilität

Im Rahmen der technischen Umsetzung von E-Mail-, Landingpage- und Website-Vorlagen können Abweichungen zum Original-Entwurf auftreten, z.B. bei der visuellen Ausrichtung, der Farbtreue und bei Schriftschnitten und -darstellungen. Ein Anspruch auf 100%ige visuelle Umsetzbarkeit besteht nicht. Für eine korrekte Darstellung in zukünftigen Browser- und Client-Versionen wird keine Gewähr übernommen. Nachkorrekturen erfolgen nach Aufwand.

Optimierung für E-Mail-Clients

Hybrid E-Mail-Vorlagen werden für folgende E-Mail-Clients in den jeweils aktuellen bzw. gängigen und herstellerseitig supporteten Versionen optimiert:

• Microsoft Outlook (Windows Desktop Version ab 2007)
• Apple Mail
• Apple iPhone/iPad Mail App
• Thunderderbird
• Android Mail (native)
• Gmail App auf Android

 

Optimierung für Browser

Landingpages werden für folgende Internet-Browser in den jeweils aktuellen bzw. gängigen und herstellerseitig supporteten Versionen optimiert:

• Firefox (auch für mobile Geräte)
• Google Chrome
• Apple Safari (auch für iOS)
• Microsoft Internet Explorer ab Version 9
• Microsoft Edge

Die Darstellung kann in den unterschiedlichen Clients geringfügig variieren. Die Optimierung weiterer Clients/Browser muss im Vorfeld mit der SC-Networks GmbH abgestimmt werden.