Le responsive web design expliqué à mon père !

Vous n’avez pas pu échapper au dernier terme à la mode : le  responsive web design  ou  site web adaptatif en Français. Cette nouvelle philosophie permet de concevoir un site web capable de s’adapter à la volée à la taille de l’écran du terminal utilisé pour le consulter. Concrètement vous pouvez consulter un site internet à partir de votre ordinateur, votre tablette ou même votre smartphone de manière optimale.

En fonction de la taille de l’écran les informations présentées vont s’adapter pour présenter à l’internaute la meilleure lecture possible. Dans certains cas le contenu sera sensiblement différent car il se peut qu’il soit masqué si la taille de l’écran ne permet pas de le restituer correctement.

Techniquement, un site web pensé sur le principe du responsive web design  utilise la technologie CSS3 media queries pour adapter la mise en page à l’environnement de consultation grâce à une grille fluide dans laquelle se casent les différents contenus de la page.
Les images ayant un besoin de flexibilité sont également redimensionnées en unité relative, afin de prévenir un éventuel débordement dans la zone ou elles doivent être affichées.

Le Responsive Web Design en images

Prenons l’exemple de l’une des dernières réalisations de Biper studio pour illustrer ce concept.
Le site Vosges Inc vosgesinc.com

En fonction du terminal  les images vont s’adapter pour utiliser au mieux l’écran  et le menu principal du site va varier en fonction de la largeur de l’écran? Sur un smartphone, il n’y a pas assez de place pour gérer le menu dans sa largeur, il est donc présenté à l’utilisateur dans un sens vertical.

Pour tester un site et voir comment il s’adapte en fonction de la taille de l’écran vous pouvez redimensionner la taille de la fenêtre de votre navigateur. Si le site est Responsive  il va s’adapter à la volée aux dimensions de l’écran.