Responsive Web design: Définition

Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau).

Avoir un site Responsive

À l'heure où des centaines de tailles et formats d'écrans différents se connectent à chaque instant,
la méthode du Responsive Web design apparaît comme la "solution" en vertu de son objectif principal:
s'adapter à tout type d'appareil de manière transparente pour l'utilisateur
Le Responsive peut être envisagé après la conception initiale du site (même si ce n'est pas l'idéal)
L'un des avantages indéniables est que Google met en avant les sites "adaptés aux mobiles"
au sein de ses résultats de recherche.
Vous pouvez tester, si votre site est adapté aux mobiles selon les critères de Google : Je teste .

Comment se comporte un site Internet Responsive sur PC et mobile ?

Les images à gauche montrent comment s'affiche généralement un site Internet sur un ordinateur : la largeur de l'écran permet d'afficher le site sans problèmes, les textes sont de taille suffisante pour être parfaitement lisibles et il suffit de défiler verticalement pour voir le contenu des pages. Mais sur un téléphone mobile ou une tablette, la largeur physique de l'écran diminue énormément, voici alors comment s'affiche le même site sur un smartphone selon que le site est responsive ou non :.

Le site Responsive

Le site responsive s'est adapté à la largeur réduite de l'écran pour que sa consultation reste agréable : son menu s'est replié sous une icône facile d'accès en haut à gauche, la taille des textes reste importante pour les lire sans effort, et le contenu du site s'est réorganisé dans la hauteur sans déborder en largeur. Il est inutile de zoomer ou de faire défiler le site horizontalement par des manipulations tactiles complexes. Il suffit de faire défiler le site verticalement avec un seul doigt pour le parcourir, comme sur le PC. Les boutons et liens sont faciles à pointer avec le doigt sans risque d'erreur. .

Le site non Responsive

Le site non responsive s'affiche de la même manière que sur l'écran d'ordinateur, mais sur une surface 80% moins large. Sur un écran de smartphone de 5 à 6cm de large les textes deviennent trop petits pour être lisibles. Le visiteur doit effectuer des manipulations tactiles incessantes de zoom avant/arrière et de défilement horizontal/vertical pour rendre visibles les parties du site qu'il veut consulter. Ces manipulations tactiles sont très désagréable pour un visiteur qui quittera rapidement le site. .