bento icon close
Zusammenfassung
Livre blanc responsive

Kostenlose digitale Version

Responsive E-Mails

Optimieren Sie Ihre Kampagne für die mobile Ansicht

Konsumenten und Ihre Smartphones

Handys wurden erstmals 1992 von IBM auf den Markt gebracht, fanden aber erst durch Apple ab 2007 weite Verbreitung.

2.3

Milliarden

Die Anzahl an Smartphone-Nutzern ist von 1,57 Milliarden 2014 auf 2,32 Milliarden im Jahr 2017 gestiegen. (1)

Mobiltelefone sind ein essentielles Kommunikationsmedium geworden. Eine Revolution, die von Anfang an viele Menschen begeistert hat und die Art des Kommunizierens und sozialen Austauschs grundlegend verändert hat. Smartphones dienen mittlerweile als Personal Assistent für mehr als die Hälfte aller Mobiltelefonnutzer.

Dabei machen die 18- bis 34-Jährigen mit 62% den Großteil der Nutzer aus(2).

Und 3 von 4 Smartphone-Nutzer surfen damit täglich im Internet(3).

(1) Statista: Number of smartphone users worldwide from 2014 to 2020 (in billions), 2017 (2) Go-Gulf-Statistiken über die weltweite Smartphone-Nutzung, 2012 (3) Barometer zum mobilen Marketing des Mobile Marketing Vereins, Juni 2014

Es wird geschätzt, dass 2018 36% der Weltbevölkerung über ein Smartphone verfügen(1). Dank Wifi, 3G und 4G Verbindung kann mit einem Smartphone von fast überall auf das Internet zugegriffen werden.

Ein durchschnittlicher Smartphone-Nutzer schaut 221 mal am Tag auf sein Gerät (2).

221x

pro tag angeschaut

Eine Studie zur Nutzung von Smartphones, durchgeführt 2014 von Tecmark Großbritannien, fand heraus, dass Smartphones das meistgenutzte Gadget im Alltag sind.

Bei der Studie mit 2000 Smartphone-Nutzern schauten die Teilnehmer durchschnittlich 140 Mal am Tag auf Ihren Computer und ganze 221 Mal auf das Smartphone.

Meiste Nutzung:

illustration
  • Wettervorhersage anschauen
  • E-Mails lesen
  • Soziale Medien durchsuchen
  • Kalender prüfen
  • To-Do-Listen schreiben
  • ...
  • Dank der vielen Apps und Nutzungsmöglichkeiten von Smartphones wurde es zum hilfreichen und nützlichen Begleiter im Alltag.

    (1) Statista: Number of smartphone users worldwide from 2014 to 2020 (in billions), 2017 (2) Quelle : http://www.tecmark.co.uk/smartphone-usage-data-uk-2014/

    Der Smartphone-Markt

    Smartphones verkaufen sich besser als alle anderen Mobiltelefon-Typen: 49,5% bevorzugen sie gegenüber anderen Telefon-Alternativen(1). Die Anzahl verkaufter Smartphones steigt darum jedes Jahr: Während 2012 680 Millionen solcher Geräte weltweit verkauft wurden, waren es 2018 bereits 1,5 Milliarden(2).

    ANZAHL WELTWEIT VERKAUFTER SMARTPHONES(2)

    illustration
    infos

    (1) Emarketer: «2 Milliarden Menschen haben bis 2018 mindestens ein Smartphone gekauft» (2014) (2) Statista: Anzahl weltweit verkaufter Smartphones von 2007 bis 2018

    Die Zahl der Smartphone-Nutzer steigt jedes Jahr. Es wird geschätzt, dass 2018 2,16 Millionen Menschen ein Smartphone verwendeten, verglichen mit 1,31 Millionen in 2013(1).

    DIE BETRIEBSSYSTEME

    Lange Zeit der Konkurrenz voraus, verliert Apple nun seit einigen Jahren an Marktanteilen. Mittlerweile ist Android das meistgenutzte Betriebssystem für Mobiltelefone. Der Markt ist jedoch sehr schnelllebig und wechselt je nach Erfolg neuer Produkte ständig.

    Mit einem Marktanteil von 64,76% ist Android das meistgenutzte Betriebssystem, gefolgt von Apple mit 32,93% Marktanteil(1).

    Marktanteile mobiler Betriebssysteme(1)

    os

    1) Netmarketshare «Mobile/Tablet Operating System Market Share» (2017)

    DIE 10 MEISTVERKAUFTEN SMARTPHONES WELTWEIT

    Das iPhone 6 springt schon kurz nach seiner Vorstellung im September 2014 auf Platz eins der weltweiten Smartphone Verkäufe.

  • Apple - iPhone 6S
  • Apple – iPhone 7
  • Apple – iPhone 7+
  • Apple – iPhone 6S+
  • Samsung – Galaxy S7 edge
  • Samsung – Galaxy J3
  • Oppo – A53
  • Samsung – Galaxy J5
  • Samsung – Galaxy S7
  • Samsung – Galaxy J7
  • Gadgetsnow, World’s 10 highest-selling smartphones revealed (2017) http://www.gadgetsnow.com/slideshows/10-highest-selling-smartphones-revealed/photolist/57859671.cms

    E-Mails auf mobilen Geräten lesen

    88%

    welweit

    Weltweit nutzen 88% der Mobiltelefon-Besitzer ihr Gerät täglich um E-Mails zu lesen(1).

    Es werden immer mehr E-Mails auf mobilen Geräten gelesen. Waren es 2012 noch 17% aller E-Mails, die auf Smartphones gelesen wurden, stieg der Anteil 2013 auf 31% und 2014 auf 37%. Das bedeutet ein Wachstum um 117%(1). Anfang 2017 publizierte Litmus Statistiken, dass nun gar 54% aller E-Mails auf einem mobilen Endgerät gelesen werden (2).

    graph

    (1) Studie veröffentlicht von Return Path (2) Litmus ”State of Email” (März 2017)

    Gerätetypen, die zum Checken von E-Mails genutzt werden(1):

    os

    (1) BlueHornet «E-Mail-Marketing aus Konsumentensicht 2015»

    DIE 3 WEGE UM E-MAILS AUF DEM SMARTPHONE ZU LESEN

    Es gibt viele verschiedene Programme, um E-Mails auf dem Smartphone lesen zu können.

    1. Die Standard-Apps

    Die Mehrheit der Personen nutzt die automatisch installierten Apps, um Ihre E-Mails zu verwalten. Bei Apple heißt diese zum Beispiel Mail und bei Android Email.

    emails

    Diese Programme sind vorinstalliert und müssen lediglich mit dem E-Mail- Postfach verbunden werden. Zudem gibt es hier die Möglichkeit, mehrere E-Mail-Konten in einem einzigen Programm zu vereinen.

    smartphones

    2. Die Apps der Mailsysteme

    Heutzutage besitzt jeder E-Mail-Anbieter auch eine eigene Applikation. Auch wenn die Funktionsweise die gleiche ist wie bei den vorinstallierten Programmen, können Bedienung und Anzeige des Inhalts abweichen.

    Der Nutzer muss hier lediglich die entsprechende App auf seinem Smartphone installieren.

    Jede App, genauso wie jedes Mailsystem, nutzt eigene Wege um HTML Codes zu lesen und den Inhalt darzustellen.

    smartphones

    3. Die Internetbrowser

    Es ist auch möglich, über die Internetbrowser auf dem Smartphone auf das E-Mail-Postfach zuzugreifen. Standardmäßig installierte Browser sind bei Apple zum Beispiel Safari und bei Android Internet Explorer.

    navigateur

    Vom Internetbrowser aus kann der Nutzer dann das eigene E-Mail-Postfach öffnen.

    smartphones

    TECHNISCHE ZUSAMMENHÄNGE, DIE SIE KENNEN MÜSSEN

    illu-techniques

    Die Bedienung von Touchscreens ist sehr intuitiv, aber nicht immer einfach, besonders bei Inhalten, die nicht auf Touchscreens angepasst sind. Da unsere Finger nicht so präzise sind wie eine Maus, müssen die Inhalte Ihrer Webseite und E-Mails entsprechend angepasst werden:

    1

    Klickbare Elemente müssen sofort erkennbar sein: Anders als bei der Maus, die mit dem Anzeigen einer Hand signalisiert, welche Elemente geklickt werden können, gibt es diese Vorschau auf Touchscreens nicht. Stellen Sie darum sicher, dass Ihre Links unterstrichen und Ihre Aktionsfelder eindeutig sichtbar (bunt, rechteckig oder rund, ...) sind. Wir empfehlen eine Mindestgröße von 44 x 44 Pixel für einen gut klickbaren Button.

    2

    Lassen Sie Platz zwischen Ihren klickbaren Elementen. Liegen diese zu nahe nebeneinander, passiert es leicht, dass Leser versehentlich auf den falschen Link kommen, was schnell als nervig wahrgenommen wird.

    3

    Durch die reduzierte Größe des Bildschirms müssen Smartphone- Nutzer deutlich mehr Scrollen als bei der Ansicht auf dem Desktop. Um dies zu minimieren, empfiehlt es sich, den Inhalt bei der mobilen Version zu reduzieren.

    Der Pre-Header ist der erste Textteil einer E-Mail. Meist besteht er aus dem Link zur Web-Kopie und einem Satz wie «Wenn diese Nachricht nicht richtig angezeigt wird, klicken Sie hier». Bei iPhones und iPads erscheint der Pre-Header bereits im Posteingang unter dem eigentlichen Betreff. Diese zusätzliche Möglichkeit, um den Empfänger zum Öffnen der E-Mail zu animieren, sollte darum unbedingt genutzt werden.

    smartphone

    Um sicherzugehen, dass Ihre Nachricht nach dem Öffnen auf dem Smartphone korrekt angezeigt wird, ist es sinnvoll, Verdana oder Arial als Schriftart zu verwenden. Diese sind besonders anerkannt und lassen sich auch auf kleinen Bildschirmen gut lesen. Zudem ist es hilfreich, stärkere Farbkontraste zu wählen, da diese auf kleinen Bildschirmen leichter sichtbar sind, während geringe Kontraste leicht untergehen. Schockieren Sie Ihre Leser aber auch nicht mit zu grellen Farben, dies kann Ihre Nachricht besonders früh morgens als unangenehm erscheinen lassen.

    Warum es wichtig ist, Ihre E-Mails reponsiv zu gestalten

    Abhängig von Art und Merkmalen einer E-Mail-Applikation wird eine klassische Kampagne (nicht responsiv) auf zwei unterschiedliche Weisen angezeigt:

    responsive
  • In verkleinertem Format
  • Die Breite der Nachricht wird hierbei an den kleineren Bildschirm angepasst und der Inhalt der E-Mail entsprechend kleiner angezeigt. So bleibt der originale Aufbau des Newsletters bestehen, die Lesbarkeit verschlechtert sich jedoch. Dies führt auch dazu, dass Links kleiner werden und leicht aus Versehen auf einen ungewünschten Link geklickt wird und Leser den Newsletter frustriert verlassen. Andernfalls muss hereingezoomt werden, um den Newsletter lesen zu können.

  • In vergrößertem Format
  • Hier passt sich die Breite der Nachricht nicht an, alles wird in Originalgröße gezeigt. So ist zwar die Schrift weiterhin gut lesbar, jedoch können sich Abschnitte verschieben oder Texte abgeschnitten werden. Der ursprüngliche Aufbau der E-Mail ist nicht mehr gegeben.

    Sie müssen wegzoomen, um den ursprünglichen Aufbau zu verstehen und Informationen zu finden.

    Diese Einschränkungen der mobilen gegenüber der Desktop-Version beschränken sich nicht nur auf E-Mails, sondern sind ein allgemeines Problem. Auch Webseiten, die nicht für Smartphones optimiert sind, sind schwer zu lesen und zu bedienen. Diese nervigen Erfahrungen mit dem Öffnen von Menüs und Formularen haben wahrscheinlich alle schon gemacht.

    Um zu vermeiden, dass Ihre Leser zoomen müssen, sollten Sie dem < HEAD > Tag des HTML Codes ein Meta Viewport Attribut anfügen, um so den Bildschirm regeln zu können. Dadurch kann sich der Inhalt automatisch an die Bildschirmgröße anpassen.

    Beispiel:

    <meta name=”viewport” content=”width=device-width, initialscale=1”>

    width : Größe des Bildschirms in Pixel

    Der Sinn von einem responsiven Design ist es, die Anzeige einer Webseite oder E-Mail für so viele verschiedenen Geräte wie möglich anzupassen. Dies kann für jedes Gerät einzeln oder pro Größengruppe eingestellt werden.

    Wie können Sie Ihre Inhalte responsiv machen?

    Hierzu gibt es mehrere mögliche Methoden, die wir Ihnen in den folgenden Kapiteln vorstellen.

    Das fluide Design

    WAS IST DAS FLUIDE DESIGN?

    Das fluide Design ist ein Layout, dass sich auf große und kleine Bildschirme anpasst. Die Anzeige des Inhalts wir automatisch auf die Bildschirmgröße des Mediums angepasst. Besteht Ihre Nachricht nur aus einer Spalte, können Sie diese Methode wählen.

    email

    Damit sich die E-Mail richtig anpasst, sollten die Dimensionen jedes Elementes in Prozent angegeben werden.

    illu-pourcent

    Der zu nutzende Code:

    style = "width : 80%; max-width : 600px; height : auto;"

    width : Die Breite des Bildes in Prozent für kleine Bildschirme

    max-width : Die maximale Breite des Bildes für große Bildschirme und Computer

    height : Die automatische Höhe des Bildes, um die richtige Proportion zu behalten.

    Achtung: Die Eigenschaften der minimalen und maximalen Breite sind nicht kompatibel mit Outlook 2007, 2010 und 2013.

    Adaptive E-Mails mit Media Queries

    Um den Inhalt einer E-Mail auf verschiedene mobile Geräte anzupassen, können Media Queries verwendet werden. Mit dieser CSS3 Methode kann die Breite (width) eines Gerätes bestimmt werden und der Inhalt an die Breite angepasst werden.

    Die meistgenutzte Methode ist es, die Bildschirmgröße in CSS Pixeln zu bestimmen:

  • min-device-width : minimale Bildschirm-Breite in CSS Pixel
  • max-device-width : maximale Bildschirm-Breite in CSS Pixel
  • Zu nutzender Code:

    @media only screen and (max-device-width : 480px)

    In diesem Beispiel haben wir das Limit auf 480 Pixel gesetzt. Das heißt, dass E-Mails, die auf einem Gerät mit einer Bildschirmgröße unter 480px CCS geöffnet werden, automatisch daran angepasst werden.

    Media Queries erlauben mehrere Kombinationen: Hier zwei Möglichkeiten, die Sie im Kopf behalten sollten:

    Die Auswahl basiert auf der Ausrichtung des Geräts (Portrait im Hochformat oder Landschaft im Querformat)

    Beispiel :

    @media(max-device-width : 480px) and (orientation :portrait) {

    /* Breite kleiner als 480px und Mobilgerät in Portrait */

    }

    Auswahl basierend auf der Bildschirmauflösung oder Pixel

    Beispiel:

    @media (min-device-pixel-ratio: 1.5) {

    /* Bildschirm größer als 144dpi*/

    }

    illu-adapt

    DIE BREITE EINER RESPONSIVEN E-MAIL DEFINIEREN

    Hier ist eine Übersicht verschiedener Smartphones auf dem Markt (fettgedruckt die meistverkauftesten im September 2014):

    Die dritte Spalte beinhaltet die Breite des Smartphones in Pixel.

    tableau

    WELCHE APPS UND WELCHE MOBILTELEFONE SIND KOMPATIBEL?

    Media Queries wurden getestet auf:

    Standard-App auf

    Android 2.3

    Android 5

    BlackBerry 9930

    iPhone 5S avec iOS 7

    iPhone 5S avec iOS 8

    iPhone 6 avec iOS 8

    iPhone 6 Plus avec iOS 8

    Gmail App

    Android 5

    iOS 7

    iOS 8

    Yahoo App

    iOS8

    TouchDown App

    Android 5

    Safari

    Gmail

    Yahoo

    Outlook.com

    Komptabilität

    Komptabilität

    Komptabilität

    Komptabilität

    Komptabilität

    Je nach dem, welches Betriebssystem genutzt wird, können einige Regeln nicht berücksichtigt werden, was auch auf Media Queries zutreffen kann. Testen Sie Ihre Kampagne auf dem Smartphone, um sicherzustellen, dass alles richtig angezeigt wird.

    CODE FÜR RESPONSIVE E-MAILS

    Media Queries müssen wie folgt in den < HEAD > Teil der Nachricht integriert werden:

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf8">

    <style type="text/css">

    @media only screen and (max-device-width : 480px) {

    .contener{

     width: 80% !important;

    }

    .Titel-Rot {

     color: #F00 !important;

    }

    .img-mobile {

     width:80%! important;

    }

    .Spalte{

     width:80% !important;

     display:block !important;

    }

    .mobil-verstecken{

     display:none !important;

    }

    </style>

    </head>

    Gefolgt vom <BODY> der Nachricht, der den Inhalt enthält.

    Geben Sie in Media Queries an, welche Sonderfunktionen Ihre E-Mail enthalten soll:

  • Mit der CSS Klasse «Container» kann die Breite von Graphiken in Prozent fixiert werden. Wir haben hier 80% gewählt
  • Mit der CSS Klasse «Titel-Rot» kann die Farbe von Überschriften in der mobilen Version geändert werden
  • Die CSS Klasse «img-mobile» ermöglicht es, die Größe von Bildern je nach Bildschirmbreite anzupassen. Wir haben hier wieder 80% gewählt
  • Durch die CSS Klasse «Spalte» kann eine E-Mail mit zwei Spalten in nur einer Spalte abgebildet werden
  • Mit der CSS Klasse «mobil-ausblenden» können Elemente aus der klassischen Version in der mobilen Version ausgeblendet werden
  • Jede CSS Klasse muss in den < BODY > Teil des HTML Codes eingebaut werden, je nachdem, welche Elemente verändert werden sollen. Die Prioritäts-Regel !important muss in die Media Queries eingefügt werden, sodass prioritär diese Version und nicht die im < BODY > eingestellte Version angezeigt wird.

    Hier ein Beispiel:

    <body style="padding:0; margin:0">

    <table class="contener" align="center" width="600" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td style="padding:15px 0">

    <p class="Titel-Rot" style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:30px"><strong>Responsive design</strong></p>

    </td>

    </tr>

    <tr>

    <td style="padding-bottom:20px"><img class="img-mobile" src="image.jpg" width="600" height="150"></td>

    </tr>

    <tr>

    <td>

    <table class="contener" width="600" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td class="Spalte" style="line-height:20px">

    <p style="font-family:Arial, Helvetica, sans-serif;color:#000; font-size:16px"><strong>title</strong></p>

    <p style="font-family:Arial, Helvetica, sans-serif;color:#000; font-size:12px">

    Lorem Ipsum ist ein Beispieltext, der im Layout und Inhalt vor der Endversion genutzt wird.

    </td>

    <td width="15px" class="mobil-verstecken"> &nbsp; </td>

    <td class="Spalte" style="line-height:20px">

    <p style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:16px"><strong>title</strong></p>

    <p style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:12px">

    Lorem Ipsum ist ein Beispieltext, der im Layout und Inhalt vor der Endversion genutzt wird.

    </td>

    </tr>

    </table>

    </td>

    </tr>

    </table>

    </body>

    </html>

    BEISPIELE ADAPTIVER E-MAILS

    Newsletter der Mailify Software

    newsletter

    Newsletter erstellt durch die Mailify Agentur

    emailing

    Der EmailBuilder, ein responsiver Editor

    Mit Mailify wird das Erstellen von Newslettern zum Kinderspiel.

    Der revolutionäre Graphik-Editor von Mailify begleitet Sie Schritt für Schritt durch die Gestaltung Ihrer Nachricht. Sie können Bild- oder Text-Elemente per Drag & Drop auswählen und platzieren. So können Sie Inhalte schnell und ohne technische Kenntnisse erstellen.

    builder

    RESPONSIVE NEWSLETTER ERSTELLEN

    responsive

    Der Mailify EmailBuilder macht Ihre Inhalte automatisch kompatibel für Smartphones. Ohne den HTML Code verändern zu müssen, wird Ihr Newsletter für die mobile Ansicht optimiert. Diese mobile Ansicht können Sie zudem direkt beim Erstellen des Newsletters ansehen und bearbeiten.

    Sie können sowohl mit einer leeren Seite anfangen als auch bestehende Vorlagen bearbeiten:

    base

    Die fast 900 bestehenden Vorlagen können Sie kostenlos nutzen und beliebig anpassen:

    modèle

    Egal ob komplett neu kreiert oder nach Verwendung einer Vorlage, jeder Newsletter ist automatisch für mobile Geräte angepasst.

    adapté

    Kurz gesagt, Sie erstellen die E-Mail und diese passt sich automatisch an die Ansicht auf dem Smartphone an.

    Der EmailBuilder ist in der Mailify Software verfügbar. Downloaden Sie Mailify und testen Sie den EmailBuilder kostenlos unter https://de.mailify.com/kostenlos-testen.

    emailbuilder

    Zusammenfassung

    Es ist selbstverständlich geworden, E-Mails über ein Smartphone zu lesen. Unternehmen, die sich nicht an das Verhalten Ihrer Nutzer anpassen, werden bei der E-Mail-Kommunikation ins Hintertreffen gelangen.

    Die vorgestellten Methoden ermöglichen Ihnen, Ihren Newsletter an das Lesen auf mobilen Geräten anzupassen.

    Mit resonsiven E-Mails können Sie zeigen, dass Sie die Bedürfnisse Ihrer Empfänger verstanden haben und es Ihnen wichtig ist, gutleserliche Nachrichten zu versenden.

    Präsentation von Mailify Sunrise

    Mailify wurde Sarbacane Software entwickelt, welche mit ihrem Newsletter Tool seit vielen Jahren Marktführer in ihrem Ursprungsland Frankreich sind. Ziel war es, Unternehmen die Erstellung und Verwaltung von Newsletter- Kampagnen zu vereinfachen.

    Seit 2001 wird die Software ständig weiterentwickelt, um den Bedürfnissen und Erwartungen der Nutzer gerecht zu werden. In der Zwischenzeit ist Mailify zu einem All-in-One Marketing-Tool geworden: E-Mail-Marketing, SMS-Marketing, Marketing-Automation, verhaltensabhängiger Versandzeitpunkt, Anti-Spam- Analyse, FormBuilder, weiterführende Statistiken, Retargeting, etc. sind nur einige Beispiele der Features, welche in nur einem Tool vereint werden.

    Diese Funktionen haben Mailify zu einer vielseitigen, einfach bedienbaren und marktführenden Newsletter-Software gemacht.

    Als erfahrener Experte im Bereich Newsletter-Marketing, berät Sie Mailify gerne mit Whitebooks, Best-Practices, Webinars und einem umfassenden Blog.

    DIE SOFTWARE: MAILIFY SUNRISE

    mailify

    Das Tool wurde komplett überarbeitet und enthält brandneue Funktionalitäten, die es Firmen ermöglichen, Ihr Newsletter Marketing effizienter zu managen.

    Mailify ermöglicht Ihnen:

    icone

    Ihre Kampagnen online oder offline zu bearbeiten.

    icone

    Überzeugende Newsletter im Nu zu erstellen.

    icone

    Ihr Marketing zu automatisieren.

    icone

    Ihre Anmeldeformulare in intelligenten Pop-Ups anzuzeigen.

    icone

    Den Erfolg Ihrer Kampagnen auf einen Blick zu bewerten