Responsive Status Mail 1 & 2 mit Ihrem Logo und Artikelbildern

Nach dem Einkauf in Ihrem Shop ist nicht die abschließende Meldung „Vielen Dank für Ihren Einkauf“ das letzte, was Ihre Kunden von Ihnen zu sehen bekommen, sondern das Status Mail 1 bzw. später das Status Mail 2.

Die Mails informieren Ihre Kunden nicht nur über ihren aktuellen Bestell-Status, sondern können bei eindrucksvoller Gestaltung als ein werbewirksames Instrument des Aftersales Marketings eingesetzt werden.

Bisher konnten Sie für die Status-Mails nur einfaches HTML nutzen, womit nur bedingt eine anspruchsvolle Gestaltung möglich war. Ein responsives Design, was für eine saubere Darstellung auf Handys und Tablets unverzichtbar ist, war technisch bisher nahezu unmöglich.

Das hat sich nun geändert! Damit die Status Mail 1 und 2 responsive gestaltet werden können, hat Powergap vor einiger Zeit angekündigt, diese Funktion zu integrieren. Die Entwicklung hat aber wesentlich länger als geplant gedauert, was mit der unerwarteten Komplexität zu begründen ist.

Hierzu muss man wissen, dass Emails nicht einfach mit dem für Browser standardisiertem HTML und CSS gestaltet werden können. Jeder Email-Client hat andere Anforderungen, weshalb es sehr schwierig ist, Email-Vorlagen responsive so zu gestalten, dass sie auf allen gängigen Email Clients bestmöglich dargestellt werden. Das gilt im Besonderen für alle Handy Email Clients, deren ansprechende Gestaltung aber kein Nice to Have sondern ein Must have! sind. Denn immer mehr Ihrer Kunden lesen Emails ausschließlich auf dem Handy.

Um diese Anforderungen zu erfüllen, mussten viele Test und Anpassungen gemacht werden, so dass alleine für das Vorlagen-Design über 200 Arbeitsstunden zusammen gekommen sind. Insgesamt sind in der Test- und Optimierungsphase über 1.000! Test-Emails versendet worden, die auf echten Endgeräten überprüft werden mussten.

Getestet wurde die neue Vorlage auf folgenden Email Clients:
Outlook, Thunderbird, Blue Mail, Outlook Mobile, Samsung Mobile, Gmail, und Apple Mail.
Auch auf anderen Email Clients wurden zusätzliche Stichproben-Tests durchgeführt.

Beispiel einer Status-Mail, wie sie von vielen Shops derzeit beim Kunden ankommen...

...und so könnten Ihre Statusmails jetzt aussehen!
Auf das Bild klicken, um das vollständige Mail mit Artikelbildern zu sehen (neues Fenster)

Wie funktioniert das responsive Status Mail in Powergap?

Insgesamt 4 Templates werden benötigt, die unter dem Punkt E-Mail Responsive unter dem roten T in der Shop-Verwaltung eingebaut werden können:

Head Template (#er_head#)
Footer Template (#er_footer#)
CSS Template (#er_css#)
#d Responsive Template (#er_d#)

Die Reihenfolge der resonsive Mails ist so aufgebaut: CSS Template → Head Template → eigentliches Mail 1 bzw. Mail 2 → Footer Template.



Die Unterteilung in 4 Template-Sektoren bietet den Vorteil einer zentralen Steuerung. Wenn sich beispielsweise Ihre Telefonnummer ändert, die im Footer Template hinterlegt ist, muss diese nur in diesem Template geändert werden, um automatisch für alle Zahlarten der Status 1 und Status 2 Mails übernommen zu werden.

Funktionen der einzelnen Templates

Head Template:

Im Head Template wird der Kopf der Email-Vorlage hinterlegt, also Ihr Logo und alle Startcodes. Wenn Sie einen Text zu Beginn der Emails einbauen wollen, der in allen Emails gleich erscheinen soll, ist auch das möglich. Bsp. ein temporärer Hinweis auf ein spezielles Angebot, dass nur eine gewisse Zeit gültig ist. Der Text oder auch ein ganzer Code-Block könnte dann zu einem späteren Zeitpunkt nur im Head Template herausgenommen bzw. geändert werden, was automatisch in allen Status-Mails aller Zahlarten angezeigt wird.

Footer Template:

Im Footer befinden sich i.d.R. Ihre Firmendaten, Links zu den AGBs, Datenschutz, Widerrufsrecht, zum Shop sowie ein Link zu Ihrer Email Adresse. Auch hier gilt, dass nur in diesem Template etwas geändert werden muss, um in allen Status Emails aller Zahlarten übernommen zu werden.

CSS Template:

Dieses Template beinhaltet das CSS für die Emails. Um sicherzustellen, dass die Emails auf allen gängigen Email-Clients sauber angezeigt werden, genügt es nicht, nur im CSS Template das CSS zu definieren. Outlook verlangt z.B. Tabellen-Design, andere Email Clients zeigen nur Inline-CSS korrekt an.

Responsive Template:

Dieses Template sorgt für die Artikeldetail-Darstellung. Derzeit (Stand 21.12.2020) sind folgende Synonyme verfügbar:

Außerhalb von #schleife_je_artikel#
#summe	Gesamtsumme exkl. Versandkosten
#versandkosten	Versandkosten
#gesamtsumme	Gesamtsumme inkl. Versandkosten
#waehrung	Währung des Shops bei der Bestellung
Innerhalb von #schleife_je_artikel#
#artikelname	Artikelname
#artikelnummer	Artikelnummer
#artikelanzahl	Anzahl pro Artikel
#einzelpreis	Preis pro Artikel
#gesamtpreis	Gesamtpreis pro Artikel
#waehrung	Währung
#lieferzeit	Lieferzeit des Artikels
#thumb	Artikelbild

Email Gestaltung:

Neben den 4 Templates benötigen die Emails das eigentliche HTML für Mail1 und Mail2. Dieses HTML muss für jede Zahlart gebaut werden, so dass bei 4 Zahlarten insgesamt 8 HTML Seiten erstellt werden müssen. In den HTML-Vorlagen werden Lieferadresse, Rechnungsadresse, Bestellnummer, Zahlart und Texte je nach Zahlart eingebunden. Bei den Zahlarten Vorkasse und Rechnung sind normalerweise zusätzlich Ihre Bankdaten mit eingebaut.

Es kann auch ein Link für Google Maps zu Ihrem Standort (interessant bei der Zahlart Bar bei Übergabe, bei Ladengeschäften usw.), ein Link für dem PDF-Download der Rechnung, ein Trackinglink (#tracklink) im Mail2 oder alles, was Sie bisher verwendet haben, integriert werden.

Auch die Implementierung des Synonyms #t ist möglich
#t = Text, der bei manuellem Emailversand aus der Bestellübersicht mitgegeben werden kann
Mit diesem Synonym kann für jedes Email ein individueller Text (bei manuellem Versand) mit den Emails versendet werden.

Beispiele

Thunderbird (Desk)

Thunderbird stellt CSS in den Emails korrekt dar.
Für das vollständige Mail in Thunderbird auf das Bild klicken (neues Fenster)!

Outlook (Desk)

Im Outlook lässt sich lediglich die Farbe der Kunden-Email-Adresse nicht beeinflussen, alle
anderen Linkfarben können festgelegt werden. Outlook kann bis heute keine Radien ausgeben.
Für das vollständige Mail in Outlook auf das Bild klicken (neues Fenster)!

Samsung Mail (Mobile)

Samsung Mail stellt die Email Vorlage korrekt dar.
Für das vollständige Mail mit Samsung Mail mobile auf das Bild klicken (neues Fenster)!

Apple Mail (iPhone)

Apple Mail stellt CSS in den Emails korrekt dar. Apple Mail unterstützt derzeit als einziger mobiler Email-Client auch Hyphens.
Für das vollständige Mail auf dem Apple iPhone auf das Bild klicken (neues Fenster)!Hier ein Beispiel, wie man z.B. eine Verlinkung zu Google Maps einbinden kann.

SMTP Server als Grundvoraussetzung für Responsive Mail

Wenn Sie diese oder Ihre eigene Mail-Vorlage einbauen wollen, müssen Sie - falls noch nicht geschehen - einen SMTP Server einrichten. Den SMTP Server sollten Sie in jedem Fall einrichten, da dadurch die SPAM-Markierung Ihrer Emails minimiert werden kann.

Wie das geht, erfahren Sie in den Forum-Beiträgen E-Mails via SMTP versenden und So kommen Status eMails auch per HTML sauber bei Ihrem Kunden an.

Kosten

Wenn die Vorlage unverändert als Basis übernommen wird, belaufen sich die Kosten für die Erstellung mit Ihrem Logo, Ihren Texten, Farben, und Links von Status Mail 1 und Status Mail 2 auf 2 Stunden Aufwand á 90,00EUR netto. Im Preis enthalten sind bis zu 4 Zahlarten. Jede weitere Zahlart wird mit 0,5 Stunden á 90,00EUR (45,00 EUR) netto berechnet. Die Preise beziehen sich auf die Standard-Sprache.

Auch ein individuelles Design nach Ihren Vorstellungen ist möglich. Da aber jedes Design so aufgebaut werden muss, dass es auf allen gängigen Email Clients auch tatsächlich sauber angezeigt wird, sind viele Tests auf echten Endgeräten erforderlich, was zu einem erheblich Aufwand führt. Dieser kann nach Ihrer Vorlage nur grob geschätzt und am Ende nach tatsächlichen Stunden abgerechnet werden.

Wenn Sie ein HTML und CSS Profi sind und sich zusätzlich auch mit den unterschiedlichen Interpretationen von Email Clients auskennen, könnten Sie selbstverständlich auch Ihre eigene Email Vorlagen bauen.

Für weitere Fragen oder für die direkte Beauftragung wenden Sie sich bitte an Sabine Kleine-Boymann oder direkt an mich unter fs@powergap.de.

Für mehr Informationen können Sie mich jederzeit über die E-mail fs@powergap.de oder im Internet unter www.frasche.de bzw. www.banner4u.de erreichen. Gerne auch über einen kostenlosen WhatsApp-Call unter +66 8100 27805.

Frankie S.