|
Site web responsive design, qu'est que ça veut dire ? Un site web adaptatif (anglais RWD pour responsive web design, conception de sites web adaptatifs selon l'OQLF) est une notion de conception de sites web qui regroupe différents principes et technologies dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation. L'utilisateur peut ainsi consulter le même site web à travers une large gamme d'appareils (moniteurs d'ordinateur, smartphones, tablettes, TV, etc.) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui peuvent parfois dégrader l'expérience utilisateur...
Principe Composants principaux - Media queries permet à la page d'utiliser des règles CSS différentes en fonction des caractéristiques du terminal de consultation. Le plus communément il s'agit des règles appliquées en fonction de la largeur du terminal. Ces différentes largeurs sont appelées "points de rupture" et correspondent à un besoin de modifier la mise en page à partir d'un certain seuil critique pour la facilitation de la navigation et de la lecture du contenu. - Le concept de grille fluide consiste en un dimensionnement relatif des différents blocs de la page. Les unités relatives comme les pourcentages ou les EMs sont assez adaptées pour cela, beaucoup plus que les unités absolues comme les pixels ou les points. - Les images ayant un besoin de flexibilité sont également redimensionnées en unité relative, afin de prévenir un éventuel débordement du contenu en dehors de son élément conteneur. Technique Si les media queries sont souvent mis en avant comme l'élément technique principal du Responsive Web Design, pour Marcotte E., ils ne servent qu'à apporter quelques modifications dans l'interface quand l'utilisation de grilles fluides ne permet pas de résoudre tous les problèmes liés à l'adaptabilité du produit. Cette « sacro-sainte trinité », comme l'appelle Raphaël Goetter, est parfois critiquée, certains considérant que la grille fluide n'est pas nécessaire pour avoir un produit complètement adaptatif. Pour faciliter la création de modèles adaptatifs pour le web, et gagner ainsi du temps, il existe de nombreux framework en responsive CSS (Twitter Bootstrap, Foundation, Gumby, Skeleton, ...] Conception et approches Responsive degradation Cette méthode est parfois remise en cause dans la communauté des web designers, puisque dans la réalité, un smartphone chargera la version bureau du site web et la version mobile, et donc téléchargera des données de style non nécessaires et des images qui peuvent être lourdes depuis un réseau cellulaire. Mobile first (le mobile en premier) L'élaboration d'une interface ergonomique sous la contrainte d'un faible espace d'affichage force à épurer au maximum les éléments visibles par l'utilisateur final. Une tendance que l'on retrouve de plus en plus dans l'ergonomie des interfaces web. Cette pensée est de plus en plus privilégiée par des outils destinés à la création de site web. Par exemple le CMS Drupal élabore la version 8 de son CMS en essayant d'intégrer cette pensée "Mobile First". L'augmentation constante des ventes de "Smart Connected Devices" (PC, Smartphone et tablette) a augmenté l’intérêt de réalisation de templates en RWD pour la plupart des outils de gestion de contenu. Wordpress et Joomla proposent également des design intégrant la dimension responsive. Pour aller plus loin, de nouveaux systèmes de gestion de contenu intègrent le responsive web design dans leur conception. Certains CMS comme Rubedo intègrent nativement des systèmes de mise en page à l’aide de Grille Fluides et permettent (grâce aux Media Queries) de définir les éléments des pages qui s'afficheront en fonction des support à l’aide de simples cases à cocher. Déclinaisons Texte sous licence CC BY-SA 3.0. Contributeurs, ici. Photo : Stéphanie Walter. Des spécialistes de la réalisation de sites web responsive design : 75014 - SOLUTION COM http://www.agence-communication-paris-14.com Voir toutes les newsletters : www.haoui.com Pour les professionnels : HaOui.fr |