Mobile (R)evolution - Mobile Fusion? NIX Solution

Transkript

1 Mobile (R)evolution - Mobile Fusion? NIX Solution Praxistipps zum Einsatz von Newsletter-Technologien Ein Fachbeitrag von Katrin Krenn, Team Lead Service bei Commerce Plus und Leiterin der Task Force Newsletter bei Commerce Plus. /Gliederung Problemstellung Aufbau der 680 Tests Summary Praxistipps HTML-Buttons Media Queries Floating Tables Grid-Layout externes CSS Video Bildformate Hintergrundbilder Resümeé

2 Problemstellung -Marketing-Aktivitäten wie Newsletter sind wichtige Kanäle für guten Kundendialog und zahlen damit auf erfolgreiche Kundenbindung ein. Wenn ein Newsletter seinen Empfänger nicht oder nicht wie gewünscht erreicht, verliert der Kanal seine Berechtigungsgrundlage. Mobile Newsletter, Chamäleon Code, Mobile Fusion. diese Schlagwörter begegnen uns immer wieder, wenn die aktuelle Entwicklung im -Marketing beschrieben wird. Anbieter versprechen Newsletter, die für jedes Endgerät optimiert sind. Es scheint, die Branche ist auf der Suche nach dem ultimativen mobile optimierten Newsletter. Doch sind sie dort schon angekommen? Existiert der optimale mobile Newsletter? Können die Versprechen der Anbieter gehalten werden? Welche in Newslettern eingesetzten Technologien funktionieren, wo muss nachgearbeitet werden? Wo müssen Abstriche gemacht werden? Um Kunden optimal beraten zu können und das eigene Verständis zu stärken, auf welche Grenzen Agenturen und Unternehmen im Bereich mobile Newsletter treffen, haben wir umfangreiche Tests durchgeführt, die die Einsatzfähigkeit aktueller Technologien auf verschiedenen Endgeräten überprüft. Die entscheidende Frage war: Gibt es den ultimativen mobile optimierten Newsletter? Vorweg: Mobile (R)evolution, Mobile Fusion? NIX Solution! Es gibt keine generelle Lösung, um den ultimativen mobile optimierten Newsletter zu erstellen. Aus meiner Sicht wird es diesen in absehbarer Zukunft auch nicht geben. Aufbau der Tests HTML-Fragmente aus mobilen Newslettern wurden von uns auf zahlreichen Endgeräten und Mailclients-Browser-Kombinationen getestet. Die se liefern Erkenntnisse über die Darstellungsqualität in den verschiedenen Anzeigemedien und Mail-Programmen, aus denen sich Praxistipps für Agenturen und Unternehmen ableiten lassen. Insgesamt wurden zehn verschiedene HTML-Fragmente in 68 Anzeigemedien getestet. Das ergibt 680 Einzeltests, die den sen zugrunde liegen. Die wichtigsten Erkenntnisse der Tests werden in dem Artikel herausgestellt.

3 Übersicht der 680 Einzeltests, Commerce Plus Summary # Kann man einen Newsletter so aufbauen, dass er je Anzeigemedium eine eigene Darstellung hat? Die Vielzahl der Anzeigemöglichkeiten von Desktop- und Webclients, Tablets, Smartphones und Apps interpretieren das HTML von Newslettern zu unterschiedlich, als das es eine Lösung geben kann. Nicht das Anzeigemedium allein ist für die Darstellung eines HTML Newsletters entscheidend, sondern vielmehr wie man sich den Newsletter darstellen lässt. # Kann ein Newsletter sowohl für Desktops, Tablets als auch Smartphones erstellt werden? Unter Berücksichtigung der Restriktionen und Besonderheiten der verschiedenen Anzeigemedien, kann das HTML eines Newsletters so aufgebaut werden, dass er überall gut dargestellt und genutzt werden kann. Hier sollte man berücksichtigen, dass verschiedene Ansichten des Newsletters nicht möglich sind. # Existiert eine generelle technologische Lösung, um Newsletter auf jedem Endgerät optimal anzeigen zu lassen? Eine generelle technologische Lösung gibt es derzeit nicht.

4 Praxistipps HTML-Buttons Buttons als Grafiken werden bei Bildunterdrückung nicht angezeigt, die viele Verbraucher auf ihren Endgeräten aktiviert haben. Getestet wurden HTML-Buttons, die dieses Problem umgehen können. : Einer der größten Spielverderber ist hier Outlook Style-Attribute, welche Innen- oder Außenabstände definieren, werden völlig ignoriert. Tablets und Smartphones machen auf den ersten Blick einen guten Eindruck. Tipp: Call-to-Action Buttons sind in Newslettern elementar. Nutzen sie unbedingt HTML-Buttons. Media Queries Über die Verwendung von Media Queries soll die Breite des Bildschirms ermittelt werden und so ein Element ausgeblendet werden, falls der Anzeigebereich nicht ausreicht. Dieser Test beinhaltet ein Bild-Element, welches bei kleineren Anzeigebereichen automatisch ausgeblendet werden sollte. Die Desktop- und Webclients ignorieren die Verwendung von Media Queries vollständig. Media Queries wurden nur bei Nutzung der Standard- -Clients der mobilen Endgeräte interpretiert. Tipp: Media Queries können sinnvoll sein, wenn ich weiß, dass meine Zielgruppe überwiegend die nativen Standard-Mail-Clients ihrer Smartphones und Tablets nutzt.

5 Floating Tables Da wir festgestellt haben, dass das Ausschalten von HTML-Elementen über Media Queries nicht überall funktioniert, war die Überlegung, Elemente an Hand des verfügbaren Platzes unterschiedlich zueinander zu positionieren. Mit Hilfe der CSS-Eigenschaft float:left sollten sich, je verfügbarem Platz, zwei Tabellen nebeneinander oder untereinander positionieren. Diese Art der Element-Positionierung überzeugte in keiner der getesteten Gruppen. Bei den Desktop und Webclients, den Tablets und Smartphones gibt es zu viele Ausreißer, um diese Art der Anordnung zu empfehlen. Tipp: Wenn der Desktop-Client Outlook vernachlässigt werden kann, verwenden Sie statt float:left lieber align= left. Grid-Layout Getestet wurde ein klassisches Grid Layout mit div-blöcken und article-tags. Die Verwendung des HTML5 article-tags wird vor allem in den Webclients und in den mobile Apps verhindert. Die Standard- -Clients der mobilen Endgeräte stellen das Grid-Layout sauber dar. Tipp: Vermeiden Sie die Verwendung von Grid-Layout zur Erstellung von Newslettern. Alternative ist das klassische Tabellenlayout, da es von allen Endgeräten richtig interpretiert wird. externes CSS Getestet wurde das Einbinden einer externen CSS-Datei zum stylen von HTML-Elementen. Bei den Desktopclients ignoriert Lotus Notes die externe CSS-Datei völlig. Auch fast alle Webclients laden keine externe CSS-Datei nach. Bei den Tablets wird die externe CSS in den Standard- -Clients geladen, bei Verwendung einer App nicht. Die Standard- -Programme der Smartphones laden und berücksichtigen externe CSS-Dateien. Die verwendeten Apps erzeugen hier aber unterschiedliche se. Tipp: Verzichten Sie wenn möglich auf externe CSS-Dateien und stylen Sie die HTML-Elemente einzeln und inline. Video Abspielen eines HTML5-Videos direkt im Newsletter. Getestet wurden dabei mehrere gängige Videoformate. Überrascht hat der Webclient von Freenet. Dieser hat sowohl in der Kombination mit Firefox als auch Chrome das Video direkt abspielen können. Alle anderen Webclients haben die Videos nicht geladen. Das ipad konnte zumindest ein Video-Format erfolgreich interpretieren.

6 Tipp: Die Interpretationsfähigkeit von Videos in allen Endgeräten ist noch nicht ausgereift. Wenn sie sich für Videoeinbindung im Newsletter entscheiden, ist die Gefahr groß, dass Ihre Botschaft nicht transportiert wird. Es gibt kostenpflichtige Lösungen für bestimmte Webclients Videos einzubinden. Aber auch hier erreicht ihr Video nicht alle Empfänger. Bildformate Es wurden die Bildformate.bmp, transparentes.gif,.jpg, transparentes.png und.tif überprüft. Generell werden fast alle Bildformate in fast allen Kombinationen gut dargestellt, vorrausgesetzt die Bildunterdrückung ist nicht aktiv. Tipp: Um wirklich sicher zu gehen, dass ein Bild angezeigt wird, sollten.gif oder.jpg s verwendet werden. Verzichtet man auf die optimale Darstellung von Bildern in Outlook 2003, sind sogar transparente.png s möglich. Hintergrundbilder : Hintergrundbilder werden vor allem dann genutzt, wenn beispielsweise Verläufe im Newsletter genutzt werden sollen und darauf Text gesetzt wird. Getestet wurde eine Tabelle, in der eine Tabellenzelle ein Hintergrundbild enthielt. : Außer in Outlook 2007 und Outlook 2010 werden Hintergrundbilder überall dargestellt. Unabhängig vom Test, lassen sich Hintergrundbilder mit ein wenig Detailprogrammierung für Outlook 2010 ausliefern, was aber der Suche nach dem ultimativen mobile Newsletter widerspricht. Tipp: Können die genannten Desktop-Clients vernachlässigt werden, spricht nichts gegen die Verwendung von Hintergrundbilderrn. Nutzt Ihre Zielgruppe überwiegend Outlook, ist ein Newsletter-Design ohne Hintergrundbilder erforderlich.

7 Resümeé Versuchen Sie herauszufinden, wer Ihre Newsletter-Empfänger sind, auf welchen Endgeräten sie den Newsletter ansehen, welche Desktop- oder Webclients genutzt und welche Apps verwendet werden. Können diese Zahlen ermittelt werden, sollte eine Analyse erfolgen. Vielleicht stellt sich dabei heraus, dass ein Lotus Notes für Ihre Zielgruppe nicht relevant ist, vielleicht stellt sich auch heraus, dass die Mehrzahl der Empfänger mobile Endgeräte nutzen. Können diese Zahlen nicht ermittelt werden, sollte der kleinste gemeinsame Nenner gelten. Sind schön designte Buttons wichtig, aber Outlook kann ignoriert und auf abgerundete Ecken kann verzichtet werden, dann nutzen Sie HTML-Buttons. Sie wollen ein schönes Hintergrundbild, auf dem Systemtext steht, und das für Outlook 2010? Überlegen Sie sich ein anderes Design, denn diese Kombination funktioniert leider nicht. Da sich die Technologien ständig ändern, die Menge der Anzeigegeräte tendenziell steigt, heißt dies für die Zukunft, testen, testen, testen. Über die Autorin: Katrin Krenn ist Team Lead Service bei Commerce Plus und Leiterin der Task Force Newsletter. Seit mehreren Jahren beschäftigt sich Katrin Krenn intensiv mit der technologischen Umsetzung von Newslettern, realisiert klassische Werbe- s für Kunden und etabliert innovative Technologien im Newsletterformat, wie die zeitgesteuerte Darstellung von Bildern, das Einbetten von Countdownzählern, das Umgehen der Bildunterdrückung oder die personalisierte Darstellung von en über die Retargeting-Technologie.