22/02/2012
Comment rendre une interface lisible sur une multitude de petits écrans tout en restant agréable sur les grands ? La réponse est le Responsive Web Design.
Jusqu’à il y a peu, les tailles d’écrans augmentaient d’année en année. Pour les concepteurs de sites web il “suffisait” d’élargir les interfaces au fil du temps. Puis sont arrivés les iPad et autres smartphones qui commencent sérieusement à prendre de l’importance, multipliant par autant les tailles d’écrans, de petits écrans. L’équation devenait compliquée pour les webdesigners. Comment rendre une interface lisible sur une multitude de petits écrans tout en restant agréable sur les grands ? La réponse est le Responsive Web Design.
Le Responsive Web Design (ou RWD) regroupe une série de techniques permettant de rendre compatible un site web avec toutes les tailles d’écrans, des plus petits (comme ceux des iPhone par exemple) aux plus grands écrans d’ordinateurs de bureau, grâce à l’utilisation d’une grille fluide, d’une astuce d’affichage des images et des nouvelles techniques que permettent les feuilles de styles de troisième génération à savoir les media queries. Il devient alors inutile, ou presque, de concevoir autant de versions d’un même site pour toutes sortes de résolutions ou de supports.
Technique en fait ancienne mais rarement utilisée jusqu’à présent, l’utilisation d’une grille fluide permet à un site de s’adapter automatiquement en largeur à la résolution de l’écran de consultation.
Avec les grilles fluides se pose le problème de l’affichage des images. Si les textes et autres zones de contenu peuvent parfaitement s’adapter à des largeurs différentes, c’est plus délicat pour les images qui ont des tailles définies. Heureusement il existe une astuce technique pour que les images s’adaptent automatiquement à la largeur de leur contenant (max-width:100% entre autres).
Définir un design fluide et adapter automatiquement la taille des images ne suffit en général pas. En effet, prenons l’exemple d’un site composé de 6 colonnes. Sur un écran d’ordinateur, chaque colonne occuperait environ 15% de sa largeur, soit environ 180 pixels. De quoi faire assez de place à du texte et autres images. Mais sur un smartphone, les 15% de largeur ne peuvent représenter qu’à peine 50 pixels. Beaucoup trop petit pour une zone de texte.
C’est là qu’intervient une possibilité de CSS3 (la dernière génération des techniques de mise en page d’un document HTML) qui consiste à servir une mise en page différente selon la résolution d’écran du navigateur tout en gardant le même contenu (le document HTML). Ainsi, un contenu présenté sous forme de 6 colonnes pour les grandes résolutions peut ne s’afficher que sur 2 colonnes sur les iPhone.
Ces nouvelles techniques ouvrent de nouvelles opportunités :
Il faut toutefois que les concepteurs de sites Internet revoient leurs process de création de sites en pensant avant-tout et dès le départ au plus petit dénominateur commun, le mobile, lors du design des interfaces ainsi créées. En partant de la version mobile, puis en ajoutant des fonctionnalités ou des effets graphiques ou techniques au fur et à mesure de la mise à disposition de résolutions supérieures.
Il existe des milliers de sites en Responsive Web Design. Le plus simple est de visiter mediaqueri.es qui regroupe les meilleurs d’entre-eux. Voici une sélection issue de cette galerie :
Vous l’aurez constaté, le Responsive Web Design offre de nouvelles possibilités en matière de conception de site Internet. C’est toutefois une technique encore assez jeune qui fait appel souvent aux dernières révisions des standards web (HTML5, CSS3) qui ne sont pas implémentées dans les navigateurs les plus anciens (Internet Explorer 8 ou moins) et des “hacks” sont souvent nécessaires pour assurer la rétro-compatibilité des sites ainsi créés. À utiliser avec parcimonie donc.
Christophe Cussigh-Denis
Fondateur de CCD Agency en 2002, Christophe dirige les projets de l'agence. Performant et consciencieux, il place l'écoute et le conseil au cœur de son métier pour mener les projets de façon précise et rigoureuse.
Article recommandé
Plus de 30% des requêtes sur Google sont désormais issues des mobiles. C'est pourquoi depuis le 21 avril 2015, le leader des moteurs de recherche a annoncé favoriser les sites compatibles mobiles dans ses résultats de recherche.
Christophe Cussigh-Denis