E-Mail Editor Vorlagen Programmier-Richtlinien 1
Inhaltsverzeichnis 1. Einleitung... 3 2. Code erstellen für Vorlagen... 4 3. Code für mobile Vorlagen (Responsive Design)... 5 4. Editor Klassen (Tags) für Vorlagen erstellen... 13 5. E-Mail Editor Tags... 17 6. Fazit... 21 7. Zusammenfassung... 21 2
1. Einleitung Dieses Dokument soll Ihnen dabei helfen, Ihre eigene Vorlage mit Html zu programmieren um diese in unserem E-Mail Editor nutzen zu können. Um diese Hilfe-Datei zu nutzen, benötigen Sie Grundlagenwissen in Html sowie in CSS. Das Programmieren von einer Vorlage für den E-Mail Editor ist ein drei-stufen-prozess. Notiz: Wir haben Screenshots von einzelnen Code-Ausschnitten für Sie zusammengestellt, um den Prozess für Sie so einfach wie möglich zu gestalten. Einschränkungen sind mit einem NB gekennzeichnet. Zudem haben wir einige Tipps für Sie eingefügt um das Ganze zu vereinfachen. 3
2. Code erstellen für Vorlagen Als erstes erstellen Sie einen Code in dem Sie <table> Tags und <style> inline Tags benutzen. Denken Sie daran, stets festgelegte Werte wie zum Beispiel: <td width= 100 >Hallo Welt</td> einzugeben, mit dem Zusatz eines Style Tags gehen Sie sicher, dass Ihr gewünschtes Format auch dargestellt wird. Z.B.: <td width= 100 style= width: 100px >Hallo Welt</td> Wenn das Grundgerüst Ihres Codes fertig ist, werden wir sogenannte Hacks in die <head> tags </head> einfügen, damit Ihre Vorlage in den gängigen E-Mail Klienten richtig dargestellt wird und das Design, wie zum Beispiel die Hintergrundfarbe, beibehalten wird. Tipp:.ReadMsgBody {width: 100%; background-color: #ffffff; }.ExternalClass {width: 100%; background-color: #ffffff; } Wenn Sie dies erledigt haben, können Sie zum nächsten Schritt übergehen. IHRE VORLAGE SOLLTE KEINE <A HREF= # ></A> ENTHALTEN! 4
3. Code für mobile Vorlagen (Responsive Design) erstellen Im nächsten Schritt fügen Sie CSS für die mobile Ansicht hinzu. Damit responsive Design Tags auch wirksam sind, nutzen wir CSS-Media- Queries (Medienabfragen). Media Queries sind CSS3 Module, die es dem Newsletter-Inhalt erlauben, sich an unterschiedliche Bedingungen wie beispielsweise der Bildschirmauflösung anzupassen. Schauen Sie sich zunächst den Aufbau Ihrer Vorlage an und wählen Sie dann eine der unten gelisteten CSS3 Medienabfragen aus. So ist ein Query-Tag aufgebaut: @media only screen and (max-device-width: 480px) { Max-device-width bedeutet, dass alle Styles welche dieser Medienabfrage zugeordnet werden, in Kraft treten, wenn das Endgerät eine Maximum-Breite von (in unserem Beispiel) 480px erreicht hat. Wenn Sie dieses Tag kreiert haben, können Sie darauf aufbauen und neue Klassen hinzufügen, welche das Layout verändern, wenn der Newsletter mit einem mobilen Gerät geöffnet wird. Beispiel: Wenn das mobile Gerät erkannt wurde, soll die Breite der Vorlage auf 320px verkleinert werden. @media only screen and (max-device-width: 480px) { 5
table[class= wrappertable ] { width: 320px!important; } Beispiel: Fügen Sie die Klasse wrappertable zu dem <table> Tag hinzu um diese Abfrage zu erstellen. <table cellpadding= 0 cellspacing= 0 width= 648 class= wrappertable style= border-collapse:collapse; border:0; > Es können nun verschiedene Klassen mit wrappertable erstellt werden, um eine Basis für Ihre Vorlage zu schaffen. Dabei ist es jedoch wichtig, stets an die verschiedenen Endgeräte zu denken. Wenn also Ihre Schriftgröße in der Vorlage für mobile Geräte 14px ist, kreieren Sie eine Klasse für das <font> tag und stellen Sie die Schriftgröße auf 12px etc. Als nächstes erklären wir, wie Sie aus zwei Spalten, eine einzelne Spalte machen, wenn Sie Medienabfragen für mobile Endgeräte nutzen. Tipp: Dies kann auch für mehr als zwei Spalten angewendet werden, gehen Sie jedoch sicher, dass die maximale Breite der Vorlage gleichmäßig aufgeteilt ist. table[class=contenttable] { } width:320px!important; (CSS wird benötigt) 6
<table width= 640 border= 0 cellpadding= 0 cellspacing= 0 class= contenttable > <tr> <td> <table class= contenttable width= 320 border= 0 cellspacing= 0 cellpadding= 20 align= left > <tr> <td><p>column Left Content</p></td> </tr> </table> <table class= contenttable width= 320 border= 0 cellspacing= 0 cellpadding= 20 align= right > <tr> <td><p>column Right Content</p></td> </tr> </table> </td> </tr> </table> 7
Indem Sie diese Klassen hinzufügen und die innere Tabellen-Breite teilen, werden die Tabellen, wie Sie auf dem Bild sehen, untereinander dargestellt. Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Consectetur adipisicing elit, sed do eiusmod Image (Zweispaltige Tabelle ) Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Consectetur adipisicing elit, sed do eiusmod Image 8
Der nächste Schritt, wenn es um Medienabfragen geht, ist die Anpassung von Bildern in Ihrer Newsletter Vorlage. Dies ist ein tatsächlicher Prozess, wie auch zuvor, wird mit CSS3, wie unten dargestellt, begonnen: td[class= headercell ] { background-image: url(your-image.jpg); width: 380px!important; height: 130px!important; } Durch das CSS wird veranlasst, dass wenn die Medienabfrage eine Bildschirmgröße von mind. 320px vorfindet, das Hintergrundbild eingesetzt und an die entsprechende Größe angepasst wird. Damit dies vorrangig behandelt und unterstützt wird, fügen wir important Tags ein. Als nächstes muss diese Klasse in den HTML-Code eingefügt werden, wie in dem Beispiel unten dargestellt. <tr> <td class= headercell > <img src= your-image.jpg width= 648 height= 217 /> </td> </tr> Fügen Sie die Klassen zu dem <td> Tag hinzu und behalten Sie das original Image Tag bei. 9
Diese Bildtechnik kann für jedes Bild angewendet werden, vorausgesetzt das erforderliche Bild wird dementsprechend in der Größe angepasst und auch im Dateiarchiv gespeichert. Tipp: Versuchen Sie die Bildgröße so klein wie möglich zu halten, Png oder Gif Dateien funktionieren hier gewöhnlich am besten. Mit Blick auf das Responsive Newsletter Design, gibt es einige Faktoren, die hiermit zusammenhängen. Die folgenden Techniken werden nicht universell von allen Mobilen E-Mail Klienten unterstützt. Nicht alle E-Mail Klienten sind gleich aufgebaut - sogar auf dem gleichen Endgerät kann ein HTML Newsletter von Posteingang zu Posteingang sehr verschieden aussehen. Beispiel: Während der Standard Android E-Mail Klient welcher auf einem Google Nexus erscheint, für seine hervorragende CSS Unterstützung bekannt ist, kann es bei Gmail durchaus zu Problemen kommen, da Styles in den Tags ignoriert werden oder Gmail gewöhnliche CSS2 Eigenschaften nicht auslesen kann. Das Iphone und auch andere Apple ios Produkte gelten als beinahe fehlerfrei wenn es um die E-Mail Anzeige geht. Zudem geht eine hohe Prozentzahl der mobilen Newsletter Öffnungen auf das Iphone zurück. Mit diesen Informationen im Hinterkopf, haben wir eine grobe Liste von mobilen Endgeräten zusammengestellt, die deren Unterstützung für Medienabfragen darstellt. Die Unterstützung von Media Queries erlaubt die Nutzung von einer Vielzahl an responsive Design Techniken. 10
Standardgeräte für mobile E-Mail Klienten Gerät Medienabfrage Amazon Kindle Fire Amazon Kindle Fire HD Android 2.1 Eclair Android 2.2+ Apple iphone Apple ipad Apple ipod Touch BlackBerry OS 5 BlackBerry OS 6+ BlackBerry Playbook Microsoft Windows Mobile 6.1 Microsoft Windows Phone 7 Microsoft Windows Phone 7.5 Microsoft Windows Phone 8 Microsoft Surface Palm Web OS 4.5 11
Sie haben jetzt eine Basis für Bild- und Layoutanpassungen; hier sehen Sie die drei meist genutzen und allgemeinsten max-widths, welche beispielhaft für eine Vielzahl von Endgeräten stehen. @media only screen and (max-device-width: 480px) { styles here... } @media only screen and (max-device-width: 640px) { styles here... } @media only screen and (max-device-width: 479px) { styles here... } Tipp: Weitere Breiten können genutzt werden, um eine zusätzliche Stabilität zu erzeugen, jedoch kann dies in eine Zwickmühle führen. Jetzt wo Sie die Grundlagen für die mobile Optimierung haben, wird es einfach sein, diese Techniken auszuweiten und auf andere Situationen anzuwenden. Denken Sie daran, Testen ist enorm wichtig. Für gewöhnlich testen wir unsere Software auf den weiter oben dargestellten, kompartiblen Geräten. 12
4. Editor Klassen (Tags) für Vorlagen erstellen Wenn Sie die mobil optimierte Version Ihrer Vorlage getestet und für gut empfunden haben, können Sie die Tags einfügen, die für die Funktionalität im Editor benötigt werden. Als erstes werden alle Styles (wie unten dargestellt), die für den Kopfteil des Codes benötigt werden, eingefügt. NB: Diese Tags sind sehr speziell und Groß- und Kleinschreibung ist wichtig, bitte überprüfen Sie also die Schreibweise. Hier sehen Sie eine Liste mit Tags und Definitionen für alle Styles gm-template - Diese Klasse MUSS im ersten DOM Element in der Vorlage eingefügt werden (nach dem Style Element) - diese Klasse ist mit einem <div> Tag definiert, welches den ganzen Newsletter umschließt. gm-editable - Eine veränderbare Box, welche Drops von einen Gm- Element annimmt - dadurch kann das Element von der Funktionen Gebrauch machen, die der Editor anbietet. gm-element - Alle veränderbaren Elemente müssen diese Basis Klasse haben - denn diese Funktion aktiviert das Element gm-element-html - Erlaubt HTML Bearbeitungs-Tool - der Nutzer kann dadurch den Inhalt in speziellen Inhaltsblöcken bearbeiten. 13
Die unten abgebildeten Styles stellen die oben abgebildeten Klassen dar und können so definiert werden. Diese Klassen werden hier repräsentiert..gm-template,.gm-template p,.gm-template a,.gm-template span {font-family:arial,helvetica,sans-serif; font-size:14px;}.gm-template p {margin:0 0 1em 0;} Wenn Sie Ihre Styles platziert haben, können Sie mit den <body> Elementen weiter machen und ein <table> Element einfügen, welches genauso funktioniert wie das <div> Tag, und den Newsletter oder Teile daraus umschließt. Fügen Sie zusätzlich 100% Breite zu Ihrer Tabelle und den Style= border-collapse:collapse; border:0 hinzu. Dies wird die Rahmen entfernen und die Tabelle dehnbar machen. Beispiel: <table width= 100% border= 0 cellpadding= 0 cellspacing= 0 align= center style= bordercollapse:collapse; border:0; > <tr> <td> NB: Besonders wichtig, wenn Sie gm-element Tags hinzufügen, ist dass alle Elemente mit <div class= >item>/div> Tags umschlossen sind. NB: Dieses Tag bindet zudem auch swatch hex values in Ihre Vorlage ein. 14
Beispiel: <div class= gm-template data-color-swatches= [ Black, White, #1E90FF, #00008B, #778899, #4682B4, Red ] > Beispiel: Tags werden für simple Texteingaben genutzt: sans- <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, serif; font-size: 28px; font-weight: bold >LOGO HERE</font> </div> Mit dem gleichen Code, wie oben dargestellt, lässt sich auch eine andere Regel für ein Element, welches Sie veränderbar machen wollen bzw. Funktionalität im Editor bekommen soll, demonstrieren. Sie fügen einfach die gm-editable Klasse zu dem <td> Tag in dem entsprechenden Code, hinzu. <tr> <td class= gm-editable >(Added class to <td> tag) <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sansserif; font-size: 28px; font-weight: bold >LOGO HERE </font> </div> </td> </tr> Benutzen Sie diese gm-tags jedoch strategisch. Legen Sie keine gmelement-html Klasse für ein Bild an. Ein Bild Wrapper benötigt lediglich eine gm-element Klasse und eine gm-editable Klasse - da das Bild 15
nicht aus Text besteht, ist auch keine HTML-Formatierung nötig. Wenn Sie alle diese Tags an den gewünschten Stellen in Ihrer Vorlage eingefügt haben, testen Sie das Ganze noch einmal! 5. E-Mail Editor Tags CSS wird in den Head Tags von Ihrer HTML benötigt Der weiter unten abgebildete CSS Ausschnitt soll zu der Seite hinzugefügt werden. Jegliche Stylings können dann hierzu verlinkt werden, da dies sogenannte Calling Tags sind, welche für den Editor genutzt werden. NB: Nutzen Sie diese Styles in Verbindung mit Ihren Responsive Style Media Queries etc. NB: Wenn Sie ältere Styles nutzen, achten Sie darauf, diese besonders zu verstärken, damit diese auch wirklich angenommen werden und Sie eine maximale Style Struktur im Editor haben. NB: Testen Sie weiter im Umfeld. 16
Beispiel: /*editor specific styles start here*/ <style type= text/ss >.gm-template,.gm-template p,.gm-template a,.gm-template span {font-family:arial,helvetica,sans-serif; font-size:14px;}.gm-template p {margin:0 0 1em 0;} </style> /*editor specific styles ends here*/ Klassen/Tags, die in HTML benutzt werden Die folgenden Tags/Klassen haben alle verschiedene Funktionen, die für die Funktionalität des Editors von Bedeutung sind. Wichtig dabei ist, dass diese Klassen zu dem <td> Tag hinzugefügt, sowie zusätzlich in die <td> </td> als <div> Tag eingepflegt werden. Insgesamt gibt es 4 Tags, wie Sie unten sehen können. Tags:.gm-template & swatch count: Dieses Element umschließt den ganzen Newsletter als eine <div class> und mit dieser Klasse werden die swatch values hinzugefügt. 17
Beispiel: <div class= gm-template data-color- swatches= [ Black, White, #1E90FF, #00008B, #778899, #4682B4, Red ] > Content goes here </div>.gm-editable Dieses Tag übermittelt dem Editor die Nachricht, dass Funktionen verfügbar gemacht werden müssen, wie zum Beispiel die Drag and Drop Funktion oder dass ein Inhaltsblock gelöscht oder dupliziert werden soll etc. Beispiel: <tr> <td class= gm-editable > <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sans-serif; font-size: 28px; ont-weight: bold >LOGO HERE </font> </div> </td> </tr>.gm-element Auch dieses Tag lässt den Editor Funktionen verfügbar machen, jedoch mit der Möglichkeit, dies an ein anderes e.g. editable zu richten. 18
Beispiel: <tr> <td class= gm-editable > <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sans-serif; font-size: 28px; font-weight: bold >LOGO HERE </font> </div> </td> </tr>.gm-element-html Dieses Tag erlaubt dem Nutzer den Inhalt des Newsletters zu ändern. In der Regel geht es dabei um ein <td> Tag, welches Text oder Links enthält. Beispiel: <tr> <td class= gm-editable > <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sans-serif; font-size: 28px; font-weight: bold >LOGO HERE </font> </div> </td> </tr> 19
Die zuvor erläuterten Tags können als Kombination bestehend aus maximal zwei Klassen pro <td> oder <div> Tag, genutzt werden. Zusätzlich können diese Klassen auch mit Ihren gängigen Inline-Styles für E-Mail Klienten hinzugefügt werden. Denken Sie stets daran <div> Tags hinzuzufügen, um diese einzunisten. 6. Fazit Die Techniken und Informationen in dieser Toolbox werden in Zusammenhang von HTML und CSS Grundlagen- sowie bewährten Praktiken verwendet. Testen Sie Ihre Vorlage Schritt für Schritt, denn es kann immer vorkommen dass sich Rechtschreibfehler einschleichen. Denken Sie daran, dass jedes Layout unterschiedlich ist und Strategie und Planung beim Erstellen und Gestalten eines Codes daher sehr wichtig sind. 20
7. Spickzettel gm-template - Diese Klasse MUSS im ersten DOM Element in der Vorlage eingefügt werden (nach dem Style Element) - zudem ist sie mit einem <div> Tag definiert, welches den ganzen Newsletter umschließt. gm-editable - Eine veränderbare Box, welche Drops von einen Gm- Element annimmt - dadurch kann das Element von der Funktionen Gebrauch machen, die der Editor anbietet. gm-element - Alle veränderbaren Elemente müssen diese Basis Klasse haben - denn diese Funktion aktiviert das Element. gm-element-html - Erlaubt HTML Bearbeitung-Tool - der Nutzer kann kann dadurch den Inhalt in speziellen Inhaltsblöcken bearbeiten. data-color-swatches= [ Black, White, #1E90FF, #00008B, #77 8899, #4682B4, Red ] > - wird genutzt um Newsletter für Editor Funktionalitäten zugänglich zu machen. @media only screen and (max-width: 320px) - Abfrage für dynamische Endgeräte. body[yahoo].devicewidth { width:280px!important; } - CSS geht sicher, dass zukünftige Breiten auf mobilen Endgeräten wie gewünscht dargestellt werden, dies funktioniert in Verbindung mit dem Viewpoint body[yahoo].center { text-align: center!important; } - CSS Klasse um 21
durchzusetzen, dass der Text mittig (enter-alignment) auf dem Endgerät dargestellt wird. body[yahoo].footerlinks { width:32%; margin-bottom:40px; } - dieses Tag erzeugt ein flüssiges Layout. Indem % statt px für die Breite genutzt wird, wird das Layout responsive. <meta name = viewport content = width = device-width > - wird ebenfalls für responsive Design genutzt, in dem vom Ausgangspunkt die Breite des Endgeräts automatisch erkannt wird. <meta name= viewport content= width = 320 > - wird ebenfalls für responsive Design genutzt, damit die Breite des Endgeräts vom Ausgangspunkt festgelegt werden kann. img, table { max-width: 320px; } - Nicht nur die Bildschirm-Breite für das Endgerät kann auf 320 px festgelegt werden, auch Bilder oder Tabellen können mit Hilfe von CSS Tags eine maximale Größe zugeordnet bekommen..mobile_hidden { display: none; } - Falls Sie Elemente auf Ihrer Hauptseite haben, die in der mobilen Ansicht nicht erscheinen sollen, fügen Sie einfach CSS Tags mit display to none für eben diese Elemente hinzu..readmsgbody { width: 100%; background-color: #ffffff; } - Hotmail Style lässt die Breite der äußeren Tabelle zu 100% erscheinen, damit Hintergrundfarbe und Ausrichtung wiederhergestellt werden können. 22