Web design : Qu’est ce qu’un site responsive ?

Dans le domaine de la conception et du développement de sites web, nous arrivons rapidement à un point où il est impossible de suivre l’évolution des nouvelles résolutions et des nouveaux appareils. Pour de nombreux sites Web, créer une version du site pour chaque résolution et chaque nouvel appareil serait impossible, ou du moins peu pratique. Devons-nous subir les conséquences de la perte de visiteurs d’un appareil pour gagner des visiteurs d’un autre ? Ou existe-t-il une autre solution ?

Le site responsive est une approche qui suggère que la conception et le développement du site web doivent répondre au comportement et à l’environnement de l’utilisateur en fonction de la taille de l’écran, de la plate-forme et de l’orientation.

Cette pratique consiste en un mélange de grilles et de mises en page flexibles, d’images et d’une utilisation intelligente des requêtes média CSS  (Feuilles de style en cascade). Lorsque l’utilisateur passe de son ordinateur portable à son iPad, le site Web doit automatiquement s’adapter à la résolution, à la taille de l’image et aux capacités de script. Il faut également tenir compte des paramètres de l’appareil.

En d’autres termes, le site Web devrait disposer de la technologie nécessaire pour répondre automatiquement aux préférences de l’utilisateur. Ainsi, il ne serait pas nécessaire de prévoir une phase de conception et de développement différente pour chaque nouveau gadget sur le marché.

Comment fonctionnent les sites responsives ?

En effet, Un site classique se compose d’un ensemble de fichiers, et chaque fichier contient du code HTML et du contenu (texte et images). Les pages Web sont stylisées à l’aide de fichiers appelés feuilles de style en cascade (CSS). Pour faciliter l’explication, disons qu’un site Web standard (non responsive) possède un ensemble de fichiers et quelques fichiers CSS qui régissent l’apparence du site. Un site web réactif applique un autre ensemble de fichiers CSS en fonction de l’appareil utilisé pour accéder au site. L’aspect et la réponse du site varient en fonction de l’appareil. Par exemple, si une personne qui consulte le site à partir d’un appareil de bureau voit un menu de navigation aligné horizontalement, celle qui consulte le site à partir d’un appareil mobile obtient un menu de navigation aligné verticalement avec un texte plus grand, plus facile à lire sur un écran plus petit.

Il fut un temps où les gens n’accédaient aux sites qu’à partir d’un ordinateur de bureau. La grande majorité d’entre eux avaient un écran de la même taille. Les sites Web étaient conçus pour le visiteur moyen. Aujourd’hui, les gens accèdent aux sites Web à partir d’une variété d’appareils différents avec des écrans allant de quelques pouces jusqu’à 27 pouces ou plus et les attentes ont changé. Les consommateurs s’attendent à ce que le site qu’ils visitent sache qu’ils utilisent une tablette plutôt qu’un PC. Ils s’attendent à ce que le site s’adapte à eux, et non l’inverse. C’est ici que l’importance des sites responsives se révèle.