9Tipps. zur Optimierung von s für mobile Endgeräte

Transkript

1 9Tipps zur Optimierung von s für mobile Endgeräte

2 -Marketing wird jeden Tag für den mobilen Gebrauch wichtiger. Studien weisen auf, dass 10% bis 30% aller geöffneten s auf mobilen Geräten geöffnet werden (Quelle: monday). Eine weitere Studie besagt, dass das Wachstum im mobilen Segment stetig ansteigt. Eine Studie von Ericsson zeigt, dass sich der mobile Datenverkehr bis 2016 verzwölffachen wird (siehe Grafik). Immer mehr Empfänger lesen Ihre s auf ihren Smartphones oder Tablets. Darum reicht es nicht mehr aus, eine einfache HTML- zu entwerfen und zu versenden. Man muss recherchieren, wie aktiv eine Zielgruppe mobile Endgeräte nutzt, um dann die s darauf anzupassen. In diesem Whitepaper geben wir Ihnen verschiedene Tipps, die Ihnen bei der Optimierung Ihrer s für den mobilen Gebrauch helfen. Die Tipps zeigen Aspekte von der technischen bis zur inhaltlichen Anpassung und formen somit eine wichtige Ausgangsposition, wenn Sie mit dem mobilen -Marketing durchstarten wollen. Wir wünschen Ihnen viel Spaß beim Lesen. Einleitung Ihr Copernica Team

3 1. Kennen Sie Ihre Zielgruppe 2. Halten Sie den Content kurz und knackig 3. Beachten Sie die Displaygröße 4. Dateigröße: Size does matter 5. Vergessen Sie das Alt-Attribut nicht 6. CSS-Optimierung für Mobile (für Template Designer) 7. Passen Sie die Quelltexte an das Design an (für Template Designer) Inhalt 8. Optimieren Sie den Content im Hintergrund 9. Testen, testen, testen

4 1 Kennen Sie Ihre Zielgruppe Bevor Sie mit dem Redesign Ihrer ings für mobile Clients beginnen, wäre es gut zu wissen, ob eine Veränderung notwendig ist. Liest Ihre Zielgruppe überhaupt Ihre Nachrichten auf dem Handy? Deshalb sollten Sie dies unter Ihren Lesern vorab prüfen. Das können Sie mit der Hilfe von Google Analytics, oder auch z.b. mit Ihrer Marketing-Software tun. Auf diese Weise erfahren Sie welche Endgeräte unter Ihren Abonnenten am häufigsten verwendet werden (und natürlich auch welches System). Nutzen Sie auch ein Preference Center. Dies ist eine spezielle Sektion, wo Ihre Leser angeben, welchen Content Sie wünschen und wie oft sie Ihre s empfangen möchten. Ermitteln Sie unter Ihren Abonnenten, ob Interesse an mobilen s besteht. So erkennen Sie, wie viel Priorität das Optimieren Ihrer s für mobile Endgeräte überhaupt hat. Copernica Marketing Software erkennt: Android AppleWebKit BlackBerry DSi IEMobile ios Motorola Internet Browser Nokia Openwave Mobile Browser Opera Mobile PlayStation Portable 4

5 2 Halten Sie den Content kurz und knackig Im -Marketing sind relevante Inhalte notwendig. Dies beginnt bereits in der Betreffzeile. Diese muss den Abonnenten dazu animieren, die zu öffnen und zu lesen. Bei mobilen Clients ist die Herausforderung noch größer. Diese bieten nur Platz für 5-7 Wörter in der Betreffzeile (beim iphone nur 4-6). Das entspricht ca. 40 Zeichen inklusive Leerzeichen. Falls Ihnen das zu wenig ist, können Sie zusätzlich noch etwas tun. Setzen Sie den Preheader (die Stelle über dem Header in der ) kreativ ein. Dieser Teil wird auf mobilen Geräten meistens neben oder unter der Betreffzeile angezeigt. Häufig steht dort Falls der Newsletter nicht korrekt angezeigt, klicken Sie hier... oder ein Teil der Nachricht selber. Sie können diesen Platz dennoch verwenden, um Ihre Abonnenten zu überzeugen diese zu öffnen. Wenn Sie diesen Platz nutzen, fällt Ihre in der Inbox am besten auf. Sie haben Ihren Leser überzeugt und Ihre wurde geöffnet. Halten Sie die unbedingt kurz und bündig, damit der User nicht endlos scrollen muss. Wenn Sie vorab bestimmen, was Sie genau mit der erreichen möchten, können Sie sich auf relevante Inhalte und einen deutlichen Call-to-Action (CTA) konzentrieren wie zum Beispiel bei ereignisgesteuerten Kampagnen. Diese verschicken Sie aus einem bestimmten Grund. Sorgen Sie dafür, dass der Inhalt hierauf abgestimmt ist. Ein Leser erwartet in einem Geburtstagsmailing nämlich keine Produktbeschreibung oder Unternehmensneuigkeiten. 5

6 3 Beachten Sie die Displaygröße Ihre Abonnenten benutzen keine Maus, wenn sie Ihre s auf dem Smartphone oder Tablet öffnen und durchlesen. Die Navigation erfolgt mit dem Finger. Neben der Breite sollten Sie das Layout für Hyperlinks und CTA berücksichtigen. Bekannte Hindernisse beim mobilen Lesen sind das Öffnen von Hyperlinks und CTA, da diese einfach zu klein auf dem Bildschirm sind oder nicht deutlich dargestellt werden. Diese Probleme lösen Sie durch den effektiven Einsatz einfacher Designs: Ein Finger deckt ungefähr 44 Pixel auf dem mobilen Display ab. Durch das Hinzufügen eines Paddings an die CTA von ungefähr 10 bis 15 Pixeln, machen Sie die CTA besser klickbar und Sie reduzieren die Frustration beim Leser. Eine weitere Optimierungsmöglichkeit besteht darin einem Hyperlink das Attribut display:block; hinzuzufügen. Dazu können Sie noch zusätzliche Maße angeben, wie z.b. width, height und padding, um das klickbare Feld so groß zu gestalten, wie Sie es möchten. Beispiel: <a style= display: block; height: 10px; padding: 5px; >hyperlink</a> Sie können dem Hyperlink auch eine größere Schriftart geben. Die wichtigste Information wird deutlicher und der Newsletter kann viel besser betrachtet werden. Mach es klickbar, ca. 44 x 44 px breit 6

7 4 Dateigröße: Size does matter Eine mobile Internetverbindung ist etwas langsamer als die Verbindung in Ihrem Büro! Daher macht es bei mobilen Endgeräten keinen Sinn, größere PDFs mitzuschicken oder verschiedene Bilder mit einer Durchschnittsgröße von 300KB im Newsletter anzuzeigen. Bei solch einer Datenmenge ist die Ladezeit zu lang. Je mehr die Größe der HTML-Newsletter eingegrenzt werden kann, desto einfacher für den User. Bei den neuen Code- s wird von Anhängen bei kommerziellen s abgeraten. s mit Anhängen werden oft von Spamfiltern und anderer Antivirus Software zurückgewiesen. Falls es doch notwendig ist einen Anhang mitzuschicken, sollte dieser eine Größe von 150 KB nicht überschreiten. (Quelle: DDMA). 5 Vergessen Sie das Alt-Attribut nicht Vorher haben wir bereits die Nutzung von Bildern erklärt. Es wird oft angegeben, nicht zu viele Bilder zu verwenden. Ferner sollten die Bilder komprimiert werden, um die Dateigröße der klein zu halten. Es sollte auch nicht zu lange dauern bis die Bilder gedownloadet sind. Das einzige Betriebssystem für mobile Endgeräte, welches standardmäßig Bilder sofort beim Öffnen der downloadet, ist ios. Systeme wie BlackBerry, Android oder Windows Phone 7 benötigen, so wie alle anderen Desktop-Clients, eine Genehmigung. Fügen Sie bei jedem Bild ein Alt-Attribut ein. Auf diese Weise kann der Empfänger zumindest vorab lesen, was auf dem Bild zu sehen sein soll. Es hat auch einen höheren Informationsgehalt als Abbildung565_klein.jpg. 7

8 6 CSS-Optimierung für Mobile (für Template-Designer) -webkit-text-size-adjust: none;- Die meisten Browser für mobile Endgeräte passen den Text beim Lesen auf Mobiltelefonen an. Dies können Sie beeinflussen, in dem Sie CSS (Cascading Style Sheets) verwenden. Mit dem unten stehenden Code im <head>-tag des Newsletters, werden die Browser die Textgröße nicht anpassen. <style type= text/css > body {-webkit-text-size-adjust:none;} div, p, a, li, td {-webkit-text-size adjust:none;} </style> Dieser Code bewirkt, dass sich die Textgröße nicht verändert (z. B. bei der Wiedergabe eines Newsletters auf einem mobilen Bildschirm). Wenn Sie CSS bei einem HTML-Newsletter verwenden, nutzen Sie dann bitte inline-css! Viele -Programme verweigern nämlich ausgelagerte CSS-Dokumente. Wenn Sie eine gute Marketing-Software verwenden, verfügen Sie über Funktionen, die automatisch die bestehenden Style-Definitionen in inline-attribute umwandelt. So wird das CSS-Dokument aus dem <head>-tag des Newsletters nicht zurückgewiesen. Es wird abgefragt, ob die Verwendung dieses Codes Auswirkungen auf die Desktop-Ansicht Ihrer s hat. s und Webseiten, die den obigen Code und Media Queries (siehe nächste Seite) verwenden, werden nicht verzerrt, wenn sie auf einem Computer-Bildschirm geöffnet werden. webkit-text-size-adjust:none; verhindert unerwünschte Style-Veränderungen 8

9 Einige Vorteile dieser Media Queries sind, dass eine für jedes Bildschirmformat angepasst wird und Sie somit die Möglichkeit haben zusätzlichen Code hinzuzufügen. Z.B. können Sie weiteren CSS-Code an die Media Query anhängen, sodass die CTA bespsielsweise jedes Mal im oberen Teil der angezeigt wird, wenn ein kleines Display verwendet wird. CSS-Optimierung für Mobile (für Template-Designer) query- Bei dessen Einbindung per Link-Element, dient das media-attribut dazu anzugeben für welche Ausgabemedien die referenzierte Datei bestimmt ist. only screen and (max-device-width: 480px) { } Hier steht eigentlich Gebrauchen Sie diesen Style nur, wenn das Display eine Breite von 480px oder weniger hat (die Breite eines gedrehten iphones). Sie sollten diese wichtige (!) Regel nicht vergessen, sodass Body und die Textgröße Vorrang gegenüber den inline Style-Elementen haben. So bleibt das Layout Ihrer erhalten, wenn diese auf einem kleinen Bildschirm erscheint. Der only screen and (max-device-width: 480px) {.page {padding: 0px 10px 5px 10px!important;} body {padding: 10px!important;} #airmail-line {margin: 0-10px!important;}.header {font-size: 16px!important;}.headline {font-size: 20px!important;} #screenshot {width: 275px; height: 190px;} } So wird es dann aussehen: 9

10 7 Passen Sie die Quelltexte an das Design an Es ist selbstredend, dass mobile Geräte s anders anzeigen als Desktopscreens. Deshalb wird auch der ursprüngliche Quelltext in Verbindung mit dem Style optimiert. Bezüglich des Designs sollten Sie noch folgende Punkte berücksichtigen: Breite Die meisten Smartphones haben eine Displaybreite von ungefähr 320 bis 480 Pixeln. Wenn Sie eine mit einer Breite von 640 Pixeln erstellen, kann der Leser diese einfacher lesen, da die dann zwischen 25% bis 50% rausgezoomt wird. Möchten Sie sicher gehen, dass Ihre mobilen Leser Ihre s sofort lesen können ohne zu zoomen? Dann sollten Sie die Breite bis zu einem Maximum von 480 bis 520 Pixeln eingrenzen. Spalten Indem Sie das Design auf eine Spalte begrenzen, muss der Empfänger weniger scrollen. Dies sorgt für bessere Interaktion und schnellere Click-Throughs. Halten Sie es einfach In Bezug auf mobile Endgeräte gilt die Regel weniger ist mehr. Verwenden Sie möglichst wenig Character im Preheader, sorgen Sie dafür, dass die Navigation so einfach wie möglich ist. Halten Sie es mit den Buttons für das Social Sharing und anderen CTA so einfach wie möglich. Bilder Passen Sie beim Hinzufügen von Bildern auf. Zu viele Bilder vergrößern die Dateigröße immens und sie steigern das Spam-Rating. Beides ist nicht gut für die Übermittlung einer . Verwenden Sie nur so viele Bilder wie nötig. Überprüfen Sie ebenfalls, ob Ihre gut dargestellt wird, wenn die Bilder noch nicht sofort gedownloadet werden. 10

11 Passen Sie die Quelltexte an das Design an Hyperlinks Nutzen Sie mehrere Hyperlinks in einer ? Sorgen Sie dann dafür, dass diese weit genug auseinander stehen (z.b. in einer Inhaltsangabe). Auf diese Weise umgehen Sie die Frustration beim Leser, falls er auf den falschen Hyperlink klickt, da diese zu nah aneinander stehen. Beachten Sie hierbei auch den Textfluss beim Drehen der Anzeige. Unterschiedliche Versionen Es kann immer vorkommen, dass das angewandte HTML-Design nicht in allen -Programmen gut dargestellt wird. Deshalb sollte man immer eine reine Textversion mitsenden. Dadurch richten Sie Ihre auch an Leser mit einem Endgerät, welches HTML nicht unterstützt. Sie können aber auch eine komplette mobile Onlineversion Ihrer erstellen. Dies erfordert jedoch Zeit und Geld. Beide Versionen benötigen zudem zusätzliche Klicks durch den Leser, was zu einem niedrigeren Response führt. Deshalb ist die bessere Lösung, die bestmöglich für mobile Endgeräte zu optimieren. 11

12 8 Optimieren Sie den Content im Hintergrund Sind Ihre HTML-Newsletter Mobile-freundlich designt? Dann sorgen Sie ebenfalls dafür, dass es die Landingpage, worauf ein Hyperlink verweist und die CTA es auch sind. Es macht wenig Sinn, wenn der Newsletter gut aussieht, jedoch die weiterführenden Seiten nicht. Ihre Leser würden sich beim nächsten Mal weniger durchklicken. Sorgen Sie also dafür, dass die weiterführenden Seiten: Die korrekte Breite haben. Auf den Punkt kommen. Geben Sie weitere Informationen auf weiteren Seiten preis. Mobile Leser, die mehr wissen wollen, werden Ihre Webseite auch besuchen, wenn sie wieder an ihrem PC sitzen. Nutzen Sie Flash für Ihre Produktvideos auf der Landingpage? Ersetzen Sie diese durch HTML5, CSS3 oder Javascript. iphone und BlackBerry unterstützen nämlich kein Flash für Videos. Android macht das zwar, aber die Ladezeiten sind sehr lang. Um möglichst benutzerfreundlich zu sein, sollten Sie Flash am besten ganz vermeiden. Links auf mobilen Touchscreens haben kein hover state. Das bedeutet, dass man nicht über einen Link oder eine Abbildung mit der Maus gehen kann, um zu sehen, ob es tatsächlich ein Link ist. Wenn Sie den Bildschirm berühren, klicken Sie sofort. Sorgen Sie also dafür, dass für den Leser deutlich erkennbar ist, was Link und CTA ist. Tipp: Media Queries können auch bei Webseiten angewandt werden. Also können Sie diesen Code bei den Landingpages verwenden, um diese für mobile Endgeräte zu optimieren. 12

13 9 Testen, testen, testen! Die Tipps die Sie hier bekommen haben, sind gute Anfangsüberlegungen, um im -Marketing den mobilen Bereich besser anzugehen. Es bedeutet nicht, dass Sie diese Punkte einfach nur durchzuführen brauchen und Ihre s sofort versenden können. Testen Sie erst die Veränderungen und schauen Sie, ob alles reibungslos funktioniert. Sind die Hyperlinks in Ordnung? Wird das Style Sheet gut angewandt? Werden die Landingpages korrekt dargestellt? Sobald Sie sich sicher sind, dass alles in Ordnung ist und sowohl Ihre mobilen Leser als auch die anderen den Newsletter gut empfangen, sind Sie bereit zum Versenden Ihrer Kampagne. Sie können Ihre s auf folgende Weise testen: Senden Sie s an Ihre eigene -Adresse und betrachten Sie diese auf dem eigenen Smartphone. Hierbei legen Sie sich jedoch nur auf ein Gerät fest. Führen Sie einen Split-Run-Test mit Hilfe einer Marketing-Software wie z.b. Copernica durch. Führen Sie einen Wiedergabecheck mit Hilfe von Litmus durch. Mit diesem Tool können Sie die Wiedergabe auf den folgenden Geräten sehen: iphone und ipad BlackBerry Windows Mobile 7 Symbian Android 13

14 Whitepaper Nr. 10 Über Copernica Copernica ist die professionelle Marketing-Software für den einfachen und schnellen Versand automatisierter ings, mit individuellen Inhalten in professionellem Layout. Darüber hinaus bietet Copernica vielfältige Möglichkeiten, um -Kampagnen mit SMS, Webseiten und Social-Media sowie personalisierten Drucksachen wie z.b. Serienbriefe zu kombinieren. Zudem verfügt die webbasierte Anwendung über ausführliche Kampagnenanalysen für ein exaktes Targeting. Copernica ist ein europäisches Unternehmen, das großen Wert auf Datenschutz legt. Bereits über 3500 Unternehmen vertrauen auf die Copernica Technologie. Copernica ist Unterzeichner des DDV Ehrenkodex -marketing und zudem Mitglied der Certified Senders Alliance im eco e.v., DDV e.v. und von Return- Path. Außerdem betreibt Copernica ausschließlich DIN ISO zertifizierte Server. Warum Copernica? Eine Plattform für Multi-Channel-Kampagnen Vollständig webbasiert Intuitive Benutzeroberfläche Ausführliche Kampagnen-Analyse Unkomplizierte Erstellung und einfacher Versand von ings Modernste Zielgruppenfilter Umfangreiche Personalisierungsoptionen Integration dynamischer Inhalte Hohe Zustellbarkeitsrate und Spamkontrolle Einfache Anbindung an Fremdsysteme (SOAP) Bereits bei über Unternehmen weltweit im Einsatz Weitere Fragen? Haben Sie Fragen oder wünschen Sie weitere Informationen? Dann kontaktieren Sie uns! Wir helfen Ihnen bei der Auswahl der idealen Marketing-Software für Ihre Multi-Channel-Kampagnen. Copernica Deutschland GmbH Kaiserswerther Str Düsseldorf Tel: + 49 (0) Fax: + 49 (0) info@copernica.de Internet: Whitepaper Nr. 10