Ein einheitliches Design von Mailings und Onlineshop ist wichtig für die Markenidentität im E-Commerce. Damit es leicht gelingt, hat netz98 das E-Mail-Template des Shopsystems von Adobe Commerce (Magento) um eine Kombination von Hyvä-Theme und Tailwind CSS erweitert. Diese ist bereits erfolgreich bei unserem Kunden mey im Einsatz.
Stimmiges Layout bei E-Mail-Kommunikation gefragt
In der Welt des E-Commerce ist die E-Mail-Kommunikation nach wie vor ein unverzichtbares Instrument zur Werbung und Kundenbindung. Sie ermöglicht es Unternehmen, ihre Kunden und Interessenten über neue Produkte, Angebote und Updates zu informieren und ist ein wichtiger Kontaktkanal für den Kundenservice. Unterstützt durch KI und CX-Tools machen Mailings zudem eine sehr personalisierte Ansprache der Konsumenten möglich.
Daher ist es von entscheidender Bedeutung, dass die E-Mail-Templates eines Unternehmens nicht nur funktional, sondern auch ästhetisch ansprechend und im Einklang mit der Markenidentität sind. Dies bedeutet, dass sich das Layout der Mailings zum einen nah am Design des Webshops orientieren sollte, der den Kunden im Optimalfall bereits vertraut ist. Zudem sollte auch das Erscheinungsbild der verschiedenen Mail-Typen (Werbung, Support, Bestätigungsmails etc.) untereinander stimmig sein.
Styling von E-Mail-Templates in Adobe Commerce (Magento)
Für das einheitliche Styling von E-Mail-Templates bietet das Shopsystem Adobe Commerce (Magento) eine robuste Lösung. Das Hyvä-Theme ist ein fortschrittliches Frontend-Theme auf Open-Source-Basis für Magento2. Es wurde speziell für eine erleichterte Entwicklung von ansprechenden, performanten und benutzerfreundlichen E-Commerce-Plattformen mit Magento konzipiert. Es zeichnet sich durch Leistungsorientierung, Flexibilität, eine hohe Modularität und große Benutzerfreundlichkeit aus.
Trotz der vielen Vorteile des Hyvä-Themes gibt es bei dem Styling der E-Mail-Templates jedoch eine gewisse Herausforderung: Das liegt an der Integration des CSS-Framework Tailwind und dessen Konfiguration, die im Hyvä-Theme für das Styling von E-Mail-Templates eingesetzt wird. Diese ermöglichen dort von Grund auf nur in einer CSS- oder Less-Datei das Styling eines E-Mail-Templates. Dadurch ist es nicht möglich, vordefinierte Tailwind CSS-Klassen direkt in die Theme-Templates der Mailings zu integrieren, wie es das Hyvä-Theme mit Tailwind CSS für die normalen Theme-Templates der Shop-Seiten ermöglicht.
netz98 optimiert Synchronisation von Shop-Style und Mail-Templates
Um diese Herausforderung zu überwinden, hat das netz98-Team für den Onlineshop und die Mailings unseres Kunden mey (hier geht es zur Referenz) eine besondere Lösung implementiert. Diese ermöglicht die Nutzung von Tailwind Utility-Klassen in den E-Mail-Templates von Hyvä-Theme. Sie beinhaltet die Erstellung einer zusätzlichen Konfigurationsdatei für Tailwind CSS- und Post CSS für die E-Mails samt Umwandlung von Rem-Werten in Pixel.
Letzteres ist deshalb wichtig, da die meisten E-Mail-Anbieter nur Pixel als CSS-Einheit zum Styling der Mails akzeptieren. Außerdem hat das netz98-Team die Möglichkeit geschaffen, die Theme-Konfiguration von Tailwind CSS zu importieren, eine neue Konfiguration für die Mails zu erstellen und eine Verlinkung zur neuen Konfiguration in der Source CSS-Datei zu hinterlegen.
Leichteres Styling, schnellere Ladezeiten
Die Vorteile dieser netz98-Lösung sind vielfältig. Sie ermöglicht eine Vereinheitlichung zwischen dem, was im Frontend-Theme des mey-Onlineshops und in den Mails gestylt wird und macht das Design der Mails einfacher. Das liegt daran, dass die Tailwind CSS-Klassen direkt in den Templates verwendet werden können. Zudem führt die Lösung zu einem sauberen Code und produziert weniger an unnötigen CSS-Dateien.
Zusätzlich werden nur die Utility-Klassen, die in den E-Mail-Templates verwendet wurden, durch Tailwind in den Header-Bereich des HTML-Dokuments exportiert. Dadurch reduziert sich die Größe der CSS-Datei, die die mey-Kunden beim Öffnen der Mails herunterladen müssen, erheblich. Schnellere Ladezeiten der E-Mails von mey sind die Folge, was wiederum für eine höhere Zufriedenheit der Kunden sorgt.
Leistungsstarke und flexible E-Mail-Lösung
Insgesamt zeigt diese Lösung für unseren Kunden mey, wie eine sinnvolle Kombination von Magento, Hyvä und Tailwind CSS zu einer leistungsstarken und flexiblen Lösung für das Styling von E-Mail-Templates im E-Commerce führen kann. Diese innovative Entwicklung von netz98 erleichtert dem Traditionsunternehmen mey und seiner Kundschaft die E-Mail-Kommunikation und macht diese fit für die Zukunft.
Wollen auch Sie Ihre Mailings in punkto Styling und Performance optimieren? Kontaktieren Sie uns gerne:
