Use Case Optimierte Newsletter für mobile Endgeräte

Transkript

1 Use Case Optimierte Newsletter für mobile Endgeräte

2 Wir stellen Ihnen die wichtigsten Anwendungsfälle zum Thema Responsive -Design (REMD) vor und zeigen, welche Möglichkeiten zur Optimierung Ihnen der AGNITAS E-Marketing Manager (EMM) dafür zur Verfügung stellt. Dieser Leitfaden deckt allerdings nicht sämtliche Eventualitäten ab, sondern soll Sie vielmehr in die Lage versetzen, die wichtigsten REMD-Einstellungen selbst vorzunehmen. Inhaltsverzeichnis 1. Optimierte Newsletter sind keine Kür, sondern Pflicht Das Ziel: Optimierte Darstellung auf allen Endgeräten Die Herausforderung: Unterschiedliche Displaygrößen, -Clients und Browser Die Lösung: Responsive -Design (REMD) Optimierung von Mailings in der Praxis Design und Grundlagen Mailings mit Hilfe von responsive -Design (REMD) gestalten Optimale Darstellung durch flexibles Grundgerüst Fenster- und/oder Bildschirmbreite Was bewirken die Umbruchpunkte in einem Mailing? Anpassen des Layouts durch Umbruchpunkte Weitere Optimierungsmöglichkeiten mit dem AGNITAS E-Marketing Manager Mobile Versionen der Bilder M-HTML: optimierte Webansicht für mobile Endgeräte Mehr Erfolg durch Qualität Qualitäts-Check 1: Vorschaufunktion für verschiedene Ansichten Qualitäts-Check 2: Vorschaufunktion für verschiedene Endgeräte Qualitäts-Check 3: Darstellung live auf Mail-Clients und Browsern kontrollieren Überprüfen und optimieren mit statistischen Kennzahlen

3 1. Optimierte Newsletter sind keine Kür, sondern Pflicht Immer mehr Verbraucher nutzen mobile Endgeräte, um im Web zu surfen, Informationen aller Art abzurufen und um s zu lesen. Das Thema s stellt die Newsletter-Versender vor besondere Herausforderungen, da Newsletter auf mobilen Endgeräten wie Tablets und Smartphones im Gegensatz zu stationären Geräten wie dem PC in einem völlig anderen Nutzungskontext gelesen werden. Besitzer mobiler Geräte haben oft wenig Zeit, sich mit einem Newsletter zu beschäftigen, weil sie zum Beispiel schnell von einem Ort zum anderen gelangen müssen. Für ihre s haben sie dabei höchstens einen flüchtigen Blick übrig. Hinzu kommen die andersartige Bedienung durch Touch-Displays und die stark variierenden Größenverhältnisse. 11% 16% 3% 70% Nutzer Analyse Öffner (PC) Öffner (Tablet) Öffner (Smartphone) Öffner (mehrere Geräte) Abbildung 1: Immer mehr Verbraucher öffnen und lesen Ihre s auf mobilen Endgeräten: Das Diagramm zeigt die durchschnittliche Öffnungsraten je Endgerät. Dabei gilt es auch zu beachten, dass einige Nutzer ihre s mit mehr als nur einem Gerätetyp betrachten. 1.1 Das Ziel: Optimierte Darstellung auf allen mobilen Endgeräten Newsletter-Versender müssen dafür sorgen, dass ihre Newsletter nicht nur auf dem PC, sondern auch auf iphone & Co. eine hohe Bedien- und Lesefreundlichkeit bieten, um die wichtigsten Informationen schnell vermitteln zu können. Das eigentliche Ziel könnte sogar noch etwas ambitionierter formuliert sein: Der Newsletter sollte sowohl auf einem XXL-Bildschirm als auch auf einem typischen Smartphone-Display gut zu lesen, einwandfrei dargestellt und flüssig zu navigieren sein. 1.2 Die Herausforderung: Unterschiedliche Displaygrößen, -Clients und Browser Die optimierte Darstellung eines Newsletters auf mobilen Endgeräten bringt aufgrund des -Formats noch weitere Herausforderungen mit sich: Der Newsletter landet als ein HTML-Konstrukt im Posteingang des Empfängers, das anders als bei Webseiten nicht nachträglich in einer anderen Version geladen werden kann. So gesehen müsste also für jedes Endgerät eine eigene Version des Newsletters erstellt werden, um eine ideale Darstellung zu erreichen. Zudem verwenden mobile Endgeräte verschiedene Browser und -Programme, deren Darstellung sich teilweise von Version zu Version unterscheidet. Eine Liste von aktuellen Mailclients (Auswahl) Mailclient (Desktop) Mailclient (Web) Mailclient (mobil) Apple Mail AOL Mail Amazon Kindle Fire Eudora AOL Desktop Amazon Kindle Fire HD GNUMail Arcor Android IBM Notes freenetmail Apple iphone Microsoft Entourage GMX Mail Apple ipad Microsoft Office Outlook Google Gmail Apple ipod Touch Microsoft Outlook Express Hotmail BlackBerry OS Mozilla Thunderbird mail.de BlackBerry Playbook Novell Evolution Outlook.com HP WebOS Opera Mail Smart-Mail Microsoft Windows Mobile Pegasus Mail web.de Mail Microsoft Windows Phone Windows Live Mail Yahoo Mail Microsoft Surface 3

4 Wie eine aktuelle Studie der Agentur JOM Jäschke Operational Media zeigt, stellt das viele deutsche Newsletter- Versender vor erhebliche Probleme. Nur 26 Prozent der exemplarisch herangezogenen Newsletter wurden auf den Testgeräten lesefreundlich dargestellt. Integrierte Klickflächen ließen sich sogar bei nur 23 Prozent der Newsletter einwandfrei bedienen. Abbildung 2: Viele Newsletter sind nicht für die Darstellung auf mobilen Endgeräten optimiert. Der Versender im linken Beispiel macht es richtig, während im rechten Beispiel die Schriftgröße und die Klickflächen viel zu klein gewählt sind. (Quelle: JOM Jäschke Operational Media). 1.3 Die Lösung: Responsive -Design (REMD) Die Lösung dieses Dilemmas lautet Responsive -Design (REMD) und führt auf elegante Weise zum Ziel: Statt für jedes Endgerät einen separaten Newsletter zu erstellen, wird nur ein einziger Newsletter generiert. Dieser kann auf unterschiedliche Auflösungen und Bildformate der Endgeräte reagieren und sich je nach Tablet und Smartphone flexibel anpassen. Das geschieht mit Hilfe der so genannten Media Queries. Mit Hilfe von Media Queries lässt sich die Darstellung eines Mailings für verschiedene Endgeräte anpassen. Im Folgenden zeigen wir Ihnen, wie Sie einen Newsletter mittels einfacher Gestaltungsgrundlagen, Media Queries und weiterer Werkzeuge des AGNITAS E-Marketing Manager (EMM) bestmöglich für die Darstellung auf Smartphone, Tablet & Co. vorbereiten und nach dem Versand die entsprechenden Statistiken abrufen können. 2. Optimierung von Mailings in der Praxis Im vorliegenden Praxisteil zeigen wir, wie sich eine optimierte Darstellung von Mailings auf mobilen Endgeräten erreichen lässt. Dazu beleuchten wir dieses Thema von mehreren Seiten. Design und Grundlagen Im ersten Teil steht das Design des Mailings im Mittelpunkt. Hier zeigen wir Ihnen, wie Sie Mailings für mobile Endgeräte in dieser Hinsicht optimal gestalten und welche Aspekte Sie dazu berücksichtigen sollten. Responsives Design mit Hilfe von Media Queries Dieser Abschnitt zeigt an konkreten Beispielen, wie man eine optimierte Darstellung von Mailings auf mobilen Endgeräten mit Hilfe von Media Queries erreicht. Zur Sprache kommen Kernthemen wie flexible Anpassung des Layouts 4

5 an die Fenster- und Bildschirmbreite, unterschiedliche Größen und Platzierungen von Bildern, Tabellen umbrechen sowie die Darstellung von Weblinks je nach Endgerät. Weitere Optimierungsmöglichkeiten mit dem AGNITAS E-Marketing Managers Zum einen werden hier responsive Bilder und das Format M-HTML vorgestellt, zum anderen erfahren Sie, wie Sie direkt im EMM eine Vorschau Ihres Mailings für verschiedene aktuelle und ältere Browser und Endgeräte erhalten und welche Möglichkeiten Sie mit dem EMM haben, das Mailing hinsichtlich der mobilen Nutzung statistisch auszuwerten. 3. Design und Grundlagen Damit Newsletter auf mobilen Endgeräten optimal dargestellt werden, müssen sie sich sowohl am Nutzerverhalten orientieren als auch die physischen Besonderheiten von Produkten wie Tablets und Smartphones berücksichtigen. Dazu gehören zum Beispiel für mobile Geräte angepasste Überschriften und Inhalte, damit die Botschaften auch bei flüchtiger Betrachtung klar und deutlich wahrgenommen werden. Da mobile Endgeräte in der Regel einen deutlich kleineren Bildschirm als PCs oder Notebooks besitzen, muss sich der Newsletter auch auf diesen kleinen Displays gut lesen und bedienen lassen. Deswegen sollten Sie folgende Tipps bei der Erstellung Ihrer Mailings berücksichtigen: 1 Kontrastreiches Newsletter-Design Bei mobilen Endgeräten lässt sich nie vorhersagen, unter welchen Lichtverhältnissen der Empfänger seine s liest. Verwenden Sie deshalb kontrastreiche Farben bei der Gestaltung des HTML-Newsletters. Schwarze Schrift auf weißem Hintergrund mag vielleicht im ersten Moment etwas langweilig wirken, kann aber ihre Klick- und Konversionsraten nachher positiv beeinflussen. 2 Links/rechts-Scrollen vermeiden Kaum etwas stört den Lesefluss so sehr wie Texte, die seitlich abgeschnitten sind und damit zusätzliches Scrollen nach links oder rechts erfordern. Achten Sie deshalb darauf, dass die Elemente ihres HTML-Newsletters die vorhandene Fenster- oder Bildschirmbreite berücksichtigen. Tipp: Planen Sie bereits bei der Gestaltung mögliche Umbruchpunkte mit ein. 3 Alt-Tags für Grafiken Da auch mobile -Clients gerne Grafiken unterdrücken, empfiehlt sich der Einsatz sogenannter Alt-Tags. So erfährt der Empfänger auch bei Unterdrückung des Bild-Downloads, was der Versender ihm zeigen wollte. Tipp: Generell sollten Sie vermeiden, Texte als Bild einzufügen. 4 Daumengroße Buttons Mit Daumen oder Zeigefinger navigiert es sich nicht so filigran wie mit einer Maus. Um Nutzer beim Newsletter-Versand nicht zu verärgern, sollten Sie die Links in ausreichendem Abstand zueinander setzen. Viele mobil optimierte Newsletter folgen hier den ios Human Interface Guidelines von Apple, die eine Buttongröße von 44 x 44 Pixel empfehlen, da dies in etwa der Größe einer durchschnittlichen Fingerspitze entsprechen soll. 5 Gezielter Einsatz von Grafiken und Rich-Media-Content Integrieren Sie in Ihre HTML-Newsletter nicht zu viele Fotos oder Grafiken. Denn zu lange Ladezeiten wirken sich negativ auf den Erfolg Ihrer - Kampagne aus. 5

6 6 Landing Pages für mobile Endgeräte Die beste -Kampagne nützt nichts, wenn der User auf der folgenden Website frustriert abbricht, weil diese nicht mobil bedienbar ist. 7 Mediengerechte Rückkanäle Neben optimierten Landing Pages bietet es sich auch an, Bestell- oder Service-Nummern in den Newsletter zu integrieren. Die meisten mobilen -Clients erkennen diese automatisch und müssen zum Telefonieren nur noch angetippt werden. 8 Aussagekräftiger Vorschautext Fast jeder -Client zeigt neben dem Betreff einen kurzen Auszug aus dem Inhalt (Pre-Header). Hierzu verwendet er den ersten Text aus der Text- Version. Schreiben Sie daher sinnvolle Texte mit Bezug auf den Inhalt und nicht etwa nur in Webansicht öffnen. 9 Kurz und knackig Auch beim Fließtext Ihrer Mailings sollten Sie sich so kurz wie möglich fassen. Die Kernbotschaft Ihres Newsletters muss daher direkt auf den ersten Blick ersichtlich sein. Für die mobile Version kann das auch bedeuten, dass bestimmte Inhalte einfach ausgeblendet werden. 10 Sexy Betreffzeilen Um das Interesse der Leser zu wecken, hat man meist nur wenige Sekunden Zeit. Relevante Keywords oder bekannte Markennamen sollten deshalb gleich zu Beginn Ihrer Betreffzeile erscheinen. 11 Versenden einer Text- und HTML- Version Ältere Versionen der gängigen Betriebssysteme können HTML oftmals nicht richtig darstellen oder sogar erkennen. Daher sollten Sie auch eine Text- Version des Newsletters anbieten (MIME Multipart). 12 Webview-Link anbieten Da manche -Clients Darstellungsprobleme der HTML-Version haben, sollten Sie auch einen Link zur Webansicht Ihres Newsletters im Mailing anbieten. Um wirklich ein umfassendes Bild von Ihrem Newsletter zu bekommen, sollten Sie nach Möglichkeit Ihre Mailings auf verschiedenen Endgeräten selbst aufrufen. Eine gute Hilfe sind vor diesem Hintergrund sogenannte Provider-/Inbox- Previews, die auch der AGNITAS E-Marketing Manager anbietet. Ausführliche Informationen zu den unter 3. genannten Punkten finden Sie in unserem Whitepaper -Marketing im Zeitalter des Mobile Web. Dieses steht Ihnen auf der AGNITAS-Webseite unter kostenlos zur Verfügung. 6

7 4. Mailings mit Hilfe von responsive Design (REMD) gestalten Das Kunststück bei der optimierten Darstellung ist es, das Mailing auf praktisch jedem Endgerät gut aussehen zu lassen und gut lesbar zu machen. Streng genommen schließt das die Extreme beider Seiten mit ein, also sowohl den internetfähigen 70-Zoll-Fernseher als auch das Smartphone mit Mini-Display. Doch auch sämtliche Zwischengrößen müssen durch eine korrekte Darstellung überzeugen und nicht zuletzt sollte das Mailing alle der im ersten Praxisteil angesprochenen Gestaltungs-, Text- und Navigationsregeln berücksichtigen. Der zentrale Aspekt ist aber zweifellos das Responsive Design (REMD). Nochmal zur Erinnerung: Normalerweise bräuchte es für jedes mobile Endgerät ein eigens darauf abgestimmtes Mailing. Mit REMD ist dagegen nur ein einziges Mailing erforderlich, das sich im Unterschied zu herkömmlichen Mailings flexibel an unterschiedliche Auflösungen und Bildformate der mobilen Endgeräte anpassen kann. Das REMD versucht nicht, es allen mobilen Endgeräten recht zu machen, indem es die Eigenheiten jedes einzelnen davon berücksichtigt (was im Übrigen auch einen schier unmöglich hohen Testaufwand für den Versender bedeuten würde), sondern arbeitet mit Media Queries Responsive Mail Design Um eine optimierte Darstellung zu erreichen, kommen die so genannten Media Queries zum Einsatz. Media Queries sind CSS3-Befehle und fragen Merkmale des Endgeräts ab, zum Beispiel dessen Fenster- oder Bildschirmbreite, und schneidern ausgehend davon das Mailing so zurecht, dass es optimal dargestellt wird. Wichtig ist jedoch, dass man von festen Größenangaben abweicht und statt dessen Rahmenparameter definiert, innerhalb dieser sich das Mailing bewegen muss. Hinweis: Viele mobile Mailclients unterstützen Media Queries, doch es gibt immer wieder Ausnahmen, von denen auch Produkte bekannter Hersteller nicht ausgenommen sind. Beispiel dafür sind Android 2.1, BlackBerry 5, Windows Mobile Phone in den Versionen 6.1, 7 und 8 sowie Microsoft Surface. In der Praxis hat es sich gezeigt, dass sich eine optimierte Darstellung bereits mit relativ wenigen Media Queries erreichen lässt. Dabei geht es immer wieder um die folgenden Kernthemen: Flexible Anpassung des Layouts an die Fenster- oder Bildschirmbreite Automatische Größenanpassung von Bildern je nach Fenster- oder Bildschirmbreite Umwandlung eines mehrspaltigen Mailing-Layouts in ein einspaltiges Layout, je nach Fenster- oder Bildschirmbreite Umwandlung von Weblinks in Schaltflächen (Buttons) Media Queries fragen beim Laden des Mailings die Parameter des Endgerätes ab und zeigen das Mailing in einer dazu passenden Darstellung. Die Media Queries müssen mit Hilfe von CSS-Befehlen (über <style type= text/css > [ ] </style> -Blöcke) im HTML-Code der Schablone eingebettet werden. 7

8 Abbildung 3: So wirkt Responsive Design: CSS-Anweisungen im HTML-Quellcode sorgen dafür, dass sich ein Mailing in puncto Darstellung flexibel an das jeweilige mobile Endgerät anpasst. Von links nach rechts sind das die herkömmliche Darstellung, die Ansicht für Tablets sowie die Ansicht für Smartphones. In dieser Ansicht verwendet das Beispiel-Mailing eine mobiloptimierte Version des Banner-Bildes ( Jetzt Whitepaper sichern! ). Das im Folgenden verwendete Mailing zeigt, wie sich ein Responsive Design mittels Media Queries umsetzen lässt. Die zentrale Abfrage und Basis für sämtliche Layout-Anpassungen des Mailings ist die Fensterbreite des - Programms oder Browsers, in dem es angezeigt wird. Je nach vorgefundener Pixelzahl in der Breite ändern sich Layout und damit die Anordnung der Inhalte. Hinweis: Das Beispiel-Mailing zeigt die wichtigsten Optimierungen für ein Mailing durch Media Queries, es sind jedoch weitere Optimierungen möglich Fenster- und/oder Bildschirmbreite? Über die CSS Media Queries lässt sich sowohl die Fensterbreite (also die Breite des Fensterinnenrahmens des E- Mail-Programm- oder Browserfensters, mit dem das Mailing angezeigt wird) oder die Bildschirmbreite (die komplette zur Verfügung stehende Breite des Monitors) ermitteln. Im Beispiel-Mailing wird einheitlich die Fensterbreite abgefragt (CSS: min-width und max-width ), nicht aber die Größe des Bildschirms (CSS: max-device-width ). Warum das? Bei Tablets und Smartphones ist die Fensterbreite der App in der Regel gleich der Bildschirmbreite, so dass man hier sowohl mit dem einen als auch mit dem anderen Parameter arbeiten könnte. Bei Desktop-Rechnern oder Geräten mit einem großen Display ist die Fensterbreite dagegen meistens ungleich der Bildschirmbreite hier passt sich das Layout an die verfügbare Fensterbreite an. 8

9 Um die Abfrage einheitlich zu gestalten, haben wir die Fensterbreite als Parameter genommen und dafür Umbruchpunkte festgelegt. Das sind Grenzwerte, anhand derer das Layout des Mailings an das jeweilige Endgerät angepasst wird. Damit stellt man sicher, dass ein Newsletter beispielsweise auf einem Smartphone genauso optimal dargestellt wird wie auf einem großen Desktop-Monitor. Zum Ermitteln der Umbruchpunkte über die Fensterbreite haben wir einfach den entsprechenden CSS-Befehl ersetzt. Es würde natürlich auch über die Abfrage der Bildschirmbreite funktionieren Was bewirken die Umbruchpunkte in einem Mailing? Unser Beispiel-Mailing soll stellvertretend für einen Newsletter zeigen, wie Responsive Mail Design in der Praxis funktionieren kann. Drei vordefinierte und exemplarische gewählte Fensterbreiten werden abgefragt (Breite größer/gleich 620 Pixel; Breite größer/gleich 480 und kleiner als 620 Pixel; Breite kleiner als 480 Pixel). Die Fensterbreiten stehen stellvertretend für die Darstellung auf einem großen Bildschirm, einem Tablet-PC und einem Smartphone. Abhängig von der Fensterbreite passt sich die Breite der zugrunde liegenden Tabelle an. zeigt das Mailing unterschiedlich große Versionen der verwendeten Bilder und Logos an. wird aus dem zweispaltigen Layout ein einspaltiges Layout, sobald ein Grenzwert unterschritten ist. wird aus dem Textlink ein klickbarer Button. 9

10 Abbildung 4: Das Beispielmailing in der (Standard-)Desktop-Ansicht mit einer Breite von 620 Pixel. Weil sich das Beispiel-Mailing sehr flexibel an das jeweilige Endgerät anpasst, könnte man vermuten, dass es dafür jede Menge Programmieraufwand braucht. Doch die im HTML-Code eingebetteten Media Queries lassen sich mit wenigen Codezeilen schreiben. Der nachfolgende Screenshot zeigt den kompletten CSS-Block jeder Media Query (zu erkennen an dem ) folgt eine Anpassung der CSS-Styles und Klassen. 10

11 Abbildung 5: Es braucht nur wenige Zeilen CSS-Code mit darin eingebetteten Media Queries, um das Mailing so zu optimieren, dass es auf unterschiedlich großen Bildschirmen passgenau dargestellt wird Anpassen des Layouts durch Umbruchpunkte Bei Browsern und -Programmen, die auf einem Standard-Desktoprechner laufen, beträgt die gängige Maximalbreite für ein Mailing rund 600 Pixel und in unserem Beispiel-Mailing sind es 620 Pixel. Auch die meisten Tablets und Smartphones mit größerem Bildschirm können eine entsprechende Auflösung ohne weiteres darstellen. Doch was passiert mit dem Mailing, wenn man es an ein Mobilgerät sendet, dessen Bildschirm im Hochformat beispielsweise nur 400 Pixel in der Breite auflösen kann? Ohne entsprechende Media Queries im HTML-Code, anhand derer die Fensterbreite abgefragt wird, könnte es passieren, dass bei einigen Geräten rund ein Drittel des Mailings abgeschnitten wird und der User umständlich nach rechts scrollen müsste, um sämtliche Inhalte zu sehen. Es gibt allerdings auch Mobilgeräte, welche die Darstellung zoomen und so das Mailing dennoch komplett auf dem Bildschirm anzeigen können. Die Abfrage der Fensterbreite eines Endgerätes bildet daher das Fundament, auf das sämtliche Layout-Anpassungen basieren. Nur wenn die Fensterbreite bekannt ist, kann zum Beispiel folgendes optimiert werden: Bilder, die mitzoomen optimierte Bildinhalte (siehe Punkt 4.2.1) Links und Buttons, die auch mit dem Finger klickbar sind Gut lesbare Schriftgrößen Flexible Textumbrüche Mehrspaltige Layouts, die sich gegebenenfalls untereinander ordnen Vermeiden von Scrollen nach links oder rechts Inhalte ausblenden, um endloses Scrollen zu vermeiden 11

12 Die Media only screen definiert das Ausgabe-Medium. Der HTML-Quellcode unseres Beispiel- Mailings berücksichtigt drei grundliegende Typen von Ausgabe-Medien und passt das Layout entsprechend an in absteigender Größe sind das der Desktop oder ein anderes Endgerät mit großem Bildschirm, gefolgt vom Tablet und schließlich dem Smartphone. Die drei mittels max-width abgefragten Fensterbreiten sind gleichzeitig Umbruchpunkte sobald einer davon erreicht wird, verändert sich das Layout. Umbruchpunkte können sich nicht nur auf die verfügbare Fensterbreite ( min-width, max-width ) beziehen, sondern auch auf die Gerätebreite beziehen ( max-device-width ) oder auf die Anzahl der Pixel pro Inch ( device-pixel-ratio ). 1. Die Standardansicht: In unserem Beispiel wird die Standardansicht geladen, wenn die Fensterbreite mindestens 620 Pixel beträgt. In diesem Fall erscheinen alle Bilder in Originalgröße, das Layout ist zweispaltig und die rechte Spalte wird auf 200 Pixel Breite festgelegt. Gleichzeitig ist die maximale Breite des Mailings auf 620 Pixel beschränkt, damit das Mailing auf größeren Bildschirmen seine gewünschte Form behält und nicht unnötig in die Breite geht. Abbildung 6: Erste Abfrage: Beträgt die Fensterbreite mindestens 620 Pixel? 12

13 Abbildung 7: Wenn die Fensterbreite mindestens 620 Pixel beträgt, erscheint das Mailing in dieser Standardansicht. 2. Die Tablet-Ansicht (auch für mittlere Fenstergrößen): Mit einer weiteren Media Query wird abgefragt, ob die Fensterbreite zwischen 480 und 619 Pixel liegt. Trifft das zu, passieren mehrere Dinge: Die Maximalbreite des Mailings wird auf 480 Pixel festgelegt. Gleichzeitig wird aus dem zweispaltigen Layout ein einspaltiges die vormals rechte Spalte wird nun unterhalb der linken Spalte angezeigt. Wer genau hinschaut, erkennt auch, dass sich die Bildgröße geändert hat. Das Logo und Headline-Grafik werden nun mit 90 Prozent der ursprünglichen Größe dargestellt. 13

14 Abbildung 8: Zweite Abfrage: Liegt die Fensterbreite zwischen 480 und 619 Pixel? Mit diesen Einstellungen sieht das Mailing nun so aus: Abbildung 9: Die Tablet-Ansicht: Ist der Bildschirm zwischen 480 und 619 Pixel breit, dann wird das Mailing auf diese schmalere Version umgestellt. 14

15 3. Die Smartphone-Ansicht (auch für kleine Fenstergrößen): Mit der dritten Media only screen wird abgefragt, ob der Empfänger des Mailings ein kleines mobiles Endgerät wie etwa ein Smartphone nutzt. Dann dürfte die Fensterbreite nicht über 479 Pixel liegen. Auch hier wird das Mailing nun entsprechend ausgerichtet: Die Maximalbreite des Mailings wird auf 320 Pixel festgelegt und wie bei der vorherigen Tablet-Ansicht aus dem zweispaltigen Layout wiederum ein einspaltiges. Die Bildgrößen werden zudem deutlich verkleinert und betragen jetzt nur noch 80 Prozent der Ausgangsgröße. Zur besseren Lesbarkeit sind nun auch die Icons für Facebook, Google+ und Twitter am oberen rechten Mailing-Rand verschwunden, ebenso das Paketbild aus dem ersten Textblock. Abbildung 10: Dritte Abfrage: Ist der Bildschirm höchstens 479 Pixel breit? Daraus ergibt sich die schmalste Ansicht des Mailings: Abbildung 11: Die Smartphone-Ansicht: Ist der Bildschirm maximal 479 Pixel breit, dann wird das Mailing auf 320 Pixel Breite eingestellt, mit einspaltigem Layout und verkleinerten, veränderten beziehungsweise entfernten Bildern. 15

16 Mehrspaltiges Layout in einspaltiges Layout ändern Wie wandelt man ein mehrspaltiges Layout in einspaltiges Layout um? Unser Beispiel-Newsletter kennt die Lösung und setzt sie in zwei Fällen ein, nämlich genau dann, wenn die Fensterbreite zwischen 480 und 619 Pixel liegt oder maximal 479 Pixel beträgt. Zur besseren Lesbarkeit und zum Vermeiden von Scrollen seitens des Users empfiehlt es sich, das ursprünglich zweispaltige Layout in ein einspaltiges umzuwandeln. Es gibt zwei Möglichkeiten, das umzusetzen: Einmal mit DIV-Containern und wie im Beispiel-Mailing über Tabellen. Schauen wir uns die beiden entscheidenden CSS3-Passagen an: Media Query für Endgeräte mit einer Fensterbreite zwischen 480 und 619 Pixel: Media Query für Endgeräte mit einer Fensterbreite von maximal 479 Pixel: Der Befehl zum Umwandeln des zweispaltigen Layouts in ein einspaltiges Layout findet sich in der vorletzten Zeile und lautet #switch_tbl td { display:block; position: relative; }. Bei switch_tbl handelt es sich um eine selbst vergebene ID für die Tabelle, die unterhalb des Begrüßungstextes beginnt ( Sehr geehrte Damen und Herren ). Zum Verständnis: Die ersten drei Elemente des Beispiel-Newsletters, also das AGNITAS-Logo, das Whitepaper-Bild und der Begrüßungstext, sind jeweils als Tabelle definiert, haben allerdings nur eine Zelle. Etwas anders verhält es sich mit dem Mailing-Inhalt, der darunter folgt: Hier gibt es eine linke und eine rechte Spalte, die mittels <td> ebenfalls als Zellen definiert sind und in der Standardkonfiguration nebeneinander stehen. Der Befehl #switch_tbl td { display:block; position: relative; } macht nun nichts anderes, als hinter der ersten Zelle (also der linken Spalte) einen Zeilenumbruch zu setzen, sodass die zweite Zelle (die rechte Spalte) im Folgenden unterhalb der ersten erscheint. Welche große Wirkung dieser Befehl hat, zeigt der Layout-Vergleich: 16

17 Abbildung 12: Links die Standardansicht mit 620 Pixel Breite und zwei Spalten (linke Hauptspalte und die rechte Spalte mit den Schulungsangeboten), rechts die einspaltige Ansicht für Fensterbreiten bis maximal 619 Pixel Mobile Bilder laden, Bildgröße anpassen Anhand der Abfrage der Fensterbreite erkennt unser Beispiel-Mailing zwar nicht den exakten Typ des Endgerätes, kann es aber einer Kategorie zuteilen, die mit großer Wahrscheinlichkeit passen dürfte. Doch wie passen sich die Bilder des Mailings an Tablets oder Smartphones an, wenn sie für diese Klasse von Geräten eine zu hohe Auflösung besitzen? Dazu gibt es mehrere Möglichkeiten: 1. Mobile Version der Bilder verwenden (siehe Punkt 4.2.1) Sie hinterlegen eine eigene Version des Bildes für mobile Endgeräte. 2. Bildgröße per CSS anpassen: Hier gibt es wiederum zwei Möglichkeiten. Beide sind in erster Linie interessant für Desktop-Rechner beziehungsweise Browser-Fenster, deren Größe sich beliebig anpassen lässt. Das ist auf Smartphones und Tablets üblicherweise nicht der Fall hier wird das -Programm oder der Browser in voller Bildschirmgröße dargestellt. Der Vollständigkeit halber werden sie hier aber kurz erwähnt. Im Beispiel-Mailing haben wir die mobile Version des Banner-Bildes verwendet ( Jetzt Whitepaper sichern! ). a. Automatisch mitzoomende Bilder: Für Bilder, die stets die gleiche Breite wie das Fenster haben sollen, setzt man im Quellcode des Mailings eine Breite von 100 Prozent ( style= width:100%; ). b. Bildgröße im Verhältnis zur Originalgröße: Diese Methode verwendet keine mobile Version der Bilder. Stattdessen gibt es immer nur eine Version des Bildes, die dafür aber je nach ermittelter Fensterbreite verkleinert wird. Ein Beispiel ist nachfolgend zu sehen: Liegt die Fensterbreite zwischen 480 und 619 Pixel, wird das im Mailing abgebildete AGNITAS-Logo auf 90 Prozent der Originalgröße verkleinert. 17

18 Optimierte Links Zu klein abgebildete Weblinks sind besonders auf Smartphones und Tablets ein Ärgernis. Sie mit dem Finger zu treffen wird besonders dann zu einem Glücksspiel und geht allzu oft daneben, wenn der Link der Begierde zwischen anderen Links sitzt, die genauso klein dargestellt sind. Eine wenig benutzerfreundliche Alternative wäre es, die Darstellung beispielsweise durch Gesten-Steuerung oder Programmeinstellungen soweit zu vergrößern, dass sich der Weblink bequem anklicken lässt. Über Media Queries geht das allerdings bedeutend bequemer für beide Seiten: Der Versender muss lediglich den passenden CSS-Code im Mailing hinterlegen, welcher dann in Abhängigkeit vom ermittelten Endgerät den oder die Weblinks so umwandelt, dass sie sich einfach klicken lassen. Das Beispiel-Mailing zeigt, wie es funktioniert: Nachdem die Fensterbreite ermittelt wurde, präsentiert sich das Mailing ausgehend davon in einem von drei Layouts (Standardansicht, Tablet-Ansicht, Smartphone-Ansicht). In der Ansicht für Tablets (Fensterbreite zwischen 480 und 619 Pixel) und Smartphones (Fensterbreite maximal 479 Pixel) wird mit dem Layout auch die Darstellung des Weblinks geändert. Aus einem gewöhnlichen Link, der in blauer Farbe dargestellt und unterstrichen ist, wird ein Button, den man deutlich einfacher treffen kann. Der dazugehörige CSS-Quellcode sieht so aus: 18

19 Und das Resultat sieht so aus: Abbildung 13: Mobiloptimierter Link: Die Darstellung des Weblinks in der Standardansicht, der Ansicht für Tablets und der Ansicht für Smartphones (von oben nach unten). Hinweis: Eine 100-Prozentige Lösung für alle Browser und Clients können die Media Queries zwar nicht liefern. Allerdings bringen sie das nötige Rüstzeug mit, um sicherzustellen, dass Mailings auf der großen Mehrheit der mobilen Endgeräte einwandfrei dargestellt werden. 19

20 4.2 Weitere Optimierungsmöglichkeiten mit dem AGNITAS E-Marketing Manager Neben den gängigen Media Queries bietet der AGNITAS E-Marketing Manager (EMM) noch weitere Möglichkeiten, um Mailings auf verschiedenen Endgeräten optimal darzustellen. Diese möchten wir Ihnen in den folgenden Punkten näher vorstellen Mobile Versionen der Bilder Anders als beim HTML-Konstrukt werden die Bilder nicht mitgeschickt, sondern nachgeladen. Daher ist es beim Abruf der Bilder im EMM möglich, das anfragende Endgerät zu klassifizieren und entsprechendes Bildmaterial auszuliefern. Anhand der Gerätekennung sieht der EMM, dass es sich beim Endgerät um ein Tablet oder Smartphone handelt und beliefert es mit der mobilen Version der im Mailing verwendeten Bilder. Mobil bedeutet hier: Sie können eine zweite Variante des Originalbildes hinterlegen, das weniger Inhalte zeigt und somit gut erkennbar bleibt auch wenn es kleiner gezoomt wird oder ein Bild, das kleinere Abmessungen hat. Die mobilen Versionen der Bilder lassen sich im EMM über das Register Grafik-Komponenten hochladen, indem man beim entsprechenden Bildeintrag auf Mobile Komponente hinzufügen klickt. Abbildung 14: Mobile Bilder sind die mobilen Alternativen der Mailing-Bilder und speziell für die Darstellung auf Endgeräten wie Tablets und Smartphones konzipiert. 20