1
Le courriel responsive Optimiser vos campagnes pour l affichage mobile SOMMAIRE Du téléphone portable au téléphone intelligent... 2 L apparition du téléphone intelligent... 2 Le téléphone intelligent versus l ordinateur... 3 Les familles des périphériques... 4 Les nouveaux comportements... 4 Les contextes techniques à connaître... 5 Les applications utilisées... 5 Les résolutions d écrans... 7 La navigation sur écran tactile... 7 Le preheader ou l entête... 8 Les polices et les visuels... 8 Les différentes approches pour rendre son courriel responsive... 9 Un courriel optimisé pour tous les appareils... 10 Un courriel fluide... 11 Un courriel adaptatif... 13 Présentation de Sarbacane Software... 17 Le logiciel Sarbacane... 17 Conclusion... 18 2
Le courriel responsive, c est : Adapter son courriel aux différents supports de lecture Prendre en compte les destinataires et leur apporter une information lisible partout et à chaque instant De nos jours, une grande partie de la population possède un téléphone cellulaire. Il est devenu un appareil indispensable, utilisé partout et surtout en situation de mobilité. Une des fonctionnalités principales du téléphone intelligent est la consultation des courriels. Les messageries sont désormais accessibles directement depuis votre téléphone intelligent. 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. 1. Du téléphone portable au téléphone intelligent L APPARITION DU TÉLÉPHONE INTELLIGENT 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 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 téléphone intelligent a déclassé le téléphone portable classique. Un «smartphone» est un téléphone portable intelligent lié à un assistant personnel qui 3
permet la navigation sur Internet, la consultation des messages courriel, la fonction GPS... Le premier téléphone intelligent a été créé par IBM en 1992 et a mis plus de temps que le téléphone cellulaire à se démocratiser. C est en 2007 avec la sortie de l iphone créé par Apple que le téléphone intelligent arrive à la portée des particuliers. Apple, Samsung, Nokia, HTC, LG, BlackBerry, Sony Ericsson... Surfant sur la vague d Apple, l ensemble des opérateurs téléphonique a proposé leurs propres téléphones LE NOMBRE DE TÉLÉPHONES INTELLIGENTS VENDUS EN FRANCE intelligents apportant ainsi une concurrence sur le marché. Les téléphones intelligents sont maintenant plus accessibles grâce à la baisse des prix et les opérateurs mobiles suivent la tendance en baissant aussi le coût des forfaits. LE TÉLÉPHONE INTELLIGENT VERSUS L ORDINATEUR 6,6 millions de Canadiens ont un téléphone intelligent et ont ainsi accès à internet*. 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. Faciles, pratique et rapidité sont les maîtres mots des nouveaux consommateurs. L étude Mobile Marketing Attitude du SNCD montre qu en 2012, 67% des utilisateurs de téléphones cellulaires passent jusqu à 2 heures par jour sur leur téléphone intelligent. Avec l essor des téléphones intelligents et tablettes, les ventes d ordinateurs baissent. En un an, le marché a régressé passant de 2,8 millions d ordinateurs vendus en 2011 à 2,6 millions en 2012, soit une baisse de 7,6%.** * chiffres de directioninformatique.com ** chiffres de l Institut Gartner 4
LES FAMILLES DES PÉRIPHÉRIQUES Dorénavant, il existe 3 familles de support : l ordinateur, la tablette tactile et bien sûre, le téléphone intelligent. 2. Les nouveaux comportements Le téléphone cellulaire 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! À ses débuts, le téléphone cellulaire sevrait principalement à téléphoner et envoyer ou recevoir des SMS. Les téléphones sont petit à petit devenus des bijoux technologiques permettant l accès à Internet. C est l avènement d un nouveau type de téléphone cellulaire : le téléphone intelligent. Ce mini-ordinateur tient dans une main et permet 5
notamment de consulter ses courriels à tout moment. Avec ce nouvel usage, le lien entre le courriel et le consommateur s est renforcé. Traditionnellement, l usage du courriel sur ordinateur se faisait plutôt le soir (après le travail). Avec le téléphone intelligent, on est prévenu de l arrivée d un courriel à 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 oeil à ses courriels, devenus finalement aussi importants que les SMS. Une formidable opportunité s offre donc aux entreprises souhaitant utiliser le courriel comme canal de communication. Et, pour toucher le consommateur via le courriel, il est donc très important de connaître l environnement et l usage du mobile pour le courriel. 3. Les contextes techniques à connaître LES APPLICATIONS UTILISÉES : Il existe plusieurs applications permettant de consulter et d envoyer ses courriels sur un téléphone intelligent. Les deux applications ci-dessous sont les plus populaires, car déjà installées sur les téléphones : Courriel 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 téléphones intelligents, se comportent comme de véritables applications de messageries. 6
7
LES RÉSOLUTIONS D ÉCRANS Les tailles d écrans sont différentes selon les téléphones intelligents. Toutefois, beaucoup ont la même résolution. Voici quelques références parmi les plus utilisées : On constate que le minimum est de 320 pixels par 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. 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 courriels et sites : 8
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 peut être 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, colorés, rectangulaires ou à bords arrondis avec des effets de relief. Nous préconisons une taille de 44 x 44 pixels pour un bouton plus 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 ce n était pas sur lequel ils voulaient cliquer! 3. 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. LE PERSUADER OU L ENTÊTE L entête est la partie textuelle de votre courriel 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. Par exemple «Si vous ne visualisez pas ce message, cliquez ici». C est bien dommage, car l application courriel 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! 9
LES POLICES ET LES VISUELS Afin d être sûrs que votre courriel soit correctement visible sur téléphone intelligent, nous vous conseillons d utiliser dans vos courriels 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 en devient difficile. Il faut également penser aux lecteurs qui ouvriront leurs courriels dès le réveil. Les couleurs ne doivent donc pas choquer. Évitez les couleurs trop voyantes, comme le jaune, qui peut être désagréable pour la lecture. 4. Les différentes approches pour rendre son courriel responsive Une campagne emailing classique s affichera sur un téléphone cellulaire 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 téléphones cellulaires. L usage de ces appareils pour la messagerie devenant de plus en plus importante, il est crucial de rendre vos campagnes «responsive», c est-à-dire de leur donner la capacité de s adapter à l appareil utilisé. Une campagne emailing responsive s adapte automatiquement à la taille d affichage, avec un contenu identique ou réduit afin de s adapter aux 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 redimensionné. Le choix du courriel 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é. À chaque création de campagnes, il faut avoir en tête que le destinataire pourra lire votre courriel 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, sur un support mobile, 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. 10
Afin de transformer un email en email responsive vous devez 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 bien sur indispensable d évaluer le contenu en fonction de chaque contexte. Et pour cela, il existe 3 méthodes de courriel responsive : Un courriel optimisé Un courriel fluide Un courriel adaptatif UN COURRIEL 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 courriel 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 nonaffichage 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. 11
Un courriel complètement composé d images peut être bloqué par un FAI ou une messagerie. 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. 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. Le courriel 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. UN COURRIEL FLUIDE Le courriel 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 du courriel et des visuels doivent être informées en pourcentage en plus des tailles en pixels. Caractéristiques : Une mise en page souple; Une seule colonne; Des visuels pouvant être redimensionnés. Le courriel fluide utilise des déclarations CSS de largeur relative, 12
c est à dire exprimées en pourcentage. Ce code permet ainsi de passer d une mise en page fixe à une mise en page fluide. La largeur du courriel peut être définie à une taille précise. Par exemple : 600 pixels. Par contre, si l écran a une largeur inférieure, celle du courriel 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 : la largeur maximum de l image pour les grands écrans width : la largeur de l image en pourcentage pour les petits écrans height : la hauteur en automatique pour garder la proportion de l image La plupart des messageries sont compatibles avec le courriel fluide. 13
UN COURRIEL ADAPTATIF Le courriel adaptatif est un courriel complètement adapté aux différents formats d é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, tout 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 afin définir les conditions d affichage. Il existe deux possibilités : Redimensionner la campagne et/ou positionner différemment les éléments. Le code CSS adapte le courriel selon la largeur du support de lecture. Afficher une version définie pour mobile. Le Media Querie déclaré dans l en-tête du courriel 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; les mobiles Windows et Android verront la version classique de la campagne. POSITIONNER DIFFÉREMMENT LES ÉLÉMENTS Pour redimensionner une campagne emailing grâce aux fonctions CSS, il faut que celle-ci ait une structure simplifiée (deux ou trois colonnes). Ainsi ces mêmes colonnes passeront les unes en dessous des autres. 14
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 allez-vous devoir supprimer certains éléments inutiles pour votre version mobile. CACHER CERTAINS CONTENUS Selon le contenu déjà présent, vous pouvez choisir de cacher certains éléments de votre courriel de la version ordinateur à la version mobile. Caractéristiques : La colonne de droite disparaît. 15
AFFICHER UNE VERSION DÉFINIE POUR MOBILE Les Media Queries permettent de remplacer la version classique par une version uniquement créée pour le mobile. Si nous nous basons sur un courriel lisible sur un ordinateur (480 pixels minimum), il faudra indiquer dans le code que le courriel mobile doit s afficher pour une largeur inférieure à 480 pixels. Le code utilisé : @media only screen and (max-device-width : 480px) 16
Le bulletin Saracen Software set définie comme suit : Les bulletins utilisent les Media Queries pour afficher une mise en page différente et un contenu réduit, sur une version mobile. Le contenu mobile est personnalisé au maximum avec un contenu réduit : Moins de textes Et moins d images. Maintenant que votre courriel mobile est prêt, intéressez-vous aux pages d «atterrissage». En effet, vos pages doivent être lisibles sur les différents supports pour que le destinataire ait la meilleure expérience mobile possible. 17
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 éponyme. 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 s est imposée sur le marché français de l emailing. Le logiciel Sarbacane vous permet de gérer en totale autonomie la mise en oeuvre de vos campagnes d emailing. Sarbacane Software vous 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 18
CONCLUSION Avec l essor des téléphones intelligent, l emailing vit en quelque sorte une seconde jeunesse. Afin d accompagner ce phénomène, les entreprises se doivent de prendre en compte les comportements de ses 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. 19
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/canada blog.sarbacane.com/canada Janvier 2013 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é. 20
L arrivée des téléphones intelligents marque l évolution des comportements et une seconde jeunesse pour l emailing. Les Canadiens accèdent désormais à leurs courriels directement et à tous moments de la journée depuis leur téléphone intelligent. Afin d accompagner ce phénomène, les entreprises se doivent de tenir compte de ces nouveaux comportements en adaptant leurs stratégies mailing. Sarbacane Software vous détaille dans ce livre blanc les techniques à connaître afin de mieux optimiser la mise en page ainsi que les différentes approches pour rendre son email responsive : Un courriel optimisé pour tous les types d appareils Un courriel fluide Un courriel adaptatif En adaptant vos campagnes, les destinataires seront davantage satisfaits des envois, leur confort de lecture et d utilisation étant amélioré. Ainsi, vos performances mailing seront meilleures et au final, le business ne fera que mieux d en porter. WWW.SARBACANE.COM/CANADA 21