… ou presque ! Dans le jargon du métier on parle de responsive web design, ou en bon françois de web design adaptatif. Et vous allez voir que le titre de ce billet n'est pas si tiré par les cheveux qu'on ne pourrait le croire !
Mais avant de vous expliquer ce que voudrait dire ce "responsive", voyons voir de quoi il retourne quand on parle de web design. On voit bien qu'il s'agit de design pour le web (oui, je sens que vous me remerciez pour cet éclairage), mais pour être plus précis le web design dépasse la seule conception graphique et englobe plus généralement celle de l'interface (ce qui n'est pas tout à fait la même chose, vous en conviendrez).
Le web design repose sur quatre grands piliers (merci à Wikipédia pour nous avoir soufflé sa définition) :
- l’architecture interactionnelle,
- l’organisation des pages,
- l’arborescence du site,
- la navigation dans le site web.
Maintenant que nous nous sommes chauffés les mandibules avec ce premier élément de réponse, rentrons dans le vif du sujet...
Le pourquoi du comment
Si on devait résumer le responsive web design à deux mots, ce serait sans doute ceux-ci : réactivité et flexibilité. Ce "nouveau" concept n'est d'ailleurs pas uniquement réservé au monde du web : on parle aujourd'hui d'art interactif et de responsive architecture (pas pour le net mais pour les bâtiments cette fois-ci). L'idée sous-jacente de toutes ces nouvelles tendances est la même : l'utilisateur est au centre des préoccupations, et son environnement s'adapte à lui plutôt que l'inverse.
Et dire qu'il y a quelques années encore, on devait se lever pour changer de chaîne sur notre bonne vieille télé (et il fallait tomber pile poil sur la bonne fréquence) ! D'ailleurs, on pourrait très bien imaginer un système où le spectateur aura juste à penser à ce qu'il souhaite regarder pour que le programme voulu s'affiche tout seul. Je vous vois vous marrer doucement, mais nous n'en sommes pas si loin que ça...
Bref, au-delà du fait que nous devenons progressivement de grosses feignasses, le responsive web design répond à un besoin réel : internet est un univers mouvant, dont les usages, les supports et les habitudes de consommation évoluent et se transforment à toute vitesse. Qui aurait imaginé l'explosion des smartphones il y a quelques années ? Et c'est sans parler des tablettes...
Aujourd'hui, on navigue avec nos doigts, on joue vraiment dans un jeu (avec la Kinect), on peut tester des meubles ou essayer des habits chez soi avec la réalité augmentée... Bref, les films de sciences fictions n’étaient finalement pas si farfelus qu'on le croyait...
Prendre le train en marche
Je crois que nous sommes tous d'accord sur ce point : que le web du futur soit "web 3.0" ou "web au carré" (web squared), la mobilité en sera l'une des composantes majeures. Pour autant, on continuera à cumuler tous les supports possibles et imaginables pour se connecter sur le net, en fonction du contexte. On utilisera son iPhone en attendant le métro pour aller au boulot, son ordi au travail, et son iPad en rentrant chez soi.
Mais voilà, tout ceci est très problématique pour ceux qui veulent communiquer sur la toile : comment faire pour que son site web soit visible de tous, sur n'importe quel support et quelle que soit la taille de l'écran (hé oui ! Tous les smartphones n'ont pas la même taille, ni les tablettes ou les écrans d'ordinateurs).
L'une des solution est de créer une déclinaison propre à chaque support (un pour l'ordi, un pour la tablette, un pour l'iphone), ce qui est coûteux et chronophage (hop, une modification effectuée sur l'une des versions devra l'être sur les autres). L'autre possibilité, c'est, je vous le donne en mille... le responsive web design mesdames et messieurs !
Cette solution repose essentiellement sur :
- des grilles fluides : pour faire simple, plutôt qu'une organisation figée des pages du site (telle taille et pis c’est tout), celles-ci s'adapteront automatiquement à l'espace qui leur sera accordé;
- des images flexibles : même chose pour les images dont la taille, mais aussi la disposition, s'ajusteront à l'écran utilisé;
- les requêtes de média qui permettent de vérifier quel est le support utilisé (ou plutôt la taille de son écran) et de s'adapter en conséquence.
Le responsive web design, c'est donc des contenus qui s'adaptent à leur environnement, au grand plaisir des inter-mobinautes. C'est n'est d'ailleurs pas seulement une question de taille de page flexible ou de texte qui s'agrandit ou non selon l'écran utilisé, c'est aussi une nouvelle manière de miser sur des interfaces ergonomiques : le responsive web design permet au contenant d'être réactif en faisant disparaitre ou apparaitre des éléments pour adapter la navigation au support (on pourra laisser plus d'éléments sur un site web "classique" et se concentrer sur l'essentiel pour sa version mobile).
Un petit exemple ? Jetez un œil à ce site, qui est non seulement très chouette mais aussi "responsive".
Mais pas d'emballement, car rien n'est parfait dans ce bas monde ! Les possibilités techniques offertes par le responsive web design restent à parfaire... Et puis il faut aussi (et surtout) que nos chers navigateurs, qui ont toujours mis du temps à suivre les innovations, nous permettent d'utiliser pleinement le potentiel du responsive web design. Sachant que tout reste à faire en termes de mobilité (seulement un site web sur deux est accessible sur smartphone), nous risquons d’avoir du pain sur la planche... et tant mieux !