Sommaire Du téléphone portable au smartphone... 4 L apparition du smartphone... 4 Le marché français des smartphones... 6 Le smartphone vs. l ordinateur... 7 Les familles des périphériques... 8 Les nouveaux comportements... 9 Les contextes techniques à connaître... 10 Les application utilisées... 10 Les résolutions d écrans... 12 La navigation sur écran tactile... 13 Le preheader... 14 Les polices et les visuels... 15 Les différentes approches pour rendre son email responsive... 16 Un email optimisé pour tous les appareils... 18 Un email fluide... 20 Un email adaptatif... 22 Présentation de Sarbacane Software... 27 Le logiciel Sarbacane... 27 Le Studio... 28 Exemples de campagnes... 28 Conclusion... 32 2 - Livre blanc Sarbacane Software
L email responsive, c est : adapter son email aux différents supports de lecture prendre en compte les destinataires et leur apporter une information lisible partout et à chaque instant faire évoluer sa communication à portée de main suivre les dernières tendances des nouvelles technologies offrir une nouvelle expérience De nos jours, une grande partie de la population possède un téléphone portable. Il est devenu un appareil indispensable, utilisé partout et surtout en situation de mobilité (transports en commun par exemple). Une des fonctionnalités principales des smartphones est la consultation des emails. Les messageries emails sont désormais directement accessibles et toujours à portée de main. Avec ce livre blanc, Sarbacane, acteur majeur de l emailing, propose de vous accompagner dans la mise en place de vos campagnes emailing adaptées à l ensemble des supports mobiles. Email responsive - 3
1. Du téléphone portable au smartphone L APPARITION DU SMARTPHONE Le téléphone portable est vite devenu un outil de communication au service de l homme. Une véritable révolution technologique qui a séduit dès son apparition et a bouleversé les règles de vie sociale. Il permet d être en contact téléphonique ou par message avec son entourage où que l on soit. Très vite, le smartphone est apparu pour remplacer le téléphone portable classique. Un smartphone est un téléphone portable intelligent lié à un assistant personnel qui permet la navigation sur Internet, la consultation des messages emails, la fonction GPS... Le premier smartphone a été créé par IBM en 1992, il a mis plus de temps que le téléphone portable à se démocratiser. C est en 2007 avec la sortie de l iphone créé par Apple que le smartphone arrive à la portée des particuliers. 4 - Livre blanc Sarbacane Software
En parallèle, le réseau et les opérateurs téléphoniques s adaptent en proposant des forfaits répondant aux besoins avec le réseau 3G, et le Wifi devient accessible chez soi et dans les lieux publics. LE NOMBRE DE SMARTPHONES VENDUS* Apple, Samsung, Nokia, HTC, LG, BlackBerry, Sony Ericsson... Surfant sur la vague d Apple, l ensemble des constructeurs de téléphonie ont proposé leurs propres smartphones. Cette diversification a apporté de la concurrence, les smartphones sont plus accessibles grâce à la baisse des prix. Les opérateurs mobiles suivent la tendance en baissant aussi le coût des forfaits. * ETUDES DE L INSTITUT GFK Email responsive - 5
LE MARCHÉ FRANÇAIS DES SMARTPHONES Le marché des smartphones se développant, désormais 24 millions de français possèdent un smartphone, représentant 46,6% de la population*. Longtemps en avance par rapport aux autres constructeurs, Apple perd en part de marché, désormais Android est en tête des systèmes d exploitation de téléphonie mobile. Ce marché se dynamise par les nouveaux modèles proposés et la baisse des prix des smartphones et des forfaits. LES SYSTÈMES UTILISÉS * CHIFFRES DE MÉDIAMÉTRIE DE SEPTEMBRE 2012 6 - Livre blanc Sarbacane Software
LE SMARTPHONE VS. L ORDINATEUR 22,3 millions des français se sont déjà connectés à l Internet mobile par un site ou une application, représentation 41,2% des individus*. Les consommateurs consultent de plus en plus Internet sur leur mobile parce qu il est à portée de main 24 heures sur 24 et 7 jours sur 7. Facile, pratique et rapidité sont les maîtres mots des nouveaux consommateurs. L étude Mobile Marketing Attitude du SNCD montre qu en 2012, 67% des mobinautes passent jusqu à 2 heures par jour sur leur smartphone. Avec l essor des smartphones et tablettes, les ventes d ordinateurs baissent. En France, le marché a régressé passant de 2,8 millions d ordinateurs vendus au troisième trimestre 2011 à 2,6 millions à la même période en 2012, soit une baisse de 7,6%.** * CHIFFRES DE MÉDIAMÉTRIE 2012 DE SEPTEMBRE 2012 ** CHIFFRES DE L INSTITUT GARTNER Email responsive - 7
LES FAMILLES DES PÉRIPHÉRIQUES Dorénavant, il existe 3 familles de support : l ordinateur, la tablette tactile et le smartphone. 8 - Livre blanc Sarbacane Software
2. Les nouveaux comportements Le téléphone mobile a radicalement changé nos habitudes. Désormais, nous sommes joignables à tout moment et force est de constater que ce petit objet a révolutionné notre quotidien! A ses débuts, le téléphone mobile servaient principalement à téléphoner et envoyer ou recevoir des SMS. Les téléphones sont petits à petits devenus des bijoux technologiques permettant l accès à Internet. C est l avènement d un nouveau type de téléphone mobile : le smartphone. Ce mini-ordinateur tient dans une main et permet notamment de consulter ses emails à tout moment. Avec ce nouvel usage, le lien entre l email et le consommateur s est renforcé. Traditionnellement, l usage de l email sur ordinateur se fait plutôt le soir (après le travail). Avec le smartphone, on est prévenu de l arrivée d un email à chaque instant et la consultation des messages est facilitée car accessible via une application native. Dans le bus, le train, en voiture (quand on est passager!), dans une salle d attente, ou tout simplement dans son canapé, on a accès en un clin d œil à ses emails, devenus finalement aussi importants que les SMS. Une formidable opportunité s offre donc aux entreprises souhaitant utiliser l email comme canal de communication. Pour toucher le consommateur via l email, il est donc très important de connaître l environnement et l usage du mobile pour l email. Email responsive - 9
3. Les contextes techniques à connaître LES APPLICATIONS UTILISÉES : Il existe plusieurs applications permettant de consulter et envoyer ses emails sur un smartphone. Voici lesquelles : Les deux applications ci-dessous sont les plus populaires car elles sont nativement installées sur les smartphones Mail sur iphone (ios) E-Mail sur Android Les webmails les plus populaires sont accessibles via les navigateurs internet mobiles et sont optimisés pour mobile. Ces sites, quand ils sont consultés sur smartphones, se comportent comme de véritables applications de messageries. 10 - Livre blanc Sarbacane Software
Exemples depuis Safari sur iphone : Yahoo! Mail Gmail Email responsive - 11
LES RÉSOLUTIONS D ÉCRANS Les tailles d écrans sont différentes selon les smartphones. Toutefois, beaucoup ont la même résolution. Voici quelques références parmi les plus utilisées : On constate que le minimum en largeur se situe à 320 pixels et en hauteur à 480 pixels. Nous le verrons plus loin, il y a différents moyens à votre disposition pour gérer correctement l ensemble de ces résolutions. 12 - Livre blanc Sarbacane Software
LA NAVIGATION SUR ÉCRAN TACTILE 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 : 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 bleus et soulignés et que vos boutons d action ressemblent à des boutons (colorés, rectangulaires ou à bords arrondis avec éventuellement des effets de relief). Nous préconisons une taille de 44 x 44 pixels pour un bouton facilement cliquable. 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! Les tailles d écrans étant réduites, il est désagréable de devoir 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. Email responsive - 13
LE PREHEADER 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! 14 - Livre blanc Sarbacane Software
LES POLICES ET LES VISUELS 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 flashys comme le jaune qui peuvent être désagréable pour la lecture. Email responsive - 15
4. Les différentes approches pour rendre son email responsive Une campagne emailing classique s affichera sur un smartphone de la même façon que sur un ordinateur mais en plus petit. Les contenus seront donc difficilement lisibles, les liens trop petits pour être accessibles... La campagne sera donc peu efficace sur les smartphones. L usage de ces appareils pour la messagerie devenant de plus en plus important, il est crucial de rendre vos campagnes «responsive» c està-dire de leur donner la capacité d adapter leur contenu à l appareil utilisé. Une campagne emailing responsive s adapte automatiquement à la taille d affichage avec un contenu identique ou réduit pour prendre en compte les spécificités de chaque écran. En fonction de la largeur de l écran, certains contenus peuvent être recadrés et la taille du texte peut être redimensionnée. Le choix de l email responsive implique des conséquences ergonomiques et techniques. L idéal pour le destinataire est d avoir une expérience différente sur chaque support s adaptant à l appareil utilisé. A chaque création de campagne, il faut avoir en tête que le destinataire pourra lire votre email aussi bien sur son mobile que sur son ordinateur. Selon le support de lecture, il faudra optimiser les liens de direction. Sur un ordinateur, votre campagne emailing dirigera le lecteur sur un site Internet. Cependant, avec les supports mobiles, les liens peuvent diriger vers une application. Il est donc important de personnaliser les liens selon les supports de lecture, cela est possible avec les propriétés CSS. 16 - Livre blanc Sarbacane Software
Pour rendre votre email responsive, commencez par : optimiser la mise en page alléger le contenu minimiser les images supprimer les éléments non nécessaires sur mobile simplifier la navigation Il est indispensable d évaluer le contenu en fonction de chaque contexte. Il existe 3 méthodes d email responsive : un email optimisé un email fluide un email adaptatif Email responsive - 17
UN EMAIL OPTIMISÉ POUR TOUS LES APPAREILS Une campagne peut s adapter et être lisible sur les différents supports si elle a de grandes images, des boutons d appel à l action larges et des textes de grandes tailles. Cet email optimisé s affiche de la même façon sur écran d ordinateur ou sur mobile. La mise en page doit présenter l offre et le texte la décrivant tout en faisant attention au non affichage des images et au ratio texte/image de la composition. Le ratio 60% d images (à héberger sur un serveur de préférence afin d alléger le poids du message) et 40% de texte doit être respecté pour optimiser au maximum la délivrabilité de votre campagne. Un email complètement composé d images peut être bloqué par un FAI ou une messagerie. 18 - Livre blanc Sarbacane Software
Certaines messageries n affichent pas automatiquement les images hébergées, vous devez utiliser la balise «ALT» de l image, texte qui apparaît à la place de l image lorsque cette dernière ne s affiche pas. Exemple : L image ne peut pas être le premier élément de votre message, un texte rapide de présentation doit être renseigné. Sujet traité page 16. L email optimisé est particulièrement adapté pour les secteurs du commerce, de l événementiel ou pour des invitations. Plus la présentation est grande, mieux c est. Email responsive - 19
UN EMAIL FLUIDE L email fluide est une mise en page qui s adapte aux petits et grands écrans. Le contenu est redimensionné selon la largeur du support de lecture sans modifier la structure de la mise en page. Ici, les largeurs de l email et des visuels doivent être informés en pourcentage en plus des tailles en pixels. Caractéristiques : une mise en page souple une seule colonne des visuels redimensionnables L email fluide utilise des déclarations CSS de largeur relative (c est à dire exprimées en pourcentage). Ce code permet de passer d une mise en page fixe à une mise en page fluide. 20 - Livre blanc Sarbacane Software
La largeur de l email peut être définie à une taille précise, 600 pixels par exemple, par contre si l écran a une largeur inférieure, la largeur de l email doit être renseignée en pourcentage, par exemple : 80% (pour être en accord avec le visuel) par rapport à la largeur de lecture. Le code utilisé : style = width : 80%; max-width : 600px; height : auto; max-width : width : height : la largeur maximum de l image pour les grands écrans la largeur de l image en pourcentage pour les petits écrans la hauteur en automatique pour garder la proportion de l image La plupart des messageries sont compatibles avec l email fluide. Email responsive - 21
UN EMAIL ADAPTATIF L email adaptatif est un email complètement adapté aux différents écrans. Les spécifications CSS et les Media Queries, propriété de CSS3, permettent d ajuster automatiquement la mise en page, le contenu et la taille du texte en ciblant les périphériques d ouverture en fonction de leurs capacités propres. Il faut associer les différentes déclarations selon le support pour définir les conditions d affichage. Deux possibilités : Redimensionner la campagne et/ou positionner différemment les éléments. Le code CSS adapte l email selon la largeur du support de lecture. Afficher une version définie pour mobile. Le Media Query déclaré dans l en-tête de l email permet d afficher une mise en page complètement différente. ATTENTION : les spécifications CSS fonctionnent sur l ensemble des mobiles, tandis que les Medias Queries, introduites par le CSS3, fonctionnent uniquement sur ios, ainsi les mobiles Windows et Android verront la version classique de la campagne. 22 - Livre blanc Sarbacane Software
POSITIONNER DIFFÉREMMENT LES ÉLÉMENTS Pour redimensionner une campagne emailing grâce aux fonctions CSS, il faut que cette campagne ait une structure simplifiée (deux ou trois colonnes), ainsi les colonnes passent les unes en dessous des autres. Exemple : Caractéristiques : Les deux colonnes n en forment maintenant plus qu une seule. Le code CSS dispose les blocs les uns en dessous des autres. N oubliez pas que l email mobile doit être concis. Nous vous conseillons donc de faire attention à la longueur de votre campagne, pour cela peut-être devez-vous supprimer certains éléments inutiles pour la version mobile? Email responsive - 23
CACHER CERTAINS CONTENUS Selon le contenu déjà présent, vous pouvez choisir de cacher certains éléments de votre email de la version ordinateur à la version mobile. Exemple : Caractéristiques : la colonne de droite disparaît. 24 - Livre blanc Sarbacane Software
AFFICHER UNE VERSION DÉFINIE POUR MOBILE Les Media Queries permettent de remplacer la version classique par une version complètement créée pour le mobile. SUR LA VERSION BUREAU, LA VERSION B EST MASQUÉE SUR LA VERSION MOBILE, LA VERSION A EST MASQUÉE Si nous nous basons sur un email lisible sur ordinateur d une largeur de 480 pixels minimum, il faudra indiquer dans le code que l email mobile doit s afficher pour une largeur inférieure à 480 pixels. Le code utilisé : @media only screen and (max-device-width : 480px) Email responsive - 25
La newsletter de Sarbacane Software est définie comme suit : La newsletter utilise les Media Queries pour afficher une mise en page différente, sur mobile, avec un contenu réduit. Le contenu mobile est personnalisé au maximum avec un contenu réduit : moins de textes et moins d images. Maintenant que votre email mobile est prêt, intéressez vous aux pages d «atterrissage». En effet, vos pages doivent aussi être lisibles sur les différents supports pour que le destinataire ait la meilleure expérience mobile. 26 - Livre blanc Sarbacane Software
Présentation de Sarbacane Software LE LOGICIEL SARBACANE Sarbacane Software est un acteur incontournable sur le marché de l emailing français grâce à son logiciel du même nom. Simplicité, confort d utilisation et intuitivité sont des termes qui caractérisent le logiciel Sarbacane. Sarbacane est l outil e-mailing idéal pour les TPE/PME. En 10 ans, la solution est devenue leader sur le marché français de l emailing. Le logiciel Sarbacane vous permet de gérer en totale autonomie la mise en œuvre de vos campagnes d emailing. Le logiciel permet de : gérer vos destinataires (import, filtrage, dédoublonnage...) construire vos messages simplement et sans connaissance en langage HTML. prévisualiser vos messages dans les principales messageries en un clic (dont les webmails Orange, Gmail, Yahoo, SFR...) : service inclus dans l abonnement envoyer vos campagnes via un service de routage professionnel qui optimise la délivrabilité. mesurer les performances grâce des statistiques détaillées dans le logiciel (suivi des comportements et géotracking des destinataires) et sur Google Analytics Email responsive - 27
LE STUDIO Le Studio intégré à Sarbacane Software réalise les créations graphiques emailings des utilisateurs qui n ont aucunes connaissances graphiques pour des communications plus professionnelles et efficaces. Les créations livrées sont certifiées compatibles avec la plupart des messageries. 500 clients ont confié plus de 700 projets au Studio. Le Studio Sarbacane a développé une véritable expertise technique et créative sur l email responsive et accompagne déjà plusieurs entreprises sur ce sujet. Elles considèrent à juste titre que leurs envois emailing doivent être efficaces aussi en situation de mobilité. EXEMPLES DE CAMPAGNES Depuis 2011, le Studio travaille sur l email responsive et propose les dernières techniques possibles : CSS ou Media Queries, selon l email d origine et les besoins de l expéditeur. Les trois références proposées utilisent les spécificités CSS afin de faciliter les modifications de contenu par l utilisateur. Ainsi, les mises à jour de textes et de visuels faites dans l éditeur HTML de Sarbacane sont directement prises en compte dans la version mobile. 28 - Livre blanc Sarbacane Software
ACTION CONSEILS La campagne emailing d Action Conseils est composée d une seule colonne, ce qui facilite le redimensionnement pour la version mobile. Les visuels et les boutons d appels à l action se centrent automatiquement. Email responsive - 29
COURTAGE STREET L email de Courtage Street, composé en deux colonnes, utilise les spécificités CSS. L entête est redimensionné et les contenus de la colonne de droite se réduisent et passent en dessous du contenu principal. 30 - Livre blanc Sarbacane Software
AVASSYS La campagne d Avassys lie les fonctionnalités des deux premiers emails : une seule colonne qui facilite le maniement de la mise en page un en-tête redimensionné des visuels centrés Email responsive - 31
Conclusion Avec l essor des smartphones, l emailing vit en quelque sorte une seconde jeunesse. Pour accompagner ce phénomène, les entreprises se doivent de prendre en compte les comportements des consommateurs en s adaptant aux nouveaux appareils utilisés. L emailing responsive est donc la réponse idéale à cette tendance. Bien que sa mise en place nécessite une certaine expertise technique, il devient indispensable de s en préoccuper. En adaptant vos campagnes, vos destinataires seront davantage satisfaits de vos envois car leur confort de lecture et d utilisation sera amélioré. Par conséquent, vos performances emailing seront meilleures et au final, votre business ne pourra s en porter que mieux. 32 - Livre blanc Sarbacane Software
SARBACANE Software - S.A.S. au capital de 167 817 - RCS Roubaix-Tourcoing 509 568 598 Siège social : 3, avenue Antoine Pinay - Parc des 4 vents - 59510 HEM - FRANCE www.sarbacane.com blog.sarbacane.com Janvier 2013 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é.
L'arrivée des smartphones marque l'évolution des comportements et une seconde jeunesse pour l'emailing. Les français accèdent désormais à leurs emails directement et à tous moments de la journée depuis leur smartphone. Pour accompagner ce phénomène, les entreprises se doivent de prendre en compte ces nouveaux comportements en adaptant leurs campagnes emailing. Sarbacane Software vous détaille dans ce nouveau livre blanc les contextes techniques à connaître pour optimiser au mieux la mise en page et les différentes approches pour rendre son email responsive : un email optimisé pour tous les appareils un email fluide un email adaptatif En adaptant les campagnes, les destinataires seront davantage satisfaits des envois car leur confort de lecture et d'utilisation sera amélioré. Par conséquent, les performances emailing seront meilleures et au final, le business ne pourra s'en porter que mieux.