bento icon close
Sommaire
Livre blanc responsive

Version numérique gratuite

L'email responsive

Optimiser vos campagnes pour l’affichage mobile

Les consommateurs et leurs smartphones

Apparu en 1992 par IBM et diffusé plus largement par Apple en 2007 avec l’iPhone, le smartphone fait désormais partie intégrante de la vie des français.

71%

des français possèdent un smartphone

En 2018, 71% de la population française possède un smartphone(1), contre 46% en 2014 (2) .

Le téléphone portable est rapidement devenu un outil de communication au service de l’homme. Cette véritable révolution a séduit dès son apparition. L’arrivée du smartphone a amplifié ce phénomène et a bouleversé les règles de la vie sociale. Il est devenu l’assistant personnel de près de la moitié des français.

90% des français se connectent au moins une fois par jour en 2018. Ils se connectent en moyenne 23 fois par jour et y passent en moyenne 1h42(3).

90%

se connectent au moins une fois par jour
  • (1) Sources Hootsuite/ WeAreScocial selon Baromètre Consommateurs Google Janvier 2018
  • (2) Etude Crédoc sur la diffusion des technologies de l’information et de la communication dans la société française publiée en novembre 2014
  • (3) comarketing-news.fr/les-francais-et-leur-mobile-tous-les-chiffres-a-connaitre-en-2018/

En France, 53,8% de la population est mobinaute, représentant près de 30 millions de français(1). L'accès à Internet depuis son mobile est facilité grâce aux modes de connexions qui se diversifient par le déploiement du Wifi et du réseau 3G et 4G.

Selon Médiamétrie, la France compte plus de 52,5 millions d’internautes en septembre 2018.

21,5

millions d'internautes

L’accès à Internet depuis son mobile est facilité grâce aux modes de connexions qui se diversifient par le déploiement du Wifi et du réseau 3G et 4G.

Si les applications d’email sont la catégorie la plus utilisée par les 15-60 ans, elle n’arrive qu’en 2ème position chez les 15-24 qui lui préfèrent les réseaux sociaux et les messageries instantanées (1).

78% les utilisent quotidiennement et lorsqu’on leur demande quelles sont les apps dont ils ne pourraient pas se passer, les 15-24 ans répondent : Facebook et Snapchat(1).

Leurs usages :

illustration
  • Regarder la météo
  • Lire les emails
  • Consulter les réseaux sociaux
  • Inspecter l'agenda
  • Dresser une liste de tâches
  • ...
  • Avec toutes les applications intégrées à nos smartphones, ce petit appareil nous sert tous les jours pour toutes nos tâches quotidiennes.

    Le marché des smartphones

    En France, le secteur atteint un stade de maturité. À l’échelle mondiale, la croissance des ventes ralentit, mais ne baisse pas.

    Ce recul qui devrait se poursuivre. Les Français sont désormais bien équipés en smartphones, plus de 70 % en possèdent un. L’heure n’est plus à l’achat d’un premier équipement, mais à son renouvellement et les consommateurs gardent leurs smartphones un peu plus longtemps.

    La vente des smartphones en france(1)

    illustration

    LES SYSTÈMES D'EXPLOITATION

    Longtemps en avance par rapport aux autres constructeurs, Apple perd depuis quelques années des parts de marché. Désormais Android est en tête des systèmes d’exploitation de téléphonie mobile. Ce marché se dynamise avec la vente de nouveaux modèles proposés chaque année.

    Avec une part de marché de 85,1%(1), Android demeure bien en première position.

    La part de marché des systèmes d'exploitation en France(1)

    os

    Le top 10 des smartphones les plus vendus dans le monde

    En 2017, deux marques occupent le top 10.

    Ce ne sont pas ceux dont l’on parle le plus, pourtant les smartphones bas et moyen de gamme sont ceux qui se vendent le plus en France, devant les célèbres Galaxy S de Samsung et iPhone d’Apple.

  • Samsung – Galaxy J3 (2016)
  • Samsung – Galaxy J5
  • Samsung – Galaxy S7
  • Samsung – Galaxy A5 (2017)
  • Apple – iPhone 7
  • Apple – iPhone 6S
  • Samsung – Galaxy S7 Edge
  • Apple – iPhone SE
  • Apple – iPhone 6
  • Apple – iPhone 5S
  • La lecture des emails sur mobile

    os

    76% des internautes français se connectent depuis deux équipements et plus. 49% le font depuis 3 équipements et plus (1).

    Le smartphone devient désormais le premier support de consultation des emails. C’est la conclusion d’une étude mondiale menée par Return Path (spécialiste de l’email intelligence) qui a analysé plus de 27 milliards d’emails ouverts entre mai 2016 et avril 2017 à l’aide de son outil de monitoring(2).

    Le smartphone prend de plus en plus d’ampleur, en 2017, 55% des emails observés ont été consultés depuis un mobile contre 29% en 2012(2).

    Conséquence mécanique, le taux d’ouverture sur Webmail (emails ouverts sur Gmail ou Yahoo Mail depuis un navigateur) a chuté de 26% en cinq ans, passant de 37% à 28%(2).

    graph
    • https://www.sncd.org/wp-content/uploads/Infographie-EMA-BtoC-2018.pdf
    • https://www.zdnet.fr/actualites/emails-une-consultation-desormais-avant-tout-mobile-39859942.htm

    A chaque moment de la journée son support de connexion pour consulter ses emails(1) :

    os

    Le taux d’ouverture sur Webmail et clients augmente logiquement pendant la semaine lorsqu’on est au bureau et donc devant un PC fixe. Le Webmail compte ainsi pour 29% des ouvertures et 16 à 19% pour les logiciels clients (2).

    Les 3 façons de consulter ses emails sur smartphone

    Il existe plusieurs applications permettant de consulter ses emails sur un smartphone :

    La majorité des personnes utilise les applications natives, donc déjà installées, pour consulter leurs mails. Elles se nomment Mail sur l’iPhone et Gmail sur Android.

    1. Les applications natives

    Il existe plusieurs applications permettant de consulter ses emails sur un smartphone :

    emails

    L'application est préinstallée, l'utilisateur n'a plus qu'à la paramétrer. Elle permet de regrouper plusieurs adresses emails dans une seule application, pratique lorsque l'on possède différentes adresses emails.

    smartphones

    2. Les applications de messageries

    Aujourd'hui, toutes les messageries possèdent leurs propres applications mobiles. Même si les fonctionnalités sont identiques par rapport aux applications natives, l'ergonomie de l'application et le rendu du contenu des emails changent.

    Pour l'utilisateur, il suffit de télécharger l'application et de paramétrer son email.

    Chaque application, comme chaque messagerie, interprète à sa façon le code HTML du message pour afficher le contenu.

    smartphones

    3. L'explorateur Internet

    Il est aussi possible d'accéder à sa messagerie depuis le navigateur Safari sur iPhone ou le navigateur Internet sur Android, ces deux applications sont installées par défaut.

    navigateur

    A partir du navigateur, le mobinaute accède au site Internet de sa messagerie.

    smartphones

    Les contextes techniques à connaître

    illu-techniques

    La navigation sur les écrans tactiles est très intuitive. Mais elle n'est pas toujours facile à utiliser et peut même être agaçante si le contenu n'est pas adapté à ses spécificités. Le doigt n'étant pas aussi précis que la souris, il faut respecter certaines règles dans la conception de vos emails et sites :

    1

    Les éléments cliquables doivent être visuellement identifiables : contrairement à la souris qui donne l'information d'un élément cliquable avec une icône de main, sur écran tactile, on ne sait pas quel élément est cliquable car il n'y a pas de survol possible. C'est pourquoi vous devez faire en sorte que vos liens soient de préférence soulignés et que vos boutons d'action soient bien visibles (colorés, rectangulaires ou à bords arrondis...). Nous préconisons une taille minimum de 44 x 44 pixels pour un bouton facilement cliquable.

    2

    Espacez vos éléments cliquables : plusieurs éléments cliquables trop rapprochés seront difficiles à distinguer. Vous risquez d'énerver vos lecteurs si jamais ils cliquent malencontreusement sur un lien alors que c'était celui d'à côté qu'ils ciblaient !

    3

    Les tailles d'écrans étant réduites, il est désagréable de devoir faire défiler le contenu pour le consulter en totalité. Il est important de réduire les contenus de façon à pouvoir facilement consulter l'emailing.

    Le preheader est la partie textuelle de votre email qui se trouve tout en haut. Bien souvent, il est composé d'un lien vers la page miroir (copie Web de l'emailing) sous la forme d'une phrase qui ressemble généralement à : "Si vous ne visualisez pas ce message, cliquez ici." C'est bien dommage car l'application mail de l'iPhone et de l'iPad affiche dans la liste des messages reçus le début des messages, juste après l'objet. Utilisez cet espace pour apporter des informations complémentaires, en plus de l'objet, et convaincre vos destinataires d'ouvrir votre message !

    smartphone

    Afin d'être sûr que votre email soit correctement interprété sur smartphone, nous vous conseillons d'utiliser dans vos emails les polices Verdana ou Arial. Ces polices de caractères sont reconnues pour leur grande lisibilité et particulièrement adaptées à la lecture sur écran. Concernant les visuels, nous vous invitons à appliquer des contrastes forts. Les contrastes de couleur faibles ne sont pas conseillés sur les petits écrans, car la lecture est rendue plus difficile. Il faut penser aussi aux lecteurs qui ouvriront leurs emails dès le réveil, les couleurs ne doivent pas choquer. Evitez donc les couleurs flashies comme le jaune qui peuvent être désagréable pour la lecture.

    Pourquoi rendre son email responsive

    En fonction des caractéristiques du support et de l'application utilisée pour consulter les emails, une campagne emailing classique (non optimisée pour mobile) s'affichera de 2 manières :

    responsive
  • En plus petit
  • La largeur du document se redimensionne à la largeur de l'écran. Vous avez une vue globale de l'emailing ce qui permet de comprendre comment l'information est organisée. Mais les contenus sont difficilement lisibles, les liens sont trop petits pour être cliqués sans risque d'erreur. Vous devez alors zoomer pour lire l'email.

  • En plus grand
  • La largeur de l'email ne s'adapte pas à la largeur de l'écran et vous avez une vue de la taille réelle du contenu. Les mots ou les phrases sont lisibles mais l'ensemble d'un bloc texte peut être tronqué. La hiérarchie des informations n'est pas visible, il est donc plus difficile de trouver des repères de lecture.

    Vous devez dézoomer pour comprendre la structure et repérer les informations.

    Ces contraintes ne sont pas liées exclusivement à l'emailing, ce sont des caractéristiques du web mobile en général. Si vous consultez une page web non optimisée sur votre smartphone, il y a fort à parier que vous vous trouverez confronté à la même problématique. Qui n'a jamais connu cette expérience douloureuse avec un menu ou un formulaire.

    Ce zoom initial peut être contrôlé grâce à la balise meta viewport à intégrer dans la balise <HEAD>. du code HTML. Celle-ci va permettre d'adapter automatiquement le contenu à la largeur du support de lecture.

    Exemple :

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

    width : taille en pixels de l'écran

    Le responsive design consiste à optimiser un site ou un emailing sur le maximum de supports différents. Cela peut se faire pour chaque support séparément ou plus globalement en ciblant les grandes familles d'écrans.

    Comment le rendre responsive ?

    Plusieurs méthodes sont possibles, nous vous les détaillons dans les chapitres suivants.

    L'email fluide

    Qu'est ce qu'un email fluide ?

    L'email fluide est une mise en page qui s'adapte aux petits et grands écrans. Le contenu est automatiquement redimensionné selon la largeur du support de lecture sans modifier la structure de la page. Si votre email est déjà composé en une seule colonne, vous pouvez utiliser l'email fluide.

    email

    Pour que l'email s'adapte, il est conseillé de définir les dimensions de chaque élément en pourcentage.

    illu-pourcent

    Le code à utiliser :

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

    width : la largeur de l'image en pourcentage pour les petits écrans

    max-width : la largeur maximum de l'image pour les grands écrans et ordinateurs

    height : la hauteur en automatique pour garder la proportion de l'image

    Attention : les propriétés max-width et min-width ne sont pas compatibles sur les messageries Outlook 2007, 2010 et 2013.

    L'email adaptatif utilisant les Media Queries

    Pour adapter le contenu de son email aux différents mobiles, il est indispensable d'utiliser les Media Queries. Il s'agit d'une spécificité CSS3 permettant de détecter la largeur du support de lecture et d'appliquer un contenu différent selon la largeur du mobile.

    La méthode la plus utilisée consiste à cibler la taille en pixels CSS de l'écran :

  • min-device-width : largeur minimale de l'écran en pixels CSS
  • max-device-width : largeur maximale de l'écran en pixels CSS
  • Le code à utiliser :

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

    Dans cet exemple, nous avons fixé la limite à 480 pixels. Cela signifie que les emails ouverts sur un téléphone dont la largeur est inférieure à 480 px CSS afficheront la version optimisée.

    Les Medias Queries permettent également des combinaisons multiples, voici parmi elles 2 possibilités à retenir :

    Sélection en fonction de l'orientation du device (portrait ou landscape)

    Exemple :

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

    /* largeur en-dessous de 480px et mobile orienté en portrait*/

    }

    Sélection en fonction de la résolution d'ecran ou pixel ratio

    Exemple :

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

    /* écran au-dessus de 144dpi*/

    }

    illu-adapt

    Définir la largeur de l'email responsive

    Voici un tableau récapitulatif des différents smartphones sur le marché (en gras les plus vendus en sept. 2014) :

    La largeur en pixels CSS du smartphone correspond à la 3ème colonne de chiffres.

    tableau

    Quels sont les mobiles et les applications compatibles ?

    Les Medias Queries ont été testés sur :

    Mobile

    Android 4.4

    Gmail app (Android)

    Gmail app IMAP (Android)

    iOS

    Inbox by Gmail (Android)

    Inbox by Gmail (iOS)

    Outlook (Android)

    Outlook (iOS)

    Samsung Mail (Android)

    Yahoo! Mail app (Android)

    Yahoo! Mail app (iOS)

    Desktop

    Apple Mail 10

    Outlook 2000-03

    Outlook 2007-16

    Outlook for Mac

    Thunderbird

    Windows 10 Mail

    Webmail

    AOL Mail

    Gmail

    G Suite

    GMX.de

    Inbox by Gmail

    Libero

    Office 365

    Orange.fr

    Outlook.com

    Gmail

    SFR.fr

    T-online.de

    Web.de

    Yahoo! Mail

    Compatibilité

    Compatibilité

    Compatibilité

    En fonction des systèmes d'exploitation, certaines règles ne sont pas prises en compte, cela peut être le cas pour les Media Queries. Pensez à tester votre campagne sur votre téléphone pour vérifier que tout fonctionne correctement.

    Le code de l'email responsive

    Les Media Queries doivent être intégrés dans la partie < HEAD > du message tel qui suit :

    <!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) {

    .conteneur{

     width: 80% !important;

    }

    .titre-rouge {

     color: #F00 !important;

    }

    .img-mobile {

     width:80%! important;

    }

    .colonne{

     width:80% !important;

     display:block !important;

    }

    .cacher-mobile{

     display:none !important;

    }

    </style>

    </head>

    Suivi ensuite de la partie <BODY> présentant le contenu de l'email.

    Dans les Media Queries, il suffit d'indiquer les spécificités de votre email tel qu'il doit s'afficher sur mobile :

  • La classe CSS "conteneur" permet de fixer la largeur des tableaux en pourcentage, ici nous avons indiqué 80%
  • La classe CSS "titre-rouge" permet de changer la couleur du titre sur la version mobile
  • La classe CSS "img-mobile" permet de redimensionner l'image en pourcentage selon la largeur du support de lecture, ici nous avons indiqué 80%
  • La classe CSS "colonne" permet de passer l'email 2 colonnes en 1 seule colonne
  • La classe CSS "cacher-mobile" permet de marquer des éléments de la version classique sur la version mobile
  • Chaque classe CSS est à reporter dans la partie <BODY> du code HTML selon l'élément que vous souhaitez modifier. La règle de priorité !important doit être ajoutée dans les Media Queries pour que le style soit utilisé en priorité par rapport au style indiqué dans le <BODY>.

    Voici un exemple :

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

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

    <tr>

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

    <p class="titre-rouge" 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="conteneur" width="600" border="0" cellspacing="0" cellpadding="0">

    <tr>

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

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

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

    Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>

    </td>

    <td width="15px" class="cacher-mobile"> &nbsp; </td>

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

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

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

    Le Lorem Ipsum est simplement dufaux texte employé dans la composition et la mise en page avant impression.</p>

    </td>

    </tr>

    </table>

    </td>

    </tr>

    </table>

    </body>

    </html>

    Exemples d'emails adaptatifs

    Newsletter Sarbacane Software

    newsletter

    Emailing crée par l'Agence Sarbacane pour EMDE

    emailing

    L'EmailBuilder, un éditeur responsive

    Avec Sarbacane EmailBuilder, créer des newsletters devient un jeu d'enfant !

    L'éditeur graphique révolutionnaire de Sarbacane guide pas à pas l'utilisateur dans la conception du message. Il suffit de glisser et déposer les blocs de textes et/ou de visuels, et le contenu se crée sans effort ni connaissances techniques !

    builder

    Créer des newsletters responsive

    responsive

    Sarbacane EmailBuilder rend automatiquement les créations compatibles pour smartphones. Sans toucher au code HTML, l'outil s'occupe d'optimiser la création graphique et permet de visualiser en temps réel le rendu visuel du message sur le format mobile.

    Il est possible de partir d'une page blanche ou de choisir une première base à retravailler par la suite :

    base

    Des modèles créés par des graphistes sont aussi proposés :

    modèle

    Qu'elle soit créée de toute pièce ou à partir d'un modèle choisi, chaque création est automatiquement adaptée pour le mobile :

    adapté

    En un tour de main, le contenu de l'email est créé et l'email s'adapte aux smartphones.

    L'EmailBuilder est disponible sur le logiciel Sarbacane. Découvrez-le en téléchargeant le logiciel à www.sarbacane.com/telechargement

    emailbuilder

    Conclusion

    L'utilisation du smartphone et la lecture des emails sur ce support sont désormais ancrées dans les habitudes des consommateurs. Si l'entreprise ne prend pas en compte ce nouveau comportement, sa communication par email risque d'en subir les conséquences.

    L'email peut être adapté pour la lecture sur mobile grâce aux méthodes présentées.

    Rendre son email responsive, c'est prendre en compte ses destinataires et favoriser le confort de lecture de votre communication.

    Présentation de Sarbacane Software

    Leader sur le marché français de l'emailing, Sarbacane Software développe et édite un logiciel permettant d'accompagner les entreprises dans la création et la gestion de campagnes emailing.

    Depuis 2001, le logiciel a constamment évolué pour répondre aux attentes et besoins des utilisateurs grâce à l'ajout d'outils : suivi comportement, prévisualisation des campagnes, optimisation de la délivrabilité ou encore la géolocalisation des destinataires.

    Toutes ces fonctionnalités ont fait de Sarbacane Software une solution complète, simple à utiliser et un leader dans son domaine.

    Toutes ces fonctionnalités ont fait de Sarbacane Software une solution complète, simple à utiliser et un leader dans son domaine.

    Le logiciel : Sarbacane

    sarbacane

    En 2017, Sarbacane innove en tous points de vue en développant une nouvelle génération du logiciel, qui s’annonce comme l’outil complet de création marketing, solution incontournable parmi les acteurs de l’email marketing.

    Le logiciel fait peau neuve et intègre de nouvelles fonctionnalités permettant aux entreprises de mettre en place facilement des campagnes emailing toujours plus performantes. En version logicielle pour PC et Mac, Sarbacane est désormais disponible en version web.

    Chaque utilisateur peut désormais l’utiliser où il veut, quand il veut. Toutes les données sont enregistrées et sauvegardées pour être récupérées à tout moment sur l’interface web ou le logiciel.

    Sarbacane : Un outil multi-canal pour toutes les opérations marketing

    EMAILING

    • Créer ses propres campagnes emailing
    • Gérer ses listes de contacts
    • Maximiser ses chances d’arriver en boîte de réception
    • Suivre ses performances avec précision
    • Découvrir l’emailing

    SMS MARKETING

    • Créer des campagnes SMS hyper-personnalisées
    • Exploiter toute la puissance du SMS marketing
    • Etre certain(e) d’atteindre sa cible
    • Analyser ses performances
    • Découvrir le SMS marketing

    MARKETING AUTOMATION

    • Créer les scénarios qui répondent à ses besoins
    • Mettre en place des scénarios complexes en quelques minutes
    • Suivre les performances de ses scénarios
    • Déclencher des scénarios basés sur vos propres données

    LE PREDICTIVE SENDING OU ENVOI PRÉDICTIF

    Les équipes R&D de Sarbacane ont développé un algorithme, basé sur l’intelligence artificielle et permettant d’envoyer chaque email d’une campagne marketing au moment exact où chaque destinataire, selon ses spécificités uniques, sera le plus enclin à le lire.

    Un consultant dédié au service de vos performances

    Sarbacane propose un accompagnement sur mesure aux entreprises souhaitant être accompagnées dans leur stratégie marketing et dans la création et l’envoi de leurs campagnes emarketing.

    Notre expertise :

    • Création sur-mesure de campagnes emailing
    • Analyse de la base de données
    • Acquisition de contacts
    • Optimisation de la délivrabilité
    • Envoi full service
    • Bilan des campagnes envoyées

    Plus d’informations sur www.sarbacane.com/

    Ou par téléphone au +1 646 867 2537

    SARBACANE Software

    S.A.S. au capital de 169 967 € - RCS Lille Métropole 509 568 598

    Siège social : 3, avenue Antoine Pinay - Parc des 4 vents - 59510 HEM - FRANCE

    www.sarbacane.com

    blog.sarbacane.com

    Mars 2019

    Toute reproduction commerciale sans l’autorisation expresse de SARBACANE SOFTWARE est strictement interdite. La marque Sarbacane est protégée par les droits de propriété.

    Mot de passe oublié ?

    Mot de passe oublié

    arrow_backAnnuler