Revenons sur le principe du responsive design pour clarifier toute la situation. De plus en plus d’utilisateurs se servent de leur mobile pour naviguer sur les sites Internet. Pour cela, il faut que le site soit responsive. Détaillons ensemble le responsive design.
D’où vient le responsive design ?
Depuis 2013, on entend parler de responsive design, devenu incontournable dans chaque projet de site web. Cependant, ce terme a été créé par Ethan Marcotte en 2010 dans l’un de ses articles intitulé « A List Apart ». Il a d’ailleurs écrit un ouvrage au nom de « Responsive Web Design ». Il savait que l’utilisation du mobile sera de plus en plus important comparé à l’utilisation du desktop. Il parle même de « conception réactive » pour signifier que la conception du produit doit s’adapter en fonction du support utilisé.
Qu’est-ce que le responsive design ?
Un site web dit responsive design est conçu pour s’adapter aux desktops, aux mobiles et aux tablettes. Il permet d’améliorer l’expérience utilisateur (UX) en adaptant la navigation, le menu, les boutons et autres éléments. Le mobile est devenu incontournable lors de la création d’un site Internet. Il faut donc y penser avant le début d’un projet de site web. La mise en page s’adapte grâce à un système de grilles et d’images flexible.
Pourquoi être mobile friendly ?
Pour la première raison, nous l’avons cité précédemment : c’est l’utilisation de plus en plus fréquente du mobile comme support de navigation. La seconde raison c’est l’amélioration de l’UX qui commence à être pris en compte par Google. Ensuite, le responsive design permet de perfectionner son référencement. Au niveau du temps de chargement, le site responsive design sera plus performant autant sur mobile, tablette que sur desktop. Google utilise désormais l’indexation mobile en lieu et place de l’indexation desktop. Quésaco ? Pour générer ses résultats de recherche, Google se fie à l’affichage mobile du site internet. D’où l’importance de prioriser un projet web dans sa version mobile.
Ce qui change côté utilisateur
Les utilisateurs auront plus facilement accès aux contenus d’un site web sans pour autant être pénalisés par la taille de l’écran. Par ailleurs, ils verront mieux les contenus rédactionnels puisque la taille de la typographie s’adapte en fonction du support utilisé. Plus besoin de zoomer pour bien lire. Peu importe la taille du téléphone, un site responsive design saura s’adapter.
De plus, en terme de fonctionnalités, un site pensé pour le mobile va décloisonner l’expérience utilisateur grâce au tactile : faire défiler les contenus de haut en bas mais aussi de gauche à droite, déployer au besoin des blocs additionnels, etc.
Ce qui change côté développeur
Il est vrai que la conception d’un site responsive demande plus de temps qu’un site uniquement sur Desktop (+ 25% du temps habituel). En effet, il faut modifier le code pour qu’un site soit responsive. Par ailleurs, de plus en plus de développeurs tournés vers l’utilisateur commencent par coder la version mobile. Les dimensions seront différentes et certains éléments comme les boutons ne seront pas de la même taille. De plus, le menu burger va prendre tout son sens dans la version mobile.
Finalement, un site mobile peut (et parfois doit !) être construit différemment d’une version desktop. Ce n’est pas le même usage donc on doit penser les fonctionnalités autrement.
Un point important faisant partie des éléments prioritaires dans le processus de développement : les temps de chargement. Mobile oblige, il faut que ça aille vite ! Chargement des scripts, taille des images, mise en cache, réactivité du serveur, etc. Rien ne doit être laissé au hasard afin de proposer une expérience adaptée à un usage plus nomade que jamais.