Coralia RWD

La notion de Responsive Web Design (conception de sites web adaptatifs) 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é.

D’abord le mobile, puis une amélioration continue

Puisque les mobiles ne permettent pas toujours d’afficher certains types de contenus multimédias, l’idée du web responsive est de créer un site web basique sur les terminaux les plus pauvres et ensuite l’améliorer pour les usages plus avancés. Ainsi, on bascule d’une navigation dégradée pour les terminaux non classiques à une expérience optimale et personnalisée

Technique

Le concept de web responsive agrège différentes techniques

• feuilles de style CSS permettant d’utiliser des dimensions relatives aux dimensions écrans
• solutions de stockage d’images adaptables (le poids des images s’adaptera directement, côté serveur, à la qualité de l’affichage
• ergonomie basée notamment sur l’utilisation massive de javascript
• usage des nouveaux standards du web (HTML5, CSS3…)