Responsive Web Design – 1ère Partie

Introduction

Qu’est-ce qui se cache derrière le « Responsive Design » ? C’est en partant des fondations de cette nouvelle approche que l’on peut comprendre pourquoi et comment cela change complètement la manière de designer pour le Web. L’engouement autour de cette méthode est lié au changement du marché des périphériques pour consulter le Web, ce qui en fait un sujet incontournable pour les designers. Pour les intégrateurs, les solutions existent et sont simples à appréhender.

Les origines

Elles remontent à un article de John Allsop écrit en 2000 dans lequel il présente sa vision du Web de demain . Mais il faut attendre dix ans pour qu’un définition claire, code à l’appui, soit donnée. C’est ce qu’a fait Ethan Marcotte en mai 2010 dans son article « Responsive Web Design » dans lequel, comme il le déclarera lui même plus tard, il concrétise les notions abordées par John Allsop en 2000.

Flexibilité

Pour John Allsop, la flexibilité du format Web doit être vu comme une avantage et non plus comme une contrainte. Pour se faire comprendre, il utilise un rapprochement très intéressant qu’est celui de la radio parente de la télévision et de l’imprimerie parente du Web. Les premières émissions de télévision étaient simplement des émissions radio que l’on filmait. Partant de ce constat, la perspective concernant le média Web change : on pourrait croire que celui-ci est aujourd’hui mature, mais lorsque l’on observe le nombre de conventions qu’il emprunte encore à l’imprimerie sans recul, on revoit sa position sur le sujet. En effet, pour produire des interfaces facilement consultables par les utilisateurs, les designers se sont appuyés sur leurs compétences sur format papier. Hors celui-ci est par nature très strict : la taille des pages est définie et comme il est impossible d’interagir avec son contenu, celui-ci reste figé dans la page. Les designers ont donc pour habitude de travailler dans un cadre fixe : il s’agit de contrôler pour chaque page tout ce que perçoit et consulte l’utilisateur. Le designer attend alors des intégrateurs que ceux-ci reprennent exactement le modèle qu’il leur a donné. Il en est de même pour les clients qui ne comprennent pas toujours pourquoi le rendu final de leur application n’est pas en tout point identique à ce que leur avait présenté le designer. Hors un des fantastiques avantage du Web, c’est le dynamisme possible du contenu de ses pages. Avantage que l’approche conventionnelle de l’expérience utilisateur ne permet pas de bien exploiter.

Adaptabilité

Ethan Marcotte reprend l’idée que présente John Allsop et lui donne un application concrète. Certaines contraintes techniques de 2000 ne sont plus aussi présentes, ce qui ouvre de nouvelles possibilités. Les navigateurs implémentent les nouveaux standards de présentation (CSS) avec toujours plus de soin. La dernière version de la norme CSS introduit les « media queries » qui permettent de spécifier le style à appliquer en fonction de certains critères d’affichage de la page Web : taille de la fenêtre, densité de pixel, etc. Ethan Marcotte en fait un des éléments principaux du « Responsive Web Design » permettant ainsi, enfin, la mise en place de l’adaptabilité des pages Web. Pourtant en JavaScript, il est possible de récupérer ces critères depuis longtemps puis de changer l’affichage dynamiquement. L’utilisation des « media queries » est bien plus simple et propre mais n’offre pas de nouvelles possibilités. Pourquoi, alors, le Responsive Design et la réalisation d’interface de manière flexible et adaptative est elle d’actualité ?

Le choc smartphone

Afin de pouvoir travailler dans un cadre fixe, comme pour le format papier, il fallait convenir d’une taille cible puis de s’y contraindre. Cette démarche s’accompagnait généralement d’une étude pour connaître la taille des écrans les plus utilisés. Les utilisateurs minoritaires qui naviguaient sur un écran plus petit ou plus grand étaient alors tous simplement ignorés.

Une version spécifique

Avec l’arrivée des smartphones, le besoin exprimé a été dans un premier temps de réaliser des versions dédiées des applications et sites Web. Il s’agissait de la suite logique du « Specific Design ». La version « iPhone », les smartphones « Android » n’étant pas encore très présents sur le marché, devait suivre un design spécifique qui reprend les normes et conventions du périphérique, un véritable casse-tête pour la mutualisation du contenu. De plus, les architectures en place proposaient rarement des services Web pour permettre à plusieurs applications d’interagir avec le système. L’arrivée des smartphones a donc introduit les prémices de la mise en place d’une architecture orientée services (SOA).

Et de deux

Le marché évoluant, la part de marché des utilisateurs ayant un smartphone sous Android ne pouvait plus être ignorée. Il fallait trouver une solution pour ces utilisateurs car les designs Web en place suivaient les préconisations d’Apple concernant la réalisation d’applications natives. Au delà du style, la compatibilité surtout n’était pas optimum. Il y a donc eu une phase d’adaptation pour faire que la version mobile supporte à la fois les environnements « iOS » et « Android ». La charge de travail pouvait être assez conséquente et la plus-value perçue très minime. La stratégie utilisée pour aborder les smartphones commençait à être remise en question.

Et de trois … vous êtes sûrs ?

La stratégie du « Specific Design » vola définitivement en éclat avec l’arrivée des tablettes et de Windows Phone. Il n’était plus question de produire encore une énième version du site ou de l’application. Si on additionne les coûts de développement des nouvelles solutions aux coûts de maintenance des anciennes, cette stratégie devient encore plus absurde. Car même pour des très grands noms qui n’ont pas de soucis de retour sur investissement, la complexité de gestion devient bien trop importante. Une solution à toutes ces problématiques est donc bien de suivre la nature de ce media qu’est le Web et de proposer des designs flexibles et adaptables comme l’ont suggérés John Allsop et Ethan Marcotte. Oui mais comment ?
Article paru dans l’édition d’avril 2013 du magazine Programmez !