Votre Web est-il Responsive ?
On vous en a parlé il n’y a pas longtemps, il y a de plus en plus de site web responsive. Voici une simple vidéo effectuée avec ce site pour comprendre comment fonctionne le responsive design. Votre site est-il responsive ?
Responsive : définition
Un site web adaptatif ou site web responsive 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 dégradent considérablement l’expérience utilisateur.
Comment çà marche ?
L’essentiel de la technicité se trouve dans les media queries dont on vous avait un peu parlé lors de la refonte de notre site en responsive design.
Media Queries
Les media queries sont issues de la spécification de CSS3. Elles permettent de regrouper des instructions d’affichage CSS selon des conditions propre au terminal entrain d’afficher la page HTML. Ainsi les media queries permettent de cibler :
- Le type de média
- La taille de l’écran
- La taille de la fenêtre
- La résolution
- L’orientation
On peut ainsi définir ce qui s’applique à tel ou tel type d’appareil selon des règles complètement séparées ou alors en prévoyant des éléments communs.
Avantages d’un site responsive
- Un seul document HTML certes plus complexe à maintenir que 2 documents distincts mais conforme aux règles accessibilité et plus cohérent.
- Une seule URL ce qui évite les doublons de contenus et donc améliore le référencement.
Conclusion
Le responsive design nécessite une certaine méthodologie aussi bien en phase de conception que de développement front-end. Mais il a un effet « Waouh » certain. Rien aujourd’hui n’empêche son adoption. Au contraire, tout va dans ce sens même sur les CMS comme WordPress.
Toutefois, à trop vouloir en faire on peut rapidement se retrouver avec une interface qui sera trop longue à charger et donc pénaliser la web performance du site. Tout est histoire d’expérience, de connaissance et de compromis.
