Responsive Design : qu'est-ce que c'est ?

Avec le nombre croissant d'appareils connectés à Internet (ordinateur fixe ou portable, tablette, téléphones... etc.), il serait compliqué de concevoir plusieurs versions d'un même site web, une pour chaque taille d'écran et chaque résolution existantes.

Le Responsive Design est l'une des solutions techniques à ce problème : programmer un site web de manière que les éléments qui le composent s'adaptent automatiquement à la largeur d'écran du dispositif sur lequel il est consulté.

La taille des écrans change constamment dans le temps, il est donc important que votre site puisse s'adapter à n'importe quelle taille d'écran, aujourd'hui ou à l'avenir. En effet, nous ne savons pas de quelle taille d'écran seront dotés les appareils de demain.

La conception de sites web dits « responsives », définie à l'origine par le designer graphique américain Ethan Marcotte, réagit aux besoins des utilisateurs et de leurs appareils. La présentation change en fonction de la taille de l'écran et des caractéristiques de l'appareil. Par exemple, sur un téléphone portable, les utilisateurs verront le contenu dans une colonne, tandis qu'une tablette pourra montrer le même contenu dans deux colonnes.

Comment passer au Responsive Design ? 

Voici les principales techniques pour que son site soit « responsive » :

•  Adapter la mise en page en fonction de la résolution à laquelle elle est affichée.
•  Redimensionner automatiquement les images pour les adapter à l'écran et ne pas surcharger le transfert de données sur un téléphone portable, par exemple.
•  Simplifier les éléments d'écran pour les appareils mobilesmobiles, où l'utilisateur dispose généralement de moins de temps et d'attention pendant la navigation.
•  Cacher les blocs inutiles sur les petits appareils.
•  Adapter la taille des boutons et des liens aux interfaces tactiles où le pointeur de la souris est remplacé par le doigt de l'utilisateur.
•  Utiliser intelligemment des fonctionnalités mobiles telles que la géolocalisation et le changement d'orientation de l'appareil (horizontale ou verticale).