Le Responsive Web Design, une bonne résolution pour l’avenir des sites

par Pascal Waeber, web publisher, Ci-UNIL

« C’est un site spécial, tu peux le voir sur ton iPhone sans avoir besoin de zoomer », voilà la définition assez juste du responsive web design qu’une écolière de 12 ans donnait à sa copine dans le métro.


© mpfphotography – Fotolia.com

Du haut de ses 12 ans, cette fille avait parfaitement identifié le problème de 95% des sites web actuels : ils sont inadaptés à une consultation aisée depuis un smartphone, un mode d’accès pourtant en forte et constante augmentation d’après toutes les statistiques. On vit ainsi un étonnant paradoxe :

  • notre smartphone devient chaque jour un peu plus notre 2ème bureau, qu’il s’agisse d’y lire nos emails ou d’y acheter un billet de train,
  • et pourtant le web y reste peu agréable à consulter, malgré le fait qu’il nous donne un accès potentiel à un million de fois plus d’informations que l’ensemble des « apps » disponibles pour iOS et Android.

Comment expliquer cela ? Un peu d’histoire du web et du mobile vont nous permettre de le comprendre.

Le web, élastique par nature, et emprisonné dans le carcan de l’imprimé

A sa naissance au début des années 90, le web avait pour caractéristique de s’adapter automatiquement à la largeur de la fenêtre du navigateur (exemple), et c’était bien ainsi que l’avait conçu son inventeur Tim Berners Lee. Mais l’histoire de la communication a plusieurs fois montré qu’à l’apparition d’un nouveau média, il existait une forte tendance à lui faire reproduire les codes de fonctionnement d’anciens médias existants. Et c’est ce qui arrivé au web, souvent pris en main par des personnes venues du monde de la presse, qui y ont rapidement imposé une mise en page identique à celle utilisée sur papier, donc des colonnes de largeur fixe, alignées au pixel près. Leur souci principal était avant tout de concevoir des sites qui conservent rigoureusement la même apparence sur différents navigateurs (Firefox, Internet Explorer).

Dans les année 2000, on a assisté aux débuts du web sur téléphone mobile. Ces débuts assez timides reflétaient bien l’écart technique énorme qui séparait alors les ordinateurs des téléphones, en termes de résolution d’écran, de puissance de calcul, de bande passante ou de maniabilité. Ceci explique qu’à cette époque, pour les rares sites qui souhaitaient être aussi accessibles sur des téléphones, on créait une deuxième version distincte, un « site pour mobiles » qui ne contenait qu’une fraction du contenu du site original. A cette époque, le maître mot était « context is king », pour illustrer le fait qu’un utilisateur du web mobile était forcément pressé, et qu’un site réduit au strict minimum était la seule solution envisageable pour son écran microscopique et son réseau à faible débit.

Puis l’iPhone est arrivé en 2007, suivi de nombreux clones. Avec des écrans tactiles, une puissance de calcul nettement accrue et le Wi-Fi en prime, cette nouvelle génération de mobiles a rapidement changé la perception de la navigation web sur un téléphone. Zoomer en écartant le pouce et l’index, défiler verticalement d’une pichenette, le « vrai web » avec ses sites complets devenait enfin un peu plus accessible.

Mais la rapide augmentation de la consultation du web sur ces nouveaux smartphones posa un dilemme aux concepteurs de sites, déçus de n’avoir à proposer que :

  • d’un côté des sites « classiques », conçus pour les ordinateurs, au contenu complet, mais au final pas si pratiques d’accès sur un petit écran (devoir zoomer sur chaque nouvelle page affichée devient vite fastidieux)
  • de l’autre côté des sites « pour mobiles » au contenu estropié, ou alors des applications à développer spécifiquement pour une plate-forme, ce qui nécessite dans les deux cas une conception et un maintenance distinctes, donc des coûts.

Les habitudes de consultation ont quant à elles rapidement évolué : il est aujourd’hui très courant d’accéder à internet sur petit écran (smartphone ou tablette) depuis son canapé ou sa salle de conférence, en délaissant le traditionnel écran de bureau éloigné pourtant de quelques mètres seulement. De « context is king », on a passé à « content is king », ce qui signifie que les visiteurs des sites veulent désormais un accès à la totalité de leur contenu, indépendamment de la taille de leur écran.

Il faut ajouter à cela l’émergence récente de multiples variantes dans les résolutions (écran normal ou à haute densité de pixels, comme le retina d’Apple) et les tailles d’écran (smartphones normaux ou surdimensionnés, tablettes 8 pouces ou 10 pouces).

Bref, il était devenu évident que le triptyque « sites classiques + sites mobiles + applications » n’allait plus pouvoir répondre à une demande de plus en plus fragmentée. Le terrain était mûr pour l’idée du site unique qui s’adapte à toutes les résolutions d’écran, version modernisée du web fluide des débuts. Donc bienvenue au Responsive Web Design, qui marque le retour sur le devant de la scène de certains web designers peu écoutés auparavant, qui ont toujours défendu les préceptes de fluidité et d’adaptabilité des débuts du web.

Responsive Web Design

Ce terme fut inventé par Ethan Marcotte, qui fit l’inventaire des différentes méthodes existantes pour adapter les sites à toutes les résolutions dans un article en 2010 et un livre en 2011. Il fut le premier à décrire en détail l’utilisation conjointe des outils qui permettaient d’arriver à ce résultat :

  • les media queries, un composant des feuilles de style qui modifie la largeur et la disposition des colonnes en fonction de la largeur de la fenêtre du navigateur
  • le concept de fluid grid, qui permet d’adapter la taille des polices en fonction de celle de l’écran
  • les flexible images, qui représentent la possibilité de varier la taille et la disposition des images en fonction du contexte.

Le RWD (c’est ainsi qu’on l’abrège) connaît rapidement le succès dans la communauté du web design, au point d’être actuellement un sujet de discussion incontournable pour tous les designers qui s’informent des évolutions dans ce domaine. Il s’est imposé en deux ans comme un véritable « oeuf de Colomb » face au défi que représentent les multiples tailles d’écrans existantes et à venir.


Les media queries permettent d’adapter l’affichage à toutes les largeurs d’écran.

Son point fort le plus immédiatement visible : une expérience utilisateur reconnaissable sur tous les écrans, puisque l’atmosphère graphique est identique pour toutes les résolutions (logo, couleurs, polices). Une galerie d’exemples de réalisations RWD illustre fort bien cet aspect : mediaqueri.es .


Le responsive web design introduit de nouvelles conventions graphiques, comme l’îcone « menu » stylisée.

Si le RWD est une solution si géniale, ne serait-il pas logique qu’une majorité de sites l’utilisent déjà, simplifiant ainsi la vie de leurs visiteurs mobiles ? Eh bien disons que les choses ne sont pas si simples que cela. Il ne s’agit pas d’une science exacte avec des recettes déjà prêtes applicables à tous les sites en un clic de souris. Certaines techniques du RWD sont complexes à mettre en oeuvre, et font encore largement débat entre leurs différentes variantes. Par exemple sur les avantages et inconvénients comparés des différents types de menus ou des nombreuses méthodes pour traiter les images.

En effet, le passage au RWD ne présente pas du tout le même niveau de complexité selon

  • qu’on doit créer un nouveau site avec WordPress, le système de gestion de contenu pour lequel on trouve des dizaines de thèmes graphiques responsive
  • ou qu’on doit modifier le code HTML et la feuille de style d’un site existant depuis plus de cinq ans, comportant plusieurs centaines de pages et des contenus parfois impossibles à afficher sur petit écran (tableaux à 6 colonnes, etc.).

A l’UNIL, c’est justement l’un des défis posés aux personnes qui s’occupent de conception de sites web. C’est Loïc Cattani, spécialiste multimédia à Unicom, qui a fait connaître le concept de RWD à ses collègues d’Unicom et du Centre informatique en 2011, et depuis lors, lectures, conférences et réflexions sont au menu pour aboutir dans le futur à une « responsivisation » de nos sites Jahia. Cette phase est longue et complexe, au vu du nombre de points à prendre en compte. Pour les sites WordPress, plus petits, la situation est plus simple, puisque de nombreux thèmes graphiques responsive développés par la communauté sont déjà disponibles.

Mobile First

Maintenant que nous vous avons expliqué que le RWD est une solution d’avenir qui s’imposera largement au cours des prochaines années, il est temps de vous dire qu’il ne s’agit en fait que de la pointe de l’iceberg dans la somme d’efforts à accomplir pour optimiser les sites pour une consultation mobile !

Explication : le RWD améliore l’affichage sur tous les écrans, mais ne permet que peu d’influer sur la performance. Or la différence de bande passante entre les connexions Ethernet / Wi-Fi / ADSL et les connexions mobiles 3G demeure bien réelle. Ceci a pour conséquence que si vous consultez sur votre smartphone le même site responsive à partir d’une borne Wi-Fi de l’UNIL ou à partir d’un arrêt de car postal au fin fond du Lötschental, la vitesse d’affichage des pages ne sera pas du tout la même. La raison en est simple : le RWD permet de jouer essentiellement sur l’affichage des éléments de contenu de la page, mais très peu sur le fait de les charger ou non dans votre navigateur. A quoi bon charger une image de 500 KB si c’est juste pour l’afficher aux dimensions d’un timbre-poste, alors qu’une vignette de 15 KB ferait tout aussi bien l’affaire ?

C’est précisément la question que s’est posée Luke Wroblewski, à laquelle il répondit brillamment par une conférence dès 2010 et un livre en 2011. Son idée est la plus logique qui soit, mais encore fallait-il y penser :

  • Avec le mobile last (= conception web traditionnelle), on envoie à tous les visiteurs une page web complète, même si les utilisateurs mobiles n’en exploiteront qu’une fraction.
  • Avec le mobile first, on envoie à tous les visiteurs une page légère, optimisée pour mobiles, tout en sondant au passage les capacités de leur navigateur et de leur connexion. Selon la réponse reçue, le serveur envoie conditionnellement tel ou tel élément : petite image ou grande image, par exemple.

C’est donc une logique d’amélioration progressive qui doit prévaloir, et permettre aux visiteurs de charger des pages dont le poids en KB et en nombre de requêtes dépendra de leur connexion (bas, moyen ou haut débit). Le RWD fait évidemment partie de cette logique, aux côtés d’autres méthodes aux acronymes encore plus barbares, mais techniquement irremplaçables. Citons par exemple le RESS (Responsive Web Design + Server Side Components) ou le LESS, un pré-processeur CSS sophistiqué.

Pour parachever le tableau, n’oublions pas que tous ces ingrédients doivent être cuisinés dans de la belle vaisselle, donc dans des sites utilisant HTML5 et CSS3.

Le Centre informatique et Unicom ont aussi mis le Mobile First au menu de leurs projets web futurs. Mais tout comme le RWD, les méthodes mises en oeuvre pour le dialogue entre le client et le serveur sont encore jeunes, et actuellement en phase d’évolution rapide. Il faudra donc du temps pour les tester, les sélectionner et les mettre en oeuvre dans nos sites.

Une certitude est d’ores et déjà actuelle, et il ne s’agit aucunement de science-fiction : l’avenir du web sera de plus en plus mobile, et l’optimisation des pages envoyées en fonction du client se généralisera dans les années à venir.

Ces réflexions ont déjà produit un premier résultat concret : CiNN, que vous lisez en ce moment, est désormais responsive.

,