Es-tu prêt pour un monde mobile ? Quelles sont tes options ?
Les smartphones offrent aux marques un canal intime pour communiquer avec leurs clients, mais ton site est-il prêt ? Explore les sites mobiles, applications natives et options de design responsive.
Cet article a ete ecrit en 2013. Certains details ont pu changer depuis.
Avec des millions d'utilisateurs de smartphones qui utilisent leur téléphone tous les jours, que peut-on faire pour en tirer parti ? "Pour un nombre toujours croissant de consommateurs, dans tous les marchés, niveaux de revenus et données démographiques, le téléphone mobile est l'appareil et le canal de communication le plus proche de leur cœur. Il est par définition intime et personnel, emporté partout, utilisé tout au long de la journée et personnalisé en prenant et sauvegardant des photos personnelles, en téléchargeant de la musique, en ajoutant des fonds d'écran, en créant des raccourcis et, de plus en plus, par la sélection d'applications et de fonctions." Extrait de TNS Global Key Insights Mobile Life. C'est pourquoi le smartphone représente une opportunité majeure pour les marques d'avoir une relation intime, one-to-one avec leurs clients. Du point de vue des médias propriétaires, on aurait des options comme :
- développer un site mobile
- une application mobile native
- s'appuyer sur les réseaux sociaux existants comme Facebook, Twitter, Instagram.
Avec un site mobile, tu ne peux pas exploiter différentes fonctions comme l'accès à l'album photo, la caméra, les vidéos, les contacts et autres. L'expérience ne sera probablement pas aussi riche/interactive qu'avec une application mobile native. Cependant, l'avantage est qu'un site mobile est agnostique à la plateforme — il peut fonctionner sur iOS, Android ou Windows. Quant aux applications natives, tu peux créer des applications vraiment complexes avec une expérience riche, de beaux graphismes, des images 3D, etc. Cependant, il est très important de savoir que tu devras probablement créer des versions différentes de la même application pour iOS, Android, Windows Mobile ou tout autre système d'exploitation.
Ton site actuel est-il adapté aux mobiles ?
Pour répondre à cette question, tu peux essayer de visiter ton propre site sur un smartphone, ou utiliser un simulateur de téléphone mobile (cherche en ligne "How does your site look on mobile?" et tu trouveras de nombreux outils gratuits). Si ton site est fait en flash, tu ne pourras PAS voir quoi que ce soit sur iPhone (ou tout appareil iOS comme iPad, iPod Touch) car iOS ne prend pas en charge le flash. Certains outils te donneront des indications sur comment optimiser ton site mobile. Les questions qu'ils posent peuvent être :
- "Vois-tu des images cassées ou du contenu manquant ?
- Peux-tu lire le texte sans zoomer ou faire défiler latéralement ?
- Les liens et boutons peuvent-ils être cliqués avec le pouce ?
- Les vidéos, jeux ou autres animations sont-ils visibles ?
- Les visuels et le ton sont-ils cohérents avec les autres supports marketing ?"
En répondant à ces questions et en sachant combien de temps ton site mobile met à charger, tu auras une idée assez approximative de la performance de ton site mobile et des domaines à améliorer. La liste ci-dessus est très basique et il y a bien d'autres choses à vérifier pour savoir si ton site est adapté aux mobiles.
Site adapté aux mobiles
Au Vietnam, pour ce qui est du développement d'un site mobile, d'un point de vue technique, tu as quelques options :
Responsive Web Design
Le Responsive Web Design (RWD ou Design Responsive) est relativement récent, donc les designers et développeurs ont encore beaucoup à apprendre pour maîtriser ce concept et le mettre en œuvre avec élégance. Il y a de nombreux exemples de sites en design responsive comme http://mashable.com/, http://www.bostonglobe.com/ ou mon propre blog qui utilise un thème prenant en charge le design responsive. Je n'ai pas encore rencontré beaucoup de sites au Vietnam qui implémentent le Design Responsive. Selon "Think Insights with Google" : "Le Responsive Web Design (RWD) te permet d'optimiser l'expérience de ton site pour différentes tailles d'écran sans créer plusieurs sites web. En utilisant des templates flexibles, des media queries CSS et des événements JavaScript, un design responsive peut s'adapter à la taille de la fenêtre d'affichage d'un appareil, en ajustant les images, la mise en page du template et la visibilité du contenu. Tu peux même exploiter de nouvelles capacités d'appareil comme le glissement, le balayage et d'autres gestes utilisateur reconnus par les appareils tactiles. Toutes ces techniques CSS et JavaScript peuvent être intégrées dans un seul fichier HTML, livré à tous les appareils." Exemple ci-dessous de Mashable pour illustrer le design responsive au cas où tu ne saurais pas ce que c'est :
C'est la taille normale pour desktop (j'utilise un MacBook Pro avec une résolution "best scaled"), tu remarques que le titre de l'article sur la droite est "Google Glass Photographer Makes Picture Taking Awkward". Dans la partie mise en évidence, tu peux voir l'article avec son titre sur 2 lignes et quelques descriptions en dessous. Regarde maintenant l'image ci-dessous pour la taille d'écran iPad. Si tu veux le reproduire, il suffit de réduire la taille de la fenêtre du navigateur.
En raison de la taille d'écran plus petite, le titre de l'article apparaît maintenant sur 4 lignes, et on n'a plus de place pour la description de l'article. Cependant, comme tu peux le voir, la mise en page est responsive et la vue reste optimale. La mise en page ne casse pas et on peut encore lire le contenu facilement. Le dernier exemple est la taille d'écran smartphone pour le même site Mashable. Comme tu peux le voir, la mise en page change complètement pour s'adapter à la petite taille d'écran. On ne voit que la section Nouvelles sur la page d'accueil. La navigation principale se réduit au bouton dans le coin supérieur gauche. Pour aller dans d'autres sections, il faut cliquer sur ce bouton. 
Site mobile : servir différents HTML sur la même URL
Quand un client visite ton site web, il est possible que ton serveur web détecte quel type d'appareil il utilise et affiche une page personnalisée (HTML + CSS) sur la même URL. Ces pages personnalisées peuvent être conçues pour n'importe quel type d'appareil — téléphones mobiles, tablettes, ordinateurs de bureau et même Smart TV. Détecter l'appareil de l'utilisateur et modifier le contenu que tu sers nécessite une personnalisation (par exemple des feuilles de style) qui doit être maintenue pour chaque type d'appareil.
URLs mobiles séparées
Une autre option pour personnaliser l'expérience utilisateur selon le type d'appareil est de créer un site séparé pour le trafic mobile, indépendant de ton site desktop d'origine. Le navigateur détecte si un visiteur est sur un appareil mobile et le redirige vers la version mobile optimisée de ton site (par exemple m.vnexpress.net). Un site mobile dédié te permet d'adapter le site spécifiquement aux utilisateurs mobiles et est souvent construit et hébergé indépendamment. Cette solution est assez couramment utilisée au Vietnam. Certains des plus grands portails d'information du Vietnam utilisent ce type d'implémentation comme VnExpress, Vietnamnet (2013). 
Site mobile ou application mobile native ?
Du point de vue du budget, l'option avec le budget le plus bas serait d'avoir un site mobile séparé, c'est-à-dire des URLs mobiles séparées. Le Responsive Web Design serait généralement plus cher en comparaison au site mobile. Et bien sûr, construire un site mobile avec un design responsive est bien moins cher qu'une application native. Si tu demandes combien moins cher exactement pour un site mobile vs une application native, ma réponse serait toujours : cela dépend. J'estimerais le ratio entre 3 et 20 fois plus cher pour une application native selon les fonctionnalités. En plus du fait que ça coûte moins cher à construire, le site mobile a l'avantage de la portée, de la compatibilité entre plateformes et navigateurs. L'utilisateur peut trouver le site mobile assez facilement juste en cherchant sur Google. Pour le site en responsive design, il hérite de tous les avantages ci-dessus du site mobile, plus il offre une bien meilleure expérience utilisateur sur tous les appareils grâce à des mises en page personnalisées. Si tu veux mettre à jour ton site en Responsive Web Design (RWD), tu peux le faire via un CMS assez facilement. Les changements seront visibles instantanément dans le navigateur de l'utilisateur sans approbation d'un tiers comme c'est le cas avec l'Apple AppStore. Les sites mobiles "normaux" et RWD ont quelques grands inconvénients :
- Beaucoup d'entre eux ne peuvent pas fonctionner sans connexion internet (d'après ma compréhension limitée, certaines Web Apps proposent un mode hors ligne)
- Ils ne peuvent pas accéder aux données personnelles de l'utilisateur sur le téléphone, à la caméra, au calendrier, au flux photo, à l'accéléromètre, etc. (Cela pourrait changer à l'avenir)
- Ils n'offrent généralement pas une expérience aussi riche que les applications natives, car les animations complexes, les jeux, les rapports, les calculs, etc. ne peuvent pas être facilement implémentés.
- Capacités push : si tu veux que ton site mobile (web app) tourne en arrière-plan et t'envoie des notifications, ce n'est pas possible à ce stade.
- La facilité de monétisation : avec Google Play et l'Apple App Store ou d'autres marketplaces, il est bien plus facile de commercialiser des applications natives et d'atteindre une audience massive qui pourrait payer pour télécharger ton application native ou acheter des articles dans l'application. Pour les sites mobiles, le modèle d'abonnement semble être parmi les rares choix disponibles pour la monétisation.
Un grand inconvénient de l'application native est que pour offrir la meilleure expérience utilisateur, l'application doit être personnalisée/construite pour chaque plateforme — une version pour iOS et une autre pour Android. Cela signifie que le coût de développement est plus élevé pour les applications natives. Le coût de maintenance est aussi plus élevé. Les désavantages du site mobile sont naturellement les avantages de l'application native. Cependant, attention : une application native, c'est comme un actif sur les réseaux sociaux ou un site web — une fois construit, tu dois dépenser de l'argent pour le promouvoir auprès de tes utilisateurs et le maintenir ensuite. Donc je ne recommanderais pas de développer une application juste pour une campagne de 2 mois, puis d'arrêter de la soutenir après.
Processus de développement d'une application native
Si tu veux construire une application mobile native, le processus général est le suivant :
- Idéation : cela inclut le concept de l'application, les fonctionnalités clés. Il serait généralement préférable de réfléchir aux bénéfices à long terme de l'application (pour les utilisateurs et pour la marque), pas seulement pour une poussée de campagne (1-2 mois), car le coût de construction d'une application et de promotion pour que les utilisateurs la téléchargent n'est pas négligeable.
- Analyse métier : analyser les besoins et proposer une solution technologique adaptée, une infrastructure de base pour chaque système d'exploitation.
- Wireframe, Design : tout comme pour la création d'un site web, le wireframe est d'une importance capitale pour une application car il est le fondement de l'interface utilisateur. S'il y a quelque chose de logiquement incorrect dans le wireframe, ou s'il manque quelque chose, l'expérience utilisateur en sera gravement affectée.
Le flux d'écrans expliquera comment l'animation fonctionnera. Avec ce flux d'écrans, le client pourra "visualiser" comment utiliser l'application et ce qui se passe quand un bouton est pressé.
- Base de données, CMS et API : cette étape consiste à concevoir la base de données, coder le CMS et l'API selon les exigences. Tu peux coder le CMS et l'API en php, Java ou .Net, c'est à toi de choisir. Note que ton équipe de production web "normale" peut gérer cette partie — elle doit simplement produire l'API selon les exigences demandées.
- Programmation pour connecter le front-end de l'application avec la base de données, le CMS et l'API : à ce stade, tu devras programmer avec Apple/Android SDK, avec des langages comme Objective C pour iOS, etc.
La question suivante à considérer est de savoir si tu dois développer l'application native sur Android ou iOS ou Windows.
Android ou iOS ou Windows ?
Un élément principal à considérer est la part de marché entre iOS et Android parmi ton public cible. Clairement, Windows n'est PAS une plateforme courante, donc ton choix se fera entre Android et iOS. Ma recommandation : si tu as le budget, tu devrais viser les deux. Si tu veux monétiser ton application via le paiement officiel du store, iOS est la voie à suivre. Les utilisateurs d'Apple App sont bien plus susceptibles de payer pour quelque chose que ceux d'Android, notamment parce qu'il est bien plus facile de trouver une version crackée d'une application Android.
D'après App Annie, tu peux voir que les revenus de l'iOS Store sont environ 4 fois supérieurs à ceux de Google Play sur une base mensuelle. Si tu dois choisir une seule plateforme, cela dépend de ton public cible et de ses préférences en matière de smartphones. En tant que marketeur, on doit suivre nos utilisateurs et pêcher là où se trouvent les poissons. Enfin, ce qui précède est extrait du chapitre "Actifs Mobiles" de mon dernier livre sur le marketing digital au Vietnam. Pour acheter l'ebook, utilise ce lien.