I. Introduction▲
Le web évolue drastiquement ces dernières années. Il a été poussé par la popularisation et la montée en puissance des smartphones. Les réseaux mobiles sont de plus en plus performants, et nous sommes de plus en plus connectés. Accéder à Internet n'a jamais été aussi facile avec les réseaux WiFi et 3G/4G. L'e-commerce et les services en ligne sont en plein essor.
Au début de la démocratisation de la smart-mobilité, les erreurs stratégiques de positionnement et de choix techniques furent nombreuses. Aucune pérennité n'était alors envisageable dans un environnement aussi concurrentiel où l'innovation est une question de survie. Parier sur des technologies émergentes peut s'avérer très gratifiant, ce qui justifie la prise de risque. Cependant, à se concentrer sur la technologie, on oublie parfois que la véritable valeur se trouve dans le contenu ou le service proposé. Les périphériques connectés sont des vecteurs de diffusion et il s'agit d'en extraire leur potentiel maximum pour présenter ce contenu et cette interaction de la manière la plus efficace et attrayante possible.
Aujourd'hui, le marché est installé, les clients équipés. Les constructeurs sont tenaillés entre leur inextinguible besoin de faire évoluer l'offre et les exigences croissantes de leurs clients quant au nombre d'applications disponibles et à leur rétrocompatibilité. Ce contexte est propice à la standardisation. Parallèlement, les développeurs web doivent faire face à la multitude d'appareils et de systèmes présents sur le marché. Pour parvenir à être présents partout, ils s'aident de procédures de tests de plus en plus rigoureuses et d'un outillage logiciel de plus en plus sophistiqué.
Difficile pour une entreprise ou un particulier d'être présent partout à la fois. Le virage de la mobilité était à peine amorcé que la révolution mobile est déjà passée en seconde phase : l'heure est au multi-écran. Les périphériques intermédiaires et hybrides viennent déjà combler les vides laissés par cette migration des usages.
Cet ouvrage a pour objectif de prendre du recul sur le boom des appareils connectés au web en vous donnant les moyens techniques de parvenir avec votre site web à aborder tous ces différents contextes d'utilisation tout en vous préparant à ceux à venir.
II. Contexte et enjeux▲
Ces dix dernières années, les équipements connectés se sont multipliés pour faire partie intégrante de notre vie quotidienne. De nouveaux types de périphériques et de nouvelles plates-formes système sont apparus et se sont développés très vite. Avant de se lancer dans la création d'une nouvelle application ou d'un nouveau service en ligne, il est essentiel de faire le point sur le contexte actuel.
A présent il n'est plus question de concevoir un site web en négligeant complètement l'usage mobile. Toutes les statistiques de consultation des grands sites sont formelles : la part de clients « mobiles » ne cesse d'augmenter de manière exponentielle. Le phénomène est particulièrement prononcé pour les réseaux sociaux et les sites d'actualité ou de météo. Facebook a annoncé en juillet 2013 disposer de 819 millions d'utilisateurs mobile actifs (au moins une connexion par mois), soit 71% du total d'utilisateurs actifs sur le réseau social(1) . Le marché mobile comptait en 2012 plus d'un milliard de smartphones en circulation soit un quart de tous les téléphones actifs(2).
La révolution mobile se retrouve globalement dans tous les pays. Mais ce sont avant tout les pays émergents qui sont responsables de cette forte accélération de l'usage mobile. En effet, ce sont dans ces pays que provient la grande majorité des nouveaux internautes. Ceux-ci s'équipent en priorité de smartphones et de tablettes au détriment des ordinateurs fixes et ordinateurs portables. Ainsi, en Inde, le trafic Internet est majoritairement issu de l'usage mobile depuis mai 2012 d'après StatCounter(3).
Mais ne nous y trompons pas : l'usage mobile n'a pas vocation à remplacer l'usage desktop. Certes, le marché du PC a beaucoup chuté en 2013, mais principalement parce que les foyers sont déjà bien équipés. En Europe, les statistiques de consultation des grands sites montrent que le desktop reste et restera sans doute encore pour plusieurs années la classe d'appareil la plus utilisée pour surfer sur le Web. Néanmoins, la part du mobile est suffisamment importante pour que l'on ne puisse plus les ignorer. Il est important de considérer les smartphones non pas comme les successeurs des ordinateurs traditionnels mais plutôt comme un usage complémentaire ancré dans notre quotidien.
Cette logique de complémentarité transparaît clairement avec l'apparition et les bonnes ventes de périphériques intermédiaires. La tablette tactile a ainsi bénéficié d'un grand regain d'intérêt de la part du grand public à la sortie de l'iPad en 2010. Elle se place en juste milieu des usages entre le smartphone et le laptop. La plupart des acheteurs déclarent l'utiliser dans leur canapé ou pendant les voyages, quand le laptop est trop encombrant et le smartphone trop petit pour être confortable lors d'une utilisation prolongée ou pour des usages multimédia. On pourrait croire qu'il s'agit d'un cas d'usage minoritaire, et pourtant il a suffi à convaincre les consommateurs. Ce sont 45 millions de tablettes qui ont été livrées au deuxième trimestre 2013 à travers le monde(4). En comparaison, sur ce même trimestre ont été livrés 75,6 millions de PC et 238 millions de smartphones.
D'autres périphériques intermédiaires apparaissent également dans les magasins. Sont proposés des claviers en périphérique externe à connecter aux tablettes ; des tablettes dites « hybrides » qui sont en fait des ordinateurs portables dont l'écran est escamotable ; des ordinateurs portables dits « transformables » ou « convertibles » dont l'écran peut se replier grâce à des charnières pour adopter un format tablette. Du côté des téléphones, il s'en vend avec des écrans toujours plus grands, parfois accompagnés d'un stylet. Pour les écrans supérieurs à 5 pouces de diagonale, on les dénomme « phablettes », mot-valise composé de « phone » et « tablette ». Pour les tablettes on observe la tendance inverse : le format 7 pouces de diagonale devient ainsi de plus en plus populaire. Résumons tout cela avec une illustration.
Ceci montre clairement que la révolution mobile est passée et que l'heure est aujourd'hui à la continuité d'usage. Les foyers français sont suréquipés et disposent d'ores et déjà d'un grand nombre d'écrans : 6,3 en moyenne d'après une étude AFP de février 2013. 74% des foyers possèdent à la fois un téléviseur, un ordinateur (desktop ou laptop) et un téléphone mobile. Et si l'on sélectionne ceux dont le chef de foyer a entre 25 et 50 ans, ce chiffre monte à 9 écrans en moyenne à la maison.
Cet engouement pour l'équipement high-tech s'accompagne naturellement d'exigences de plus en plus strictes de la part des utilisateurs en ce qui concerne les applications et les services. Les consommateurs choisiront de préférence des services dont ils peuvent profiter depuis le plus grand nombre de leurs équipements. Ils s'attendent à pouvoir continuer à utiliser un service en passant d'un équipement à un autre ou en renouvelant leur matériel. C'est pourquoi il devient très préjudiciable de ne pas être en mesure de proposer un service grand public sur certaines classes d'appareils ou de systèmes.
Et qu'en est-il des nouveaux périphériques connectés à venir ? Les tiroirs débordent d'idées d'inventeurs. Les montres et les lunettes connectées sont déjà là , avec des produits comme Google Glass ou Samsung Galaxy Gear. Le vêtement connecté ou « cloud clothing » occupe beaucoup les départements Recherche & Développement de plusieurs grandes compagnies. Et ce sont tous les équipements de la maison (domotique, cuisine, électroménager) qui se connectent peu à peu au réseau Internet du domicile. Tous ces nouveaux usages restent encore à déterminer, mais il faut néanmoins les anticiper et se tenir prêts.
C'est dans ce contexte à la fois prospère et intransigeant que se retrouvent aujourd'hui les fournisseurs de contenu et de services sur Internet. Alors de quelles solutions disposent-ils pour être présents sur tous ces appareils afin de s'assurer une bonne visibilité et un maximum d'utilisateurs ? Cet ouvrage vous en présente une : l'approche One Web, un site web unique et ubiquitaire.
III. L'approche One Web▲
La fracture technologique introduite par la révolution mobile a donné naissance à ce qu'on a nommé le « Web mobile ». L'approche One Web tente de recoller les morceaux.
Pour être présent sur tous les fronts numériques, plusieurs stratégies d'approche ont émergé. Certaines ont été plus populaires que d'autres selon leur temps. Nous allons passer en revue les trois principales puis j'expliquerai pourquoi avoir sélectionné la dernière, l'approche One Web, pour cet ouvrage.
III-A. Un site web desktop et des applications natives pour les smartphones et tablettes▲
Par application native, on entend une application développée spécifiquement pour une plate-forme, souvent dans un langage et via un kit de développement (SDK) qui lui est propre. Les entreprises ont largement fait ce choix au début de la démocratisation des smartphones, entre 2007 et 2010, pour porter leurs services existants vers la mobilité. Si un service disposait d'un bon site web abouti et fiable pour un usage desktop, il pouvait être considéré comme fastidieux et peu prudent de vouloir adapter ce site web pour un usage mobile. Développer une application native avec le SDK de la plate-forme ciblée permet de repartir de zéro et de repenser complètement le service spécifiquement pour cette plate-forme.
Cependant, ce choix de stratégie est beaucoup moins évident aujourd'hui. En effet, celle-ci impose de développer autant d'applications natives que de plates-formes ciblées. Malgré la domination actuelle d'Android, il serait dommageable d'exclure les autres plates-formes comme iOS, Windows Phone ou BlackBerry OS. Et ce sont autant d'applications qu'il faudra gérer, tester et maintenir. Se pose aussi le problème de la fragmentation de versions : tous les téléphones ne font pas tourner la même version du système, et il n'est pas rare de devoir faire évoluer les applications à l'arrivée d'une nouvelle version majeure d'un système. Rappelons également qu'il s'agit d'un marché extrêmement concurrentiel et instable, et que l'on ne peut pas raisonnablement se baser sur les parts de marché actuelles pour parier sur le nombre d'utilisateurs d'une plate-forme les années suivantes. Preuve en est avec la croissance phénoménale d'Android et la chute de BlackBerry OS.
Les constructeurs mettent en avant leurs magasins d'applications et la grande facilité avec laquelle l'utilisateur peut ajouter et conserver un service dans son téléphone. En 2007, l'iPhone d'Apple était de loin le modèle le plus populaire. Or, les applications téléchargées s'affichent sur l'écran d'accueil sur iOS. Disposer d'un affichage du service sur l'écran d'accueil des téléphones des utilisateurs est très séduisant et considéré comme une aubaine pour les équipes marketing.
III-B. Un site web version desktop et un site web version mobile▲
Précéder l'URL d'un site par « m. » pour un accès optimisé mobile, ou changer l'extension du nom de domaine par « .mobi » cela vous rappelle peut-être quelque-chose. L'idée est de proposer une copie d'un site web existant adapté aux petits écrans et au tactile, avec un contenu et un style extrêmement épurés. Ce site web mobile, bien que distinct du site d'origine en de nombreux points, est souvent rattaché au même nom de domaine et utilise le même back-end que son grand frère desktop.
Avant les smartphones, la plupart des téléphones mobiles disposaient de navigateurs utilisant le protocole WAP. Développer un site distinct à ce format était alors la seule option envisageable. Quand les navigateurs mobiles furent suffisamment évolués pour interpréter du HTML 4, cette approche de site distinct ne fut pas abandonnée pour autant. En effet, les résolutions d'écran restaient alors trop faibles et les téléphones trop peu performants pour qu'on leur présente les sites desktop.
Pour guider l'utilisateur vers cette version spécifique au mobile, on détecte l'usage d'un téléphone mobile par différents moyens en JavaScript lors de la connexion au site. L'utilisateur se voit alors proposer de basculer sur la version mobile du site. Dans le pire des cas, il n'a parfois pas le choix, la redirection étant automatique. Or aujourd'hui, il n'est pas rare de voir un utilisateur de smartphone préférer consulter la version desktop jugée plus jolie, plus riche en contenu et davantage maintenue que la version mobile. Les navigateurs web des smartphones sont maintenant extrêmement perfectionnés, et proposent de nombreuses fonctions comme le zoom assisté pour rendre plus facilement consultable les sites prévus à l'origine pour un affichage desktop.
Parallèlement, les périphériques intermédiaires sont venus semer la zizanie dans cette approche. Utilisateur d'une phablette, quelle version suis-je censé choisir ? Il ne faut plus raisonner en fractionnant mobile et fixe à l'ère de la continuité d'usage. Il existe certes encore un certain nombre de téléphones mobiles basiques pour lesquels ces versions mobiles seront davantage adaptées, mais il s'agit d'une proportion trop faible et trop décroissante pour que développer une version spécifique au mobile vaille encore le coup. C'est pourquoi ce genre de sites mobiles est progressivement abandonné et remplacé par des refontes des sites Web desktop d'origine pour essayer de mieux s'accorder à la consultation mobile. Ce qui nous amène à l'approche One Web, sur laquelle est basé cet ouvrage.
III-C. Un site web unique conciliant tous les usages▲
Oui, il est aujourd'hui possible de concevoir un et un seul site web proposant une expérience utilisateur convaincante pour toutes les classes de périphériques vues précédemment.
D'aucuns diront que cette promesse a déjà été faite par le passé et qu'il y a eu de quoi être désappointé. Le choix du Web a souvent été critiqué pour les problèmes de performance. Pourtant, les différents navigateurs se sont livrés à la course aux performances pour tenter de convaincre le public par les chiffres. Les moteurs de rendus ont été optimisés et peuvent exploiter l'accélération matérielle pour composer et dessiner plus rapidement les pages web. Entre 2008 et 2013, Mozilla, Google et IE ont tous annoncé des gains énormes pour leurs moteurs d'exécution JavaScript : entre 500 et 2 000 % selon les benchmarks.
Si JavaScript en tant que langage interprété ne sera jamais en mesure de rivaliser avec les autres langages compilés, cette différence est devenue suffisamment mince pour ne plus justifier à elle seule les ralentissements de certains sites web. Dans la majorité des cas, la faute revient davantage à de gros défauts d'optimisation de la part des développeurs ; JavaScript est un langage de script simple et haut niveau qui n'encourage pas spécialement à l'optimisation, surtout avec l'abstraction apportée par des frameworks comme jQuery.
Outre les gains de performance des moteurs de rendus et moteurs d'exécution JavaScript, la situation s'est considérablement améliorée depuis cinq ans grâce à plusieurs facteurs :
- les améliorations des navigateurs en support, conformité des standards et en ergonomie ;
- les nombreux ajouts aux langages structurants du Web, HMTL, CSS et JavaScript, que vous aurez l'occasion de découvrir dans les prochains chapitres ;
- l'évolution des réseaux mobiles avec la 3G/3G+/4G, ainsi que la connectivité WiFi intégrée directement à un nombre croissant de périphériques ;
- la montée en puissance du hardware des téléphones mobiles.
Tout l'intérêt de cette approche est bien sûr d'augmenter le nombre d'utilisateurs ciblés tout en centralisant la gestion et le contenu au sein d'un seul service. Un seul site à maintenir et à faire évoluer, c'est l'assurance d'une homogénéité et donc d'une plus grande maîtrise de la qualité de service. Avoir un seul point d'entrée permet également aux consommateurs de plus facilement identifier et partager un service.
Mais concilier les usages, qu'est-ce que cela signifie ? Avant tout il est essentiel de préciser qu'un site web unique n'est pas un site web uniforme. Les usages diffèrent selon la classe de périphérique utilisé par vos clients, car le contexte d'utilisation n'est pas le même. Il s'agit d'adapter le site à ces changements de contexte : c'est ce qu'on appelle la contextualisation. On peut faire une analogie avec une chaîne de magasins disposant de grands hypermarchés et de petites boutiques. Les clients retrouveront la même identité visuelle et la même qualité de service. Mais la taille, l'organisation et le contenu des rayons seront adaptés au contexte, car un client ne se rend pas dans une petite boutique ou dans un hypermarché avec les mêmes intentions.
Cette idée de concilier les usages autour d'un seul site, d'une seule URL, c'est ce qu'on appelle l'approche One Web. Mais ce nom « One Web » est en soi un pléonasme. Car le Web a été créé dans ce sens : pour rendre accessible universellement du contenu. Ce qu'on a appelé « Web mobile » n'a aucun sens pratique. Les mobiles ont aujourd'hui accès au même web que les ordinateurs fixes, il s'agit des mêmes langages, des mêmes protocoles, des mêmes URL. C'est donc juste un jeu d'esprit qui a fragmenté le Web en deux au mépris de la philosophie dans laquelle le Web a été inventé.
The primary design principle underlying the Web's usefulness and growth is universality. (…) it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. (5)
What's very important from my point of view is that there is one web … Anyone that tries to chop it into two will find that their piece looks very boring. (6)
Tim Berners Lee, inventeur du World Wide Web
Derrière cette approche conceptuelle, il existe différentes approches méthodologiques pour permettre aux développeurs de s'adapter de manière pratique à ce mode de pensée. La plus connue est le concept « Mobile First » inventé par Luke Wroblewski, ancien architecte design chez Yahoo. Il consiste à concevoir son site en le pensant prioritairement pour un usage mobile. Ainsi, des efforts supplémentaires sont faits en matière de performance, d'épuration de contenu et de flexibilité. Et pour les clients desktop, selon l'adage « qui peut le plus, peut le moins », l'expérience reste satisfaisante. On pourra également pour ces derniers venir rajouter du contenu et des éléments plus complexes en suivant un principe d'amélioration progressive.
Cette méthodologie a pour avantage d'aller à contre-courant des vieilles méthodes, de forcer les designers et développeurs à sortir de leur cadre habituel pour leur imposer les enjeux et contraintes de l'usage mobile. Néanmoins, elle ne fait que retourner le problème au lieu de le résoudre. Car en pensant de cette manière, on continue à fragmenter le Web, à se confronter aux mêmes obstacles, à ne pas savoir quoi faire avec les périphériques intermédiaires.
La première chose à faire pour bien comprendre l'approche One Web est de ne plus se concentrer sur le conteneur mais sur le contenu. Puis d'avoir conscience que ce contenu, quel qu'il soit, sera amené à être présenté sous des formats, situations et environnements très divers que vous ne pourrez pas tous appréhender. Plutôt que de chercher un contrôle total du rendu de votre site, présentez-le sous une forme simple puis agrémentez-le de petits plus qui amélioreront globalement l'expérience utilisateur.
IV. Continuer la lecture▲
Retrouvez la fiche du livre sur developpez.com et sur le site d'EyrollesCréer un seul site pour toutes les plates-formes - Aux sources des approches responsive et adaptative.
Une critique du livre par vermine est également disponible ici
Commentez cet extrait sur le forum. 1 commentaire 