mailworx Razor Besonderheiten

Besonderheiten von Razor-Vorlagen

Die Vorlagen im mailworx besitzen eigenständige Tags, welche beim Erstellen eines E-Mails automatisch durch den korrekten Text ersetzt werden. Jede Vorlage muss mit den entsprechenden Tags ausgestattet sein!

Was zu beachten ist

  • Ein Template darf KEINE Scripts enthalten (Javascript, VBScripts,....) -> Keine RollOver & Co.
  • Ein Template darf so weit als 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 erkannt 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 Roll-over.
  • Wird bei Lotus Notes und bei einigen anderen E-Mailclients das Layout zerrissen, sollten die Breiten der einzelnen Zellen und Tabellen kontrolliert werden, meistens wurden die Breiten nicht angegeben.
  • Bei Links ist darauf zu achten: Wenn nur ein Bild ohne Text verlinkt wird, soll in den Link ein &nbsp; anhängt werden, da diese Links im Outlook 2007 sonst nicht funktionieren. Z.B.:  <a href="#contents"><img src="…">&nbsp;</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.

Elemente für die mobile Version ausblenden

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 welche 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.

Das ganze geschieht mit Hilfe von CSS und ist einfacher als es sich zunächst anhört.

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 habe ich das Atribute class="hide" vergeben.
Mit Hilfe dieses Atribbutes kann ich auf die einzelnen Zeilen im CSS zugreifen und diese nach meinen wünschen 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.

Achtung: In der Desktop-Ansicht können aus Sicherheitsgründen keine Elemente ausgeblendet werden.