Conseils, scripts & logiciels webmaster

Définition : Responsive Design

Le Responsive Design consiste à modifier à la volée l’apparence d’un un site web pour l’adapter à la taille de l’écran du terminal utilisé pour le consulter.

Nécessité du Responsive Design

Responsive Design WebDans la mesure où une part de plus en plus importante du trafic des sites web provient du mobile et des tablettes hybrides, le responsive design semble être le meilleur moyen d’augmenter la fréquentation d’un site web sans rien modifier du contenu. Pour adapter un site à tous les périphériques, les ordinateurs de bureau, les ordinateurs portables, les smartphones, les tablettes pc, les écrans de tv, on peut imaginer trois possibilités d’adaptation :

  • La première méthode, on n’y pense pas assez, consiste à ne pas utiliser de CSS, à la manière du web ancestrale. Ainsi tous les problèmes d’adaptation disparaissent puisque la mise en page du simple texte sera forcément adaptée à la largeur de l’écran. Certes, c’est trop radical.
  • La deuxième méthode d’adaptation consiste à concevoir le site pour chaque support et chaque résolution avec une présentation optimisée spécifique et pensé pour le support. Le gros problème réside dans la complexité du travail, toujours à renouveler et du risque de perdre l’internaute entre le site classique, la version smartphone, la version tablette et la version pour sa TV.
  • La troisième méthode consiste utiliser le Responsive Design pour que le site soit toujours parfaitement adapté au support, sans besoin de séparer spécifiquement l’affichage selon le support

Le Responsive Design apparaît très clairement pour la grande majorité des cas comme la meilleure solution pour adapter le site web aux smartphones, par ailleurs c’est également la solution officiellement recommandée par Google aux sites qui souhaitent être optimisés pour les smartphones, d’autant que la gestion d’une même URL simplifie les choses tant du côté de la conception que du côté du référencement.

Comment utiliser le Responsive Design

Le Responsive Design utilise des propriétés CSS3 qui permettent d’adapter dynamiquement le design en fonction des caractéristiques de chaque support utilisé et de la taille d’écran correspondante.
De plus l’interface est composée de blocs en unités relatives, des grilles fluides permettant de jouer sur la composition de la page en fonction de la largeur de l’écran. Les éléments fluides occupent le même pourcentage d’espace sur les différents écrans, les valeurs sont exprimées en pourcentage et non en valeur absolue.
Il faut également proposer des images dont la taille et la disposition s’ajustent automatiquement en fonction de l’écran, surtout pour la largeur de l’image.

Pour un webmaster avec des compétences en design et en css limitées, il est possible d’utiliser des templates pré-configurés en responsive design.
Pour un blog WordPress, il existe des thèmes qui sont optimisés, il est recommandé de les utiliser de préférence.
Note : Butaz utilise un Responsive Design.

Responsive Web Design ou pas ?

Indubitablement un site web conçu en responsive design sera plus facile d’accès pour l’internaute et simplifiera également la gestion du contenu pour un affichage multi-écran, multi-support. Le surcroit d’énergie nécessaire à cette conception adaptative est vite rentabilisé par la simplification apportée à moyen et long terme.

Butaz