Sympathisch, mit aufmerksamkeitsstarken Gimmicks und technisch sauber umgesetzt: So präsentieren sich unsere Ostergrüße 2021 in Ihrem E-Mail-Postfach. Was aber wirklich in ihnen steckt und wie wir ein solches Projekt in unserer Kampagnen-Manufaktur angehen, sieht man ihnen nicht an. Doch das erfahren Sie jetzt in unserem Making-of zur rabbit-Ostermail.
Von der Idee zur Produktionsreife
Ein persönlicher, ansprechender und gute Laune verbreitender Ostergruß an alle Kunden, Leads, Partner, Newsletter-Empfänger und die rabbit-Community: Mit diesem Ziel im Fokus startete die Konzeption zur rabbit-Osterkampagne 2021. Und so wurden parallel zur Selektion der Empfänger-Daten in einem konzentrierten Brainstorming Ideen für die diesjährige Osteraktion geboren, bewertet und in Form von Scribbles visuell aufbereitet.
Die Wahl viel anschließend auf ein authentisches Design mit persönlicher Note, das in diesen Zeiten Nähe schafft, Sympathien weckt und sich dazu aktueller Design-Trends bedient. So verleihen die Schiefertafel-Optik im Hintergrund in Kombination mit Grafikelementen in Kreidezeichnungsoptik eine visuelle Eigenständigkeit, die eine Abgrenzung von klassischen Ostermails garantiert.
Aufbauend auf der wertigen Anmutung des Basis-Layouts wurden einige Polaroids von rabbit Mitarbeitern, Frühlingsblumen und klassische Osterelemente in den rabbit CI-Farben zu einem modernen Flat-Lay-Design vereint. Mikroanimationen und handgezeichnete Elemente setzen zusätzlich lebendige Akzente und lenken die Aufmerksamkeit der Empfänger.
Herausforderung HTML souverän gemeistert
Als Gestaltung und Inhalte der Ostermail standen, startete der herausforderndste Teil der Umsetzung. Denn nun gilt es, das Design in ein HTML zu übersetzen, welches das Ursprungslayout nicht nur exakt widerspiegelt, sondern auch eine optimale Zustellbarkeit und die perfekte Darstellung auf unterschiedlichsten Endgeräten und Clients garantiert. Damit dies sicher gelingt, sind technisches Know-how und Erfahrung gefragt, wie die folgenden Beispiele verdeutlichen:
Herausforderung 1: die Mikro-Animationen
Aufgabenstellung aus Konzeption und Design:
Die handgezeichnete Sonne im E-Mail-Header und das Herz neben den Polaroids im zentralen Mailbereich sollen animiert werden.
Herausforderung bei der Umsetzung:
Outlook kann Hintergrundgrafiken mit transparentem Hintergrund nicht korrekt darstellen und färbt die transparenten Flächen weiß.
Lösung:
Die Schiefertafel im Mail-Hintergrund wurde als nahtlose Kachel als Hintergrund definiert.
Um unschöne Kanten zu vermeiden, wurden die Blätter und Ostereier als normales Bild mit transparentem Hintergrund angelegt. Die animierte Sonne wurde kleiner skaliert und eine Ebene über den grafischen Elementen leicht nach unten versetzt integriert – nah am Design ohne Darstellungsfehler und unnötige Leerflächen.
Auf die gleiche Weise wurde mit dem Herz neben den Polaroids verfahren, welches etwas größer skaliert wurde, um ein wenig Freiraum zwischen Ostergruß und Bildern zu schaffen.
Design
Fehlerhafte Darstellung
Endgültige Umsetzung
Herausforderung 2: der Hintergrund
Aufgabenstellung aus Konzeption und Design:
Die Schiefertafel im Hintergrund sollte nahtlos gekachelt, als einheitlicher Hintergrund dargestellt werden.
Herausforderung bei der Umsetzung:
Bei Einbindung eines Hintergrunds als ein Bild ist ein fluides Layout nicht realisierbar, da auf Mobilgeräten mit breitem Screen unnötige Leerflächen entstehen.
Lösung:
Es wurde ein festgelegter Bereich der Hintergrundfläche als nahtlose Kachel erstellt, der sich über die gesamte Fläche der Mail wiederholt. Ein fluides Layout wurde damit möglich. Für Outlook musste zusätzlich eine Fallbackfarbe festgelegt werden, da Outlook 2007-2019 auf Windows und T-Online diese Form der Hintergrundgrafiken nicht unterstützen.
Outlook 2016 Windows
Gmail Windows
Herausforderung 3: die Anrede
Aufgabenstellung aus Konzeption und Design:
Die Ansprache der Empfänger sollte unterschiedlich erfolgen können: von einer unpersonalisierten, eher generischen Formulierung bis hin zur Ansprache mit Vornamen.
Lösung:
In der HTML-Umsetzung wurde eine Aussteuerung unterschiedlicher Anrede-Optionen technisch umgesetzt, die eine variable Ansprache der Empfänger ermöglicht.
Design
Umsetzung “Sie”
Umsetzung “Du”
Herausforderung 4: das Impressum
Aufgabenstellung aus Konzeption und Design:
Neben den klickbaren Social Media-Icons und dem Text des Impressums sollen grafische Elemente integriert werden.
Herausforderung bei der Umsetzung:
Die grafischen Elemente erschweren die Realisierung eines fluiden Layouts für eine optimale Darstellung auf Mobilgeräten.
Lösung:
Bis zu einer Viewport-Größe von 480 Pixeln skalieren die grafischen Elemente mit. Danach werden sie ausgeblendet, weil sie zu klein und das Impressum zu schmal werden. Darüber hinaus wurde die Schriftart im Impressum an die Regelkommunikation angeglichen.
Design
Desktop
Mobil
Nur geprüfte Qualität für unsere Empfänger
Im Anschluss an die Fertigstellung der HTML-Version der rabbit-Ostergrüße startete die interne Qualitätssicherung. Hier werden im 4-Augen-Prinzip sorgfältig verschiedene Parameter, technische Umsetzung und Inhalte geprüft. Dazu zählen unter anderem die Absende- und Antwortadresse, Verlinkungen, die Rechtschreibung und Logik der Inhalte sowie die Trackingparameter für die spätere Auswertung und die Selektion der Empfänger. Zudem wurde der ideale Versandzeitpunkt anhand von Informationen aus Benchmark-Studien, Erfahrungen aus früheren Versänden und in Kombination mit dem zugrundeliegenden Ereignis identifiziert. Erst nachdem all diese Schritte erledigt waren, wurde die versandreife Ostermail zum perfekten Zeitpunkt an Sie ausgespielt – und kurze Zeit später unsere Making-of-Mail, die Ihnen diesen Einblick in unsere Prozesse beschert.
