Le responsive design en 4 questions (1/2)

Dans le (petit) monde des webmasters et webdesigners, on entend beaucoup parler depuis quelques temps du responsive design (ou design adaptif en français). Cette notion est même arrivée jusqu’aux oreilles de certains de nos clients, qui nous demandent, lors de la création de leur nouveau site, de le réaliser selon cette technique. Alors, comme vous finirez bien par en entendre parler, autant vous expliquer ce que c’est, à quoi ça sert, comment ça marche, à quoi ça ressemble et combien ça coute.

1. Le responsive design, c’est quoi? Et à quoi cela sert ?

Le responsive design est un ensemble de techniques et de procédés qui ont pour objectif de rendre un site internet visible et lisible sur n’importe quelle taille d’écran.

La question ne se posait pas en 1998 lorsque nous avons créé nos premiers sites web. En effet, tous les écrans étaient des 15 pouces à tube cathodiques, offrant une résolution de 800×600 pixels. Mais depuis, les tailles et les résolutions se sont multipliées. On surfe sur son smartphone, sur sa tablette, sur son ordinateur portable et même sur sa télévision HD (sans oublier les écrans Macbook Retina, dernière trouvaille d’Apple qui ne simplifie par les choses!).

Comment faire pour garantir une lisibilité sur des écrans dont la résolution varie du simple au décuple ? C’est tout l’enjeu du responsive design. Jusqu’à présent, la pratique en vigueur consistait à développer une version du site pour les écrans d’ordinateurs, et une version dite “mobile”, adaptée aux écrans de téléphones portables. Aujourd’hui, le challenge consiste à ne créer qu’une seule version du site, en faisant en sorte qu’il s’adapte et se redimensionne à la taille de l’écran.

2. Comment ça marche ?

C’est là que ça se corse ! Parce que le responsive design n’est pas un langage ou une technologie mais un ensemble de pratiques et de techniques encore récentes qui évoluent chaque jour.

Pour commencer, on définit des tailles d’écran type. Le plus souvent, on utilise trois voire quatre “breakpoints”:

  • Supérieur à 940px de large pour les écrans de bureau
  • Entre 768 et 940px de large pour les tablettes en mode portrait et les netbooks.
  • Entre 380px et 767px de large pour les smartphones en mode paysage
  • Moins de 380px de large pour les smartphones

Ensuite, on va indiquer dans le code de la feuille de style CSS (le fichier qui définit la mise en page et en forme du site) des largeurs de blocs, des tailles de texte, des dimensions etc. différentes selon la taille de l’écran du lecteur. En affichant une page du site, le navigateur va aller chercher les informations correspondant à se résolution.

Mais au delà de la pure mise en forme, on peut travailler sur des contenus éditoriaux différents selon les supports. On peut par exemple supprimer l’affichage de certaines informations sur certaines tailles d’écrans.
Cela implique de se pencher sérieusement sur l’expérience utilisateur pour imaginer ce qu’un internaute va venir chercher sur la page selon qu’il surfe sur son smartphone ou son ordinateur. Par exemple, dans le cas d’une association, on peut penser que le lecteur qui visite le site depuis son mobile pourrait chercher soit l’adresse, soit l’actu récente de l’association. Est il vraiment nécessaire d’afficher les statuts, le bulletin d’adhésion et la liste des membres du conseil d’administration ?

Lire la suite du dossier consacré au webdesign