Hamburgermenu und Hintergrundbilder: Das E-Mail Template für Siroop

Ausgangslage

Vorgefertigte Standardtemplates sind die erste Wahl, wenn eine schnelle Umsetzung gewünscht ist und in erster Linie tiefe Kosten zählen. Geniesst die Umsetzung des eigenen CI/CD eine höhere Priorität, führt kaum ein Weg an einem individuellen Template-Design und manueller Umsetzung des HTML-Codes vorbei. Insbesondere wenn spezielle Elemente wie eine auf Mobilgeräten ausklappbare Navigation („Hamburgermenu“ genannt) oder dynamische Aktions-Störer eingesetzt werden sollen.

Beim Launch des neuen Online-Marktplatzes Siroop spielte auch E-Mail Marketing eine wichtige Rolle. Das CI von Siroop – mit einem stilisierten Tropfen als zentrales Element – musste auch für die E-Mail Kommunikation korrekt adaptiert werden. Das Design wurde von einer Drittagentur erstellt, für die Umsetzung des HTML Codes griff Siroop auf die Expertise von Mayoris zurück.

Lösung

Die Struktur des Siroop Designs ist von klaren Formen und Flächen in vier Primärfarben geprägt. Diese Elemente werden im E-Mail Template sehr stark eingesetzt um eine klare visuelle Struktur zu erhalten. Ein solches Kachel-Layout lässt sich hervorragend auch für Mobilgeräte adaptieren. Bei Siroop haben wir auf so genanntes „Hybrid Coding“ gesetzt, so dass sich auch bei älteren Android Smartphones und der GMail App die Ansicht der Bildschirmgrösse anpasst. Dies war insbesondere aufgrund der Zielgruppe, welche eine hohe Mobile-Affinität aufweist, eine zentrale Anforderung.

Technologie & Innovation

Hamburgermenu…

Die Primärnavigation des Online-Shops von Siroop wurde für die E-Mail in einer verkürtzen Variante adaptiert. Dies erhöht den Traffic auf der Website und schafft einen Wiedererkennungswert. Um wertvollen Platz auf den Smartphone-Displays zu sparen, verwandelt sich die Navigationszeile in ein ausklappbares Menu, welches über das weit verbreitete Icon mit drei horizontalen Strichen („Hamburger“) angesteuert wird.

… Hintergrundbilder …

Produkte in Aktion werden bei Siroop mit dem Drop gekennzeichnet. Dieser überlagert teilweise das Produktebild und enthält das zu einem Emoticon stilisierte Prozent-Zeichen. Um den Redaktionsaufwand im Rahmen der Newsletter-Erstellung zu reduzieren und Bilder direkt aus einer Produktedatenbank laden zu können, sind die Produktebilder als Hintergrundbilder integriert und der Drop wird als eigenes Bild darübergelegt. Ob der Drop angezeigt wird oder nicht kann dabei vom Redaktor mit einer einfachen Einstellung je Produkt gesteuert werden. Die zeitaufwändige, manuelle Integration in einer Bildbearbeitungssoftware entfällt. Da für Smartphones aufgrund der Skalierung auf die gesamte Bildschirmgrösse höher auflösende Bilder verwendet werden als für Desktop, müsste dieser Arbeitsschritt andernfalls sogar doppelt ausgeführt werden.

Im Hinblick auf die automatische Integration der Bilder aus der Produktedatenbank kann so auch auf die Integration eines Bildgenerators verzichtet werden, welcher den Drop automatisch in das Produktebild einfügt.

… und dynamische Positionierung

Bild links, Text rechts – oder eher umgekehrt? Die Positionierung der Bilder ist eine Frage die sich für den Newsletter-Redaktor immer wieder stellt. Oftmals ändert sich die Anordnung in letzter Minute. Um in solchen Fällen nicht den gesamten Inhaltsblock neu befüllen zu müssen, wurde das Template so umgesetzt, dass die Positionierung mittels einer Einstellung in Sekundenschnelle geändert werden kann. Neben der Vereinfachung für die Redaktoren ist der HTML-Quellcode des Templates damit auch einfacher zu warten, da weniger Module bereitgestellt werden müssen.

SalesForce Marketing Cloud: Ausflug in eine andere Welt

Siroop arbeitet mit SalesForce Marketing Cloud als Plattform für das E-Mail und Omnichannel Marketing. Für Mayoris als technologieneutrale Agentur ist dies aber kein Hindernis. Trotz einiger Tücken des SalesForce E-Mail Editors konnte für den Kunden ein anspruchsvolles Template und eine qualitativ hochwertige und effizient zu nutzende Vorlage für die Marketing E-Mails umgesetzt werden.


Haben Sie Fragen zu diesem Thema? Kein Problem, melden Sie sich bei uns und gerne besprechen wir Ihr Anliegen mit Ihnen direkt.