Design adaptatif. Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH

Transcription

1 Design adaptatif Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH

2 Contenu Définition... 3 Avantages... 3 Fonctionnalités... 5 Modèle de Design mobile... 5 Taille de police... 5 Disposition verticale... 5 Des calls to action plus grands... 5 Marges... 5 Adaptabilité... 6 Ergonomie... 6 Masquer les barres latérales et les barres de navigation... 6 Eléments de l interface utilisateur : prévisualisation et modification de la version pour supports mobiles... 7 Masquer des sections... 7 Télécharger des images mobiles dédiées... 9 Prévisualisation en direct Clients de messagerie pris en charge Foire aux questions Conseil Références

3 Définition Le design adaptatif est la technologie d emarsys permettant aux créations de prendre en compte le canal mobile pour l envoi des s. Les créations utilisant le design adaptatif sont des modèles de créas d s disposant d un design optimisé à la fois pour les supports mobiles et les ordinateurs de bureau. Ils vous permettent de pré-visualiser une version de votre et de différencier le contenu de la version pour support mobile. Les modèles de créas utilisant le design adaptatif sont crés par emarsys à partir du design pour PC, qui utilise nos meilleures pratiques en matière de design et de code. Vous n avez pas besoin de nous envoyer un design différent pour le support mobile. Dès que le modèle a été créé, vous pouvez sélectionner les éléments du contenu pour PC devant être inclus dans la version mobile de l . Le design adaptatif est intégré à l de manière à pouvoir répondre automatiquement à l écran sur lequel l s ouvre. Il permet donc d afficher automatiquement la meilleure version par rapport aux différentes tailles d écran. Avec le design adaptatif, vous pouvez simplifier vos campagnes d ing. Avantages L utilisation des supports mobiles pour les s explose. Selon une étude menée dans la seconde moitié de l année 20122, 27% des s sont aujourd hui ouverts sur des supports mobiles (téléphones ou tablettes), ce qui équivaut à une augmentation de 20% par rapport à la première moitié de la même année. Cette tendance s accentue chaque année un peu plus. Aujourd hui, l envoi de la version de vos s pour ordinateur de bureau aux utilisateurs de supports mobiles n est plus une option si vous souhaitez améliorer vos taux d ouvertures et de clics. Les marketeurs qui omettent de suivre la tendance vers les supports mobiles se verront dépassés par les autres professionnels. De plus, devoir créer une version mobile différente et l envoyer aux destinataires ayant ouvert des s sur un support mobile prend beaucoup de temps. Le design adaptatif vous permet de créer un qui sera optimisé pour chaque support, qu il s agisse d un ordinateur de bureau ou d un support mobile. Voici quelques-unes des tendances du moment : Le taux de clics dans des s ouverts sur des supports mobiles est deux fois moins important que sur des ordinateurs de bureau ; cela montre que la majorité des s n est pas adaptée aux supports mobiles. 1 Contrairement à l idée reçue, 96% des s ouverts sur un support mobile ne seront pas ouverts à nouveau sur l ordinateur de bureau. 1 63% des Américains, 41% des Européens et 67% des utilisateurs en Asie-Pacifique ferment ou suppriment les s n étant pas adaptés aux supports mobiles. 2 Un mobile optimisé permet d améliorer le nombre de clics et la conversion. 3

4 Un mobile optimisé permet de réduire le taux de désabonnement et d améliorer la performance de la marque. 4

5 Fonctionnalités Les modèles utilisant le design adaptatif se basent sur les éléments suivants : 1. Un design mobile intégré se basant sur le design pour ordinateur de bureau (voir les détails ci-dessous). 2. L interface utilisateur permet à l utilisateur de pré-visualiser la version mobile et de la modifier si nécessaire (voir les détails ci-dessous). Modèle de Design mobile Les fonctionnalités suivantes sont codées en dur dans le modèle ; il peut ainsi être utilisé automatiquement et appliqué lorsque l s affiche sur un support mobile. Ces fonctionnalités font partie intégrante du modèle ; l utilisateur ne peut pas les modifier. Elles se basent sur nos meilleures pratiques en matière de design et de code. Taille de police Les petites polices, adaptées aux ordinateurs de bureau, ne fonctionneront pas sur les supports mobiles car les utilisateurs seront obligés de zoomer pour faciliter la lecture. Apple recommande une taille entre 17 et 22 pixels pour les supports mobiles. Le design d adaptatif fera en sorte que les ordinateurs de bureau affichent de petites polices et les supports mobiles de grandes polices. Disposition verticale Les s pour ordinateurs de bureau ont tendance à utiliser une orientation horizontale : vous pouvez afficher des images avec du texte sur le côté, vous pouvez utiliser deux, trois, voire quatre colonnes et cela s affichera correctement sur PC. Ce n est pas le cas pour les s sur mobile. L orientation doit être verticale avec un contenu par étage ; si vous affichez par exemple du texte sur le côté de l image dans la version pour bureau, le texte doit se trouver sous l image dans la version pour supports mobiles. La disposition en plusieurs colonnes deviendra une disposition en une seule colonne et les éléments du contenu seront disposés les uns en dessous des autres. La fonctionnalité de design adaptatif effectue automatiquement le changement. Des calls to action plus grands Il est important de faciliter les clics sur des liens dans l et d effectuer le traçage de ces liens. Les liens courts qui fonctionnent parfaitement sur les ordinateurs de bureau ne seront pas adaptés aux doigts des utilisateurs de supports mobiles. Le design adaptatif convertit automatiquement le lien utilisé sur PC en un bouton plus large dans l mobile. Les liens faisant partie du texte rédactionnel sont conservés en tant que liens textuels, ce qui permet d éviter que des boutons ne s affichent au milieu du texte dans la version pour supports mobiles. Marges Lorsque les boutons sont proches les uns des autres, cela ne pose aucun problème avec une souris. Néanmoins, il est recommandé d augmenter les marges autour des boutons pour les petits écrans afin de les espacer et d éviter que d autres contenus ne soient masqués. 5

6 Adaptabilité L destiné à un ordinateur de bureau ne s affichera pas toujours correctement sur un support mobile. Le design adaptatif vous garantit que l s affiche au mieux sur les petits écrans. Ergonomie De nombreux utilisateurs de supports mobiles tiennent leur terminal dans la main droite et utilisent leur pouce droit pour cliquer. Il est donc conseillé d aligner l ensemble du texte à gauche et d éviter de placer des boutons en bas à droite. Avec le design adaptatif, l alignement du texte passe automatiquement à gauche et les boutons s affichant sont plus grands et plus centrés. Masquer les barres latérales et les barres de navigation Dans les s pour ordinateurs de bureau, les barres latérales peuvent afficher différents contenus et liens, comme sur votre site Internet. Les barres de navigation en haut de l écran contenant 4 à 6 liens fonctionnent également car l objectif est d attirer l attention de vos destinataires en leur proposant des produits variés. Néanmoins, ces éléments ne fonctionnent pas sur les supports mobiles car ils prennent trop de place, les liens seront toujours trop petits et souvent, le texte ne s affiche pas en entier sur le bouton. Le design adaptatif masque ces sections dans l mobile et les conserve dans la version pour ordinateur de bureau. Vous pouvez également transformer une barre de navigation comprenant 6 éléments en une barre à 3 éléments. 6

7 Eléments de l interface utilisateur : prévisualisation et modification de la version pour supports mobiles Masquer des sections Une fois de plus, il convient d aller à l essentiel. Néanmoins, avec l pour ordinateur de bureau, vous pouvez avoir 3 à 4 objectifs de conversions par , alors qu avec un pour supports mobiles, l idéal serait de n en avoir qu un seul. La capacité de concentration d un utilisateur mobile est en général plus réduite car il n est souvent pas immobile lorsqu il tente de lire l . L espace dont il dispose sur son écran ne lui permettra que de traiter un objet. En d autres termes, il est très probable qu il arrête de lire votre après le premier call to action. Un design d adaptif pour supports mobiles vous permettra de masquer facilement certaines sections de contenu et certains éléments et de ne les rendre visibles que sur les ordinateurs de bureau.. Les icônes s affichent si la rubrique et/ou le groupe est masqué pour la version mobile. Par défaut : activé. Le design des icônes va changer Il est également possible de masquer des rubriques ici. Par défaut : désactivé. Si la fonction est activée, cela sera pris en compte dans la page de création de contenu et vice et versa. 7

8 En plus du masquage de certaines rubriques pour cibler le contenu, il est conseillé de masquer les éléments suivants dans la version pour supports mobiles afin d améliorer l ergonomie de l Barre de navigation : Si la barre de navigation est définie en tant que rubrique, l utilisateur peut la masquer dans la version pour supports mobiles. Preheader «Si cet ne s affiche pas» : «Si cet ne s affiche pas correctement, cliquez ici». Voulez-vous vraiment que cette ligne prenne 20% de l espace dont vous disposez sur l écran d un support mobile? Le design adaptatif supprime cette phrase des s mobiles. Etant donné que les iphones téléchargent toutes les images par défaut, cette phrase est superflue. Quant aux utilisateurs des autres smartphones, ils savent où appuyer pour télécharger les images. Néanmoins, lorsque vous utilisez un preheader contenant un résumé ou un call to action, nous vous conseillons vivement de ne pas le masquer. Supprimer toute fioriture Sur les ordinateurs de bureau, les images peuvent venir compléter un paragraphe. Sur les supports mobiles, les petites images ne fonctionnent pas. Si vous décidez d ajouter une image, nous vous conseillons de faire en sorte qu elle remplisse tout l écran. S il ne s agit que d un ornement ou de remplir l espace, mieux vaut utiliser du texte. Le design d adaptatif pour supports mobiles vous permet de masquer des images dans des sections sans que vous ne soyez obligé d ajouter manuellement ou de manière spécifique du code pour chaque image. Option pour masquer l image sur les supports mobiles. Par défaut : non coché 8

9 Télécharger des images mobiles dédiées Il est également conseillé d optimiser la taille des images utilisées sur les supports mobiles. Le design adaptatif avancé vous permet d afficher différentes images selon le support de réception. Dans la plupart des cas, cela n est pas nécessaire mais parfois, cela peut s avérer opportun : Vous pouvez afficher des contenus mobiles dédiés, tels que des images permettant de télécharger votre application pour smartphone, qui ne seront affichées que sur les supports mobiles. Il se peut que vous vouliez télécharger une image de plus petite taille pour faciliter le rendu et le maniement sur les clients mobiles. Il se peut que vous souhaitiez jouer avec différentes tailles de l image pour optimiser l espace sur le support mobile, par exemple en agrandissant l image de la bannière et en utilisant de plus grandes polices. Image mobile dédiée si nécessaire 9

10 Prévisualisation en direct Au moment où vous créez votre adaptatif, vous souhaitez visualiser la version pour ordinateur de bureau et la version pour supports mobiles, pour voir le design de la version mobile et vérifier les modifications du contenu effectuées cette version. Le design adaptatif vous propose aussi un onglet mobile sur l écran de prévisualisation qui vous permet de passer d une prévisualisation à l autre. 10

11 Clients de messagerie pris en charge Tests pratiques sur les principaux clients : Clients de messagerie : YAHOO Internet Explorer 8, Internet Explorer 9, Firefox, Google Chrome HOTMAIL Internet Explorer 8, Internet Explorer 9, Firefox, Google Chrome GMAIL Internet Explorer 8, Internet Explorer 9, Firefox, Google Chrome Messageries PC Outlook 2003, Outlook 2007, Outlook 2010 Thunderbird Windows Live Mail Imale (à venir) Supports mobiles natif iphone 4 client de messagerie natif Android 4.0 client de messagerie natif (Samsung Galaxy Nexus) Samsung Galaxy Tab (version PC attendue) ipad (version pour ordinateur de bureau attendue) Android 4.0 (Ice Cream Sandwich) Android (Gingerbread) Motorola Atrix 2 (Honeycomb) Samsung Galaxy S1, S2 et S3 Webmail et applications mails pour mobile : Remarque : le produit est testé avec un grand nombre d applications mais il n est pas possible d effectuer des tests avec l ensemble des applications disponibles ; il est possible que leurs comportements diffèrent. Bien que nous ne les prenions pas en charge officiellement, bon nombre d entre elles afficheront la version mobile. En ce qui concerne les webmails sur les supports mobiles (par exemple l utilisation du navigateur pour l accès au client de messagerie au lieu de l application native), cela n est également pas pris en charge, car certains clients de messagerie suppriment le CSS. Supports mobiles applications s Applications Gmail (version PC attendue) Mobi Enhanced 11

12 Foire aux questions Pourquoi ne puis-je pas créer moi-même la version mobile? Le design adaptatif se base sur les meilleures pratiques en matière de design mobile et utilise un code avancé pour convertir la version PC en une version dédiée pour supports mobiles. Il ne s agit donc pas de deux versions distinctes mais d un code de conversion. N est-il pas possible d envoyer deux versions différentes pour que les utilisateurs de supports mobiles reçoivent la version mobile? Il existe aujourd hui un grand nombre de supports ; en utilisant le design adaptatif, vous n avez pas à vous demander si le destinataire utilise un ordinateur de bureau ou un support mobile. Cela signifie-t-il une charge de travail supplémentaire lors de la création des campagnes? Non car par défaut, toutes les sélections sont effectuées de manière à ce que la version pour support mobile soit prête sans qu aucune étape supplémentaire. Néanmoins, si vous souhaitez différencier le contenu de la version pour support mobile, par exemple en masquant des rubriques, des images ou en téléchargeant des images mobiles dédiées, des étapes supplémentaires seront nécessaires. Vous utilisez CSS3 mais de nombreux clients de messagerie ne le prennent pas en charge. Toutes les fonctionnalités CSS utilisées par notre design adaptatif sont prises en charge par les clients de messagerie pris en charge. La plupart des clients de messagerie qui ne prennent pas en charge CSS sont des clients pour PC ; notre CSS est appliqué aux supports mobiles et dans ce domaine, la prise en charge est meilleure. L affichage sera-t-il le même sur l ordinateur de bureau? Veuillez consulter la liste des clients pris en charge. Nous prenons en charge les principaux clients de messagerie pour ordinateur de bureau. Qu en est-il des tablettes telles que les ipad? L ipad et toutes les autres tablettes disposant d un grand écran que nous prenons en charge afficheront la version pour ordinateur de bureau. D une manière générale, tous les supports dont les écrans dépassent 480 pixels afficheront la version pour ordinateur de bureau. Puis-je masquer des rubriques dans la version pour ordinateur de bureau? Non, cela n est pas possible car la fonctionnalité CSS qui masque le contenu n est pas prise en charge sur les clients pour ordinateurs de bureau. C est pourquoi elle n est activée que pour la version pour supports mobiles. 12

13 J utilise un mode avancé et la version pour supports mobiles ne fonctionne pas. Pourquoi? Veillez à manipuler le design adaptatif avec précaution en mode avancé car le code est bien plus fragile. Une manipulation adéquate est donc indispensable. Si vous utilisez le mode avancé pour effectuer d importantes modifications structurelles dans l (par exemple en créant de nouveaux groupes), nous vous conseillons de nous contacter pour que nous adaptions le design à vos besoins. J utilise l HTML personnalisé ; la prévisualisation pour supports mobiles est-elle disponible? Pas encore. Actuellement, la prévisualisation pour supports mobiles n est prise en charge que dans les modèles utilisant le design adaptatif. Je souhaite faire en sorte que mon HTML personnalisé soit adaptatif ; pouvez-vous m aider? Nous vous ferons parvenir un document vous indiquant la procédure à suivre. Veuillez contacter votre responsable de compte. Que se passe-t-il si je passe en orientation paysage sur le support mobile? L créé avec le design adaptatif s adaptera de manière à remplir toute la largeur du support. Conseil L envoi d s adaptatifs, optimisés pour les ordinateurs de bureau et les supports mobiles, vous permettra d améliorer vos taux de clics. Pour obtenir une meilleure conversion, n oubliez pas de créer également une landing page mobile sur votre site Internet, voire un site Internet adaptatif. Votre fournisseur de services web saura sûrement comment utiliser le design web. Références 1. Rapport sur l utilisation des s sur les périphériques mobiles aux Etats-Unis, Knotice H (en anglais) : s sur des périphériques mobiles, E-dialog (en anglais) : 3. L importance des s mobiles pour les emarketeurs, Econsultancy (en anglais) : 13