Le Responsive Web Design (RWD), c’est quoi exactement ?
Avant la démocratisation des smartphones et leur présence dans toutes nos poches, les sites internet étaient créés uniquement pour les grands écrans.
Du coup, les premiers sites internet, affichés sur nos petits écrans de smartphones, n’étaient vraiment pas pratiques :
Il fallait nécessairement zoomer, puis scroller de gauche à droite, sans pouvoir voir le texte ou la page en entier.
Dans le même laps de temps, non seulement posséder un smartphone est devenu une norme, mais en plus, les heures passées dessus n’ont cessé d’augmenter.
Il a donc fallu trouver une solution pour que les sites internets soient adaptés aux smartphones.
Une application mobile
La première solution pour qu’un site web soit accessible sur mobile, est tout simplement d’en faire une application.
Même s’il y a énormément d’avantages à créer une application mobile, particulièrement pour les gros sites, cette solution n’est pas envisageable pour tous.
Et même pour les sites qui ont une appli, il est souvent indispensable d’avoir un site accessible en passant par le navigateur.
Les sites spécial mobile
La plupart d’entre vous a déjà vu sur son smartphone, un site dont l’url est :
m.mon-site.fr
Le « m », signifie mobile.
Cela signifie que selon l’appareil qui accède au site web, il sera soit dirigé sur la version mobile du site, soit sur la version bureau (toujours hébergée sur mon-site.fr).
Cette solution est très pratique. Elle permet :
- D’avoir une architecture qui peut être très différente de la version bureau, pour une meilleure expérience utilisateur
- D’avoir des fonctionnalités et des animations adaptées spécifiquement pour le mobile
L’inconvénient évident du site spécial mobile, est qu’il est maintenant nécessaire d’effectuer les maintenances et les nouvelles fonctionnalités sur deux sites !
Heureusement, il existe la troisième solution
Les sites responsive
Aujourd’hui, les sites web sont tout simplement écrits pour s’adapter à toute taille d’écrans.
Comment on fait ça ?
A l’aide de plusieurs outils à notre disposition, voyons ça tout de suite :
La première façon de faire, est :
Le design fluide
Si on était sur une feuille de papier, on dessinerait un élément, il aurait une taille en pixels, et points.
Peu importe que l’on soit sur une feuille format A4 ou A3.
Mais sur un site internet, c’est tout à fait différent.
On est capable d’exprimer la dimension d’un élément, une image par exemple, en fonction de la largeur de la fenêtre.
On est ainsi capable de dire à une image de prendre 50% de l’image disponible et de se centrer, ce qui est très pratique.
Si le responsive design fluide convient pour de petits changement, il y a toujours un moment où il faut changer un élément important de structure.
Le design adaptatif
Avec le design adaptatif, on est capable d’écrire du code HTML/CSS comme on veut, en fonction de la largeur de la fenêtre.
Sans trop rentrer dans les détails techniques du code, cela donne :
Ici, le code CSS permet de modifier la taille de la police des paragraphes.
Le côté responsive ici, c’est que ce morceau de code ne s’appliquera que si l’écran est inférieur à 650px.
Vidéo d’un paragraphe qui change de taille
Ici, on a changé la taille de la police, mais de cette manière on peut changer n’importe quel élément de style, n’importe quel positionnement, et même faire disparaître un élément !
Ainsi, on verra souvent des tableaux pour les grands écrans, mais ils disparaîtront sur les smartphone, pour laisser la place à d’autres éléments d’affichage.
En conclusion
Le Web Design Responsive est indispensable dans la création de la plupart des sites web aujourd’hui.
Nos principaux outils sont le design fluide (même si le design static reste utile lorsque l’on veut forcer la taille précise d’un élément), et surtout les media query, pour le design adaptatif.
Ainsi, aujourd’hui, un site web ne doit plus être pensé uniquement pour les ordinateurs, mais pour toute taille d’écrans.
Même si cela demande, évidemment, un temps et une réflexion supplémentaires qu’il faut prendre en compte…
En attendant, n’hésite pas à m’envoyer un message pour me dire ce que tu as pensé de l’article ou si tu as une question que tu aimerais poser.