Quick Win: E-Mail-CSS in Smarty Templates

Wenn man einer Website ein schönes Design verpasst hat, dann sollen die dazugehörigen E-Mails genauso schön aussehen. Im Fall der zahlreichen und unterschiedlichen E-Mail-Benachrichtigungen von KING.ME kann der dazugehörige Prozess sehr lange andauern, wenn Abläufe nicht optimiert werden.

Wie wir ja in Richards spannenden Artikeln zum Erstellen von HTML-E-Mails – Tipps und Tricks Part 1, Part 2 & Part 3 gelernt haben, ist Inline-Style King.

Das führt auf Dauer leider dazu, dass der gleiche Code immer und immer wieder im HTML vorkommt. Zudem müssen bei einer generellen Änderung des Designs alle entsprechenden Stellen gesucht und angepasst werden. Im Fall von KING.ME können das bis zu 500 Zeilen auf ca. 100 Templates verteilt sein – pro Änderung.

Hier kann man Abhilfe schaffen, indem man den Inline-Style in eine andere Datei auslagert. Das verbessert die Wartbarkeit ungemein und erhöht zudem die Lesbarkeit des Codes. Dennoch entstehen hierdurch einige neue Codefragmente, welche auf den ersten Blick etwas verwirren können. Und um das zu minimieren, empfiehlt es sich, einen sogenanten Smarty-Modifier zu schreiben. Dieser muss dann nur noch mit der entsprechenden Variable in das Style-Attribut des HTML-Tags gesetzt werden.

Ein einfaches Beispiel des Smarty-Modifiers:

function smarty_modifier_e_style($string, $name='')
	switch($name) {
		case 'intro':
		case 'outro':
			$style="padding:0;color:#000000;";
			break;
		case 'text':
			$style="padding:0;color:#525d66;";
			break;
		default:
			$style="";
	}
	return $style . $string;
}

Das Einbinden innerhalb des Smarty-Templates:

<span style="{""|e_style:'text'}">Lotum Ipsum dolor...</span>

Der Modifier nimmt den leeren String und fügt die entsprechenden Styles hinzu, welche unter ‘text’ definiert sind. Somit hat der Text an dieser Stelle nun einen inneren Abstand von 0px und die Schriftfarbe #525d66.

Möchte man nun in einem speziellen Fall dem Text doch noch einen weiteren Style hinzufügen, kann man diesen als String an den Modifier übergeben, wodurch er aber in der Regel kein Code-Highlighting mehr bekommt. Deswegen empfiehlt es sich, weitere Styles einfach vor den Modifier in das Style-Attribut zu schreiben. Natürlich darf in beiden Fällen das abschließende Semikolon nach jedem neuen Style nicht vergessen werden.

Diese Methode lässt sich mit Sicherheit auch auf andere Template-Systeme anwenden, bei welchen man mit Inline-Styles arbeiten muss.