Optimisation des s pour les supports mobiles. Améliorez vos taux de clics sans augmenter votre charge de travail.

Transcription

1 Enterprise Marketing Solutions & Services 27% DES S SONT OUVERTS SUR SUPPORTS MOBILES Optimisation des s pour les supports mobiles Améliorez vos taux de clics sans augmenter votre charge de travail.

2 1 Contenu La nécessité de l ing mobile Comment relever le défi? Qu est-ce que le design d s adaptatif? Quels sont les avantages du design adaptatif? Conclusions Références VIENNE LONDRES MUNICH BERLIN ZURICH PARIS HONG KONG PEKIN MOSCOU ISTANBUL

3 La nécessité de l ing mobile 2 La nécessité de l ing mobile Avec plus de 500 smartphones et de 200 tablettes mises sur le marché l an passé, les supports mobiles sont devenus incontournables. Dans notre société, Internet est dorénavant indispensable. Les tablettes remplacent les ordinateurs portables et le stockage des données en mode cloud rend les informations disponibles n importe où, n importe quand. Cette évolution vers l informatique mobile a une influence considérable sur les fabricants d ordinateurs traditionnels. Dans un récent article de presse, Hewlett-Packard a justifié la réduction de plusieurs milliers de postes par le fait que l entreprise ne produit pas de tablette sur un marché s efforçant d accélérer l adoption de ces technologies. Si les supports mobiles sont si importants, cela veut-il dire que le nombre d s sera plus important, étant donné que les obstacles traditionnels, tels que les murs de nos bureaux, disparaissent et que chacun peut accéder à ses s n importe où? Cela signifie-t-il que les taux d ouvertures et de clics exploseront? Malheureusement non, car la durée d ouverture des s sera plus courte et car de nombreuses informations ne seront pas lues, voire supprimées en raison de la taille réduite des écrans, à moins que le rendu de l ne soit optimisé de manière à répondre aux exigences des supports mobiles. Il est donc essentiel de créer des images dédiées si vous ne voulez pas voir diminuer vos taux de réponses. Voici quelques-unes des tendances du moment: L utilisation des supports mobiles pour les s explose. Selon une étude menée dans la seconde moitié de l année 2011, 27% des s sont aujourd hui ouverts sur 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. 1 Les taux de clics dans des s ouverts sur des supports mobiles sont deux fois moins importants 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 mobilese 2 Un mobile optimisé permet d améliorer le nombre de clics et la conversion. Un mobile optimisé permet de réduire le taux de désabonnement et d améliorer la performance de la marque. Optimisation des s pour les supports mobiles

4 3 La nécessité de l ing mobile Comment relever le défi? Pour relever le défi relatif aux s mobiles, les sociétés disposent aujourd hui des options suivantes : Ne rien faire et envoyer les versions pour ordinateur de bureau. Il s agit là du comportement le plus répandu 3 Identifier les utilisateurs mobiles et leur envoyer une version épurée pour supports mobiles Créer un template à taille unique représentant un compromis entre les s pour ordinateur de bureau et ceux pour supports mobiles : grande police pour le texte, utilisation d une seule colonne, etc. Utiliser un code adaptatif dans l HTML personnalisé Utiliser un design d adaptif: bien qu il s agisse de l approche gagnante pour chaque terminal de réception, elle n est pas encore proposée par la plupart des fournisseurs de services de messagerie. Qu est-ce que le design d s adaptatif? Qu est-ce que le design d s adaptatif? Le design d s adaptatif est un code supplémentaire imbriqué dans l HTML de l qui lui permet de s adapter à l écran sur lequel il s ouvre et donc de proposer un rendu différent selon la taille de l écran. Cela s effectue via des requêtes de média interrogeant la largeur de l écran et n appliquant le CSS que si l écran se trouve en dessous d une certaine limite. Lorsque le design adaptatif est appliqué à l , il améliore considérablement le taux de réponses mobiles. Bien qu elle soit de plus en plus utilisée sur les sites Internet, cette approche est relativement nouvelle pour les s et a du retard par rapport à l adoption des smartphones. Les utilisateurs avancés utilisent le code adaptatif dans un code HTML personnalisé mais les templates permettant un design d adaptif ne sont disponibles que chez peu de fournisseurs de services de messagerie. Rares sont donc les professionnels de l e-marketing qui y ont accès. Il est important que le message soit le plus centré sur le destinataire possible. Les professionnels de l e-marketing doivent s efforcer d envoyer à leurs destinataires le contenu le plus pertinent : un contenu répondant à leurs centres d intérêt, leur fuseau horaire, leur région ainsi que le support qu ils utilisent. Le design d adaptatif permet de répondre à ce défi car il est impossible de connaître le support sur lequel les destinataires ouvriront votre ; il peut s agir d un ordinateur de bureau, d une tablette, d un téléphone portable, etc. De plus, étant donné la capacité de concentration réduite, si l n est pas adapté au support sur lequel ils le lisent, les utilisateurs sur mobile risquent de l ignorer ou encore de le supprimer.

5 Quels sont les avantages du design adaptatif? 4 Quels sont les avantages du design adaptatif? Un template adaptatif permet de résoudre les problèmes suivants en intégrant différentes fonctionnalités: Taille de la 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 entre 17 et 22 pixels pour les écrans des 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 travailler correctement sur le bureau. Ce n est pas le cas pour les s sur supports mobiles. 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 de contenu seront disposés les uns en dessous des autres. La solution de design adaptatif idéale effectue automatiquement le changement. Des calls to action plus grands Il est important de faciliter les clics sur les 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 gros doigts des utilisateurs de supports mobiles. Le design adaptatif peut automatiquement convertir le lien qui sera utilisé pour les ordinateurs de bureau en un bouton plus large dans l mobile. 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. Adaptabilité L destiné à un ordinateur de bureau ne s affichera pas toujours correctement sur un support mobile. Le fait de passer de conteneurs fixes à des conteneurs plus fluides et d ajouter un code plus spécifique au client pour répondre aux besoins des divers supports mobiles garantira que l s affiche au mieux sur les petits écrans. Des contenus plus ciblés Une fois de plus, il convient d aller à l essentiel. Néanmoins, avec l pour ordinateur de bureau, vous pouvez obtenir 3 à 4 conversions par , alors qu avec un pour supports mobiles, l idéal serait de n en obtenir qu un. La capacité de concentration d un utilisateur mobile est en générale plus réduite car il n est en général 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 objet. 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. Optimisation des s pour les supports mobiles

6 5 Quels sont les avantages du design adaptatif? Normal Adaptatif 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 adaptif pour supports mobiles vous permet de masquer les images dans des sections sur l interface utilisateur sans que vous ne soyez obligé d ajouter manuellement ou de manière spécifique du code pour chaque image. 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 cela est le cas 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. Masquer le preheader «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 de smartphones, ils savent où appuyer pour télécharger les images. 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 ainsi 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 également que vous vouliez télécharger une image de plus petite taille pour faciliter le rendu et le maniement sur les clients mobiles. Enfin, il se peut que vous souhaitiez jouer avec différentes taille 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. 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. Cela n est pas nécessaire pour les s destinés aux ordinateurs de bureau car avec le design adaptatif, l alignement du texte passe automatiquement à gauche et les boutons s affichant sont plus grands et plus centrés.

7 Quels sont les avantages du design adaptatif? 6 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. Lorsque vous utilisez un HTML personnalisé ou des templates adaptatifs pas vraiment intégrés à votre solution d ing, cette option n est pas disponible. Il vous est difficile de modifier les éléments adaptatifs de votre car vous n avez pas accès à la version finale et vous ne pouvez donc pas être sûr que tous les éléments nécessaires seront affichés. Dernier point Si vous êtes en mesure d envoyer un design d adaptatif optimisé pour les ordinateurs de bureau et les supports mobiles, vous obtiendrez de meilleurs taux de clics. Néanmoins, pour obtenir de meilleurs taux de conversion, n oubliez pas d ajouter une landing page mobile sur votre site Internet. Votre fournisseur de services Internet doit pouvoir utiliser le Web design adaptatif. Conclusion et Références Conclusions 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. Parmi toutes les stratégies disponibles, le design d adaptatif est la meilleure approche car celui-ci vous permet de maximiser le potentiel de votre . Les design d s adaptatifs étaient jusqu à présent le domaine réservé des spécialistes du codage HTML, disposant de ressources pour le développer. Mais même ainsi, ils ne disposaient pas d un template intégré permettant à un utilisateur peu qualifié d intégrer un design d s adaptatifs facilement et rapidement. Pour plus d informations sur notre design d adaptatif pour s mobiles, veuillez contacter emarsys. Références 1 Rapport sur l utilisation des s sur les périphériques mobiles aux Etats-Unis, Knotice H (en anglais): 2 s sur les périphériques mobiles, E-dialog (en anglais): 3 L importance des s mobiles pour les emarketeurs, Econsultancy (en anglais): Optimisation des s pour les supports mobiles

8 Contactez-nous Pour plus d information, vous pouvez nous contacter directement ou vous rendre sur notre site pour en savoir plus sur nos autres localisations. emarsys France 67 rue Anatole France Levallois Perret Téléphone: +33 (0) Fax: +33 (0) france@emarsys.com emarsys Monde Vienne Londres Munich Berlin Zurich Paris Hong Kong Pékin Moscou Istanbul Pour rester informer des meilleures pratiques en terme d marketing, inscrivez-vous à notre Newsletter sur by emarsys Enterprise Marketing Solutions & Services