Définition

Grossièrement, on peut dire que le « Responsable Web Design » (RWD) est une technique de construction des sites web qui permet leur adaptabilité sur tous les supports, y compris les mobiles (tablettes, portables). Autrement dit, la navigation est optimisée pour tout le monde et le lecteur a l’impression que le site a été construit et adapté pour son support. Du côté du concepteur, adapter ce design et cette technologie lui permet de ne pas avoir à créer un site spécifique pour chaque support mais aussi de ne pas présenter un affichage d’ordinateur à son internaute qui est sur mobile. Rien de plus désagréable que ce genre d’affichage, contraire à la fonctionnalité….

Technologie du Responsive design

Voyons maintenant un peu plus en détail ce que le « Responsable Web Design » cache sous son capot. Le RWD s’appuie sur une technologie appelée « Medias Queries ». Cette technologie est basée sur le CSS, une feuille de style en cascade. Le « Medias Queries » permet en réalité d’utiliser des règles CSS différentes en fonction du support sur lequel il est ouvert. La largeur de l’écran est le principal paramètre pris en compte par cette technologie. En fonction de ce paramètre, les consignes d’affichage vont être différentes. Par exemple, l’agencement des blocs et des éléments pourra être modifié. Sur l’impression d’écran ci-dessous, on peut par exemple voir que certains blocs qui se trouvaient sur le côté ont été déplacés en bas de page.

[rev_slider RDW1]

Les médias ne sont pas, non plus, laissés en reste : en effet, les photos et vidéos sont redimensionnés afin d’optimiser l’espace sans pour autant nuire à la qualité de ces médias, ni à l’expérience de utilisateur.
Ces quelques modifications sont des exemples : tout est possible ! Bouger les éléments, mais aussi changer la police, l’interligne, l’espace entre les caractères, etc… À partir du moment où vous disposez des connaissances nécessaires en CSS, tout est faisable ! ????
Concernant la conception d’un site en RDW, il existe deux approches dans la façon dont le concepteur peut réfléchir pour son site web : le « Responsive degradation » et le « Mobile first », deux philosophies fondamentalement opposées. Explication…

Le « Responsive degradation » consiste à partir de l’affichage ordinateur pour l’adapter à un écran plus petit, en fonction du rétrécissement de la taille. Plus la taille de l’écran diminue, plus on réarrange les blocs et colonnes du site, en les faisant glisser les unes en-dessous des autres, parfois même jusqu’à en supprimer certaines. Cette technique, assez grossière, ne pose aucun problème à l’affichage bureau mais peut poser problème sur un affichage mobile assez grand, notamment sur les ordi-phone, support à la limite entre l’ordinateur et le smartphone. En effet, cela conduit souvent à charger des feuilles de style inutile, impactant sur la fluidité du site.
Le « Mobile first » est favorisé par les concepteurs. Il consiste à construire premièrement le site pour un affichage mobile. Cela nous donne donc un design plus épuré et plus ergonomique. Cette technique se focalise par l’optimisation de l’expérience utilisateur avant tout. En effet, un site ergonomique sur mobile, le sera également sur ordinateur.
Le RWD est aujourd’hui une technique très rependu. La plupart des thèmes WordPress l’inclut. (Mais aussi Joomla!, drupdal, etc…)

Intérêt

Vous l’aurez compris, l’intérêt d’adapter un « Responsive design » est total. D’autant plus que la part de connections à partir d’un mobile est de plus en plus importante. Par exemple, sur les Tutos de l’informatique, vous êtes plus de 15 % à visiter le blog via votre portable ou votre tablette. Si je n’avais pas opté pour le RWD, pas sûr que vous auriez autant apprécié votre visite ????
Au-delà des avantages très pragmatiques pour vos utilisateurs que nous avons évoqués ci-dessus, il y aussi un argument de taille en faveur de cette technologie : Google n’aime pas les sites sans RWD. Et il le fait savoir dans son référencement… En effet, Google avait indiqué pénaliser les sites qui ne redirigent pas les utilisateurs vers un affichage adapté. Mais le célèbre moteur de recherche est encore allé plus loin en fournissant un kit de développement de sites web, intégrant, vous l’aurez compris, le « Responsive design ».
Plus d’excuses donc pour ne plus s’y mettre si ce n’est pas déjà fait.

Application

Voyons maintenant un exemple de site web en RWD. Prenons le site casino.com, un casino en ligne, qui a opté pour ce design. Voyons son affichage sur plusieurs supports grâce aux sites ScreenFLy et Resizer qui permettent de tester l’affichage de votre site web sur différents supports.

[rev_slider RWD2]

On peut voir sur cet exemple que le site s’adapte parfaitement à son support en utilisant les divers procédés que nous avons évoqués ci-dessus.

Sources

(2018, 01). Site web adaptatif. Wikipédia. Récupérée 05, 2018, à partir de https://fr.wikipedia.org/wiki/Site_web_adaptatif
NEBRA, M. (2005, 12). Qu’est-ce que le Responsive Web Design ?. Openclassrooms. Récupérée 05, 2018, à partir de https://openclassrooms.com/courses/qu-est-ce-que-le-responsive-web-design
SETRA, (2014, 06). Google veut que vous développiez des sites web responsive. Presse Citron. Récupérée 05, 2018, à partir de https://www.presse-citron.net/google-veut-que-vous-developpiez-des-sites-web-responsive/