Le principe

La notion de Responsive Web Design (conception de sites web adaptatifs selon l'OQLF) regroupe différents principes et technologies mais il indique globalement qu'un site est conçu pour s'adapter aux différentes tailles d'écran et aux différents terminaux permettant d'afficher le site (navigateur, tablette, mobile, télé connectée, ...). Ainsi, les mobinautes pourront avoir une expérience adaptée à leur terminal sans dégradation et sans devoir utiliser les fonctionnalité de zoom (ou un autre type de redimensionnement). Ils pourront consulter la même information, mais organisée différemment selon le type de terminal utilisé.

La notion de web responsive révolutionne la manière de concevoir les parcours internet puisqu'il ne s'agit plus ici de concevoir autant de parcours qu'il y a de famille de terminaux mais de concevoir une seule interface auto-adaptable. Ainsi, les sources d'information et les socles techniques ne sont pas dupliqués. Cela engendre des économies d'échelles dans la conception et la maintenance de sites internet. L'esprit du web responsive est de tourner toujours davantage vers à la fois une standardisation du web (normes W3C) et vers une industrialisation de ce marché qui progresse vers la maturité.

tailles

Source : Wikipedia

Les outils

Pour avoir un texte qui s'adapte toujours à la taille de l'écran : fittextjs

Pour réaliser un aperçu en temps réel à partir de votre tablette, mobile, et pc : Adobe Shadow

Pour tester les différentes tailles d'écran : Screenfly

Golden Grid System

Techniques pour les images réactives : 24ways.org

Exemples de sites