Automatisierung
Empfänger
Formulare
Landingpages
Statistik
Besonderheiten von Razor Vorlagen
Die Vorlagen in mailworx besitzen eigenständige Tags, welche beim Erstellen eines E-Mails automatisch durch den korrekten Text ersetzt werden. Jede Vorlage muss mit den entsorechenden Tags ausgestattet sein!
Was müssen Sie bei der Erstellung einer Razor Vorlage beachten?
- Ein Template darf KEINE Scripts enthalten (Javascript, VBScripts,….) – somit keine RollOver & Co.
- Ein Template darf soweit möglich KEINE Stylesheets enthalten (auch nicht inline). Jede Eigenschaft muss im HTML gesetzt werden.
- Der Betreff der Kampagne sollte mittels mailworx Tags (siehe unten), im HEAD als title verwendet werden, um die Wahrscheinlichkeit zu verringern, dass das Mail als Spam eingestuft wird. (<title>@Raw(Model.Campaign.Name)
- </title> WICHTIG! Im Sourcecode eintragen.
- Bei sämtlichen LINKS darf kein target-Attribut angegeben werden.
- META-TAGS sollen vermieden werden.
- Templates dürfen nur die nötigsten Prozentangaben besitzen. Sämtliche Tabellen-Breitenangaben müssen definiert sein. Das heißt, die gesamte Tabelle inklusive sämtlicher Spalten usw.
- Die Breite des Templates ist auf 600px bis 620px zu begrenzen.
- Es sollte jeder Zelle eine feste Breite vorgegeben werden.
- Hintergrundbilder sollten nur verwendet werden, wenn diese unbedingt nötig sind. Immer eine passende Hintergrundfarbe dazu einstellen, für den Fall, dass die Hintergrundgrafik nicht angezeigt wird.
- Cellspacing/Cellpadding sollte nicht verwendet werden, anstelle dessen sollte eine kleinere Tabelle eingefügt werden.
- Links sollten nach Möglichkeit immer dieselbe Farbe haben (also in Navigation und Inhalt), sonst gibt es Probleme mit RollOver.
- Wird bei Lotus Notes und bei einigen anderen E-Mail Clients das Layout falsch dargestellt, sollten die Breiten der einzelnen Zellen und Tabellen kontrolliert werden. Ein häufiger Fehler ist, dass die Breiten nicht angegeben wurden.
- Bei Links ist auf folgendes zu achten: Wenn nur ein Bild ohne Text verlinkt wird, soll in den Link ein anhängt werden, da diese Links im Outlook 2007 sonst nicht funktionieren. Z.B.: <a href=“#contents“><img src=“…“> </a>
- Die Vorlagen-Datei muss template.cshtml heißen.
Die zugrunde liegende Technik für diese Templates ist das Microsoft Razor Framework.
Um Werte von Variablen oder Methoden auszugeben, verwenden Sie bitte die Razor Funktion @Raw(…). Mit dieser Funktion kann ein Wert ausgelesen werden.
Der Betreff der Kampagne sollte, mittels Razor-Syntax, im HEAD als title verwendet werden, um die Wahrscheinlichkeit zu verringern, dass das Mail als Spam erkannt wird.
@Raw(Model.Campaign.Subject)
Wiederholbare Abschnitte werden mittels einer foreach-Schleife erzeugt:
foreach (var sec in Model.Sections.Sections) { ... }
Die Variable sec bietet pro Durchlauf Informationen zum aktuellen Abschnitt, wie etwa Abschnittsname, und kann bei Editoren als Zuweisung verwendet werden (mailworx Syntax). Diese Technik wird auch beim optionalen Inhaltsverzeichnis angewendet. Variablen können in Razor über 2 Varianten verwendet werden. Es kann der eingebaute ViewBag verwendet werden, dieser erlaubt eine dynamische Verwendung von Dateitypen.
@{
ViewBag.value = Model.Sections.GetSingletonValue("internerFeldName");
if(String.IsNullOrEmpty(ViewBag.value)) {
ViewBag.value = "Wert";
}
}
<html>
<body>
@if(ViewBag.value == "Wert") {
<div>Für die Variable value wurde kein Wert gesetzt.</div>
} else {
<div>@Raw(ViewBag.value)</div>
}
</body>
</html>Alternativ können auch Variablen mit fixen Dateitypen verwendet werden.
@{
string value = Model.Sections.GetSingletonValue("internerFeldName");
if(String.IsNullOrEmpty(value)) {
value = "Wert";
}
}
<html>
<body>
@if(value == "Wert") {
<div>Für die Variable value wurde kein Wert gesetzt.</div>
} else {
<div>@Raw(value)</div>
}
</body>
</html>Die darin erstellten Variablen können im Template dann wie folgt verwendet werden:
@Raw(value) bzw. @value
Als IDE kann grundsätzlich jeder Texteditor verwendet werden. Wir empfehlen jedoch, Microsoft Visual Studio bzw. Microsoft Visual C# Express oder Microsoft Visual Web Developer Express, da diese ein Highlighting für die Razor Engine bieten.
Wie können Elemente für die mobile Version ausgeblendet werden?
Um nicht auf extravaganten Newsletter verzichten zu müssen, gibt es die Möglichkeit, Elemente ab einer gewissen Breite auszublenden. Hier gilt: Probieren Sie es aus, ab welcher Breite Sie Elemente ausgeblendet haben möchten.
Eine Empfehlung von uns ist, die Newsletter ab einer Breite von 450px zu optimieren, da das iPhone eine Bildschirmbreite von 320px besitzt.
Hier der HTML-Code des Newsletters:
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="22%" align="left" valign="top">
<table width="140" align="center" valign="top" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">Logo</td>
</tr>
<tr>
<td align="center" class="hide" valign="middle" height="40" bgcolor="#d4d4d4" width="100%">Menü Punkt 1</td>
</tr>
<tr>
<td align="center" class="hide" valign="middle" height="40" bgcolor="#d4d4d4" width="100%">Menü Punkt 1</td>
</tr>
<tr>
<td align="center" class="hide" valign="middle" height="40" bgcolor="#d4d4d4" width="100%">Menü Punkt 1</td>
</tr>
</table>
</td>
<td width="78%">Einleitung</td>
</tr>
</table>Damit die Menüpunkte nicht in der mobilen Version sichtbar sind, wird das Atribute class=“hide“ vergeben. Mit Hilfe dieses Atributes kann man auf die einzelnen Zeilen im CSS zugreifen und diese nach den jeweiligen Vorstellungen stylen.
Die benötigten CSS-Styles sehen wie folgt aus:
@media only screen and (max-width: 450px) {
[class*=hide] {
display:none;
}
}
So einfach geht’s und schon sind ganze HTML-Blöcke in der mobilen Version ausgeblendet.