Le responsive en HTML/CSS

L

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 :

Gif animé du site "Le monde" sur un smartphone, sans responsive design
Le Monde en 2005 sans responsive design, pas pratique
Gif animé du site "Le monde" sur un smartphone, avec responsive design
Le monde aujourd’hui avec responsive design, pratique


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.

BD Le responsive Web Design : Garçon 1 : C'est marrant, ce site de réservations d'hôtels m'oblige à télécharger une appli... 
Garçon 2 : Tu vas réserver ailleurs du coup ? 
Garçon 1 : Yep !

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

Attention

Même si nous avons maintenant 2 sites différents, cela ne signifie pas que les contenus ne sont pas synchronisés !
Il suffit d’être connecté à la même Base de Données (BDD) pour que la modification de l’un affecte aussi l’autre.

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.

On observe sur ce gif animé le menu qui est affiché en ligne pour un grand écran, mais qui se transforme en menu burger pour un écran plus petit
Ici, le menu est trop rempli. Ce ne serait pas esthétique de le réduire plus…Alors la structure du menu change totalement, et devient un menu burger

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 :

CSS
style.css

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

Dans ce gif animé, on observe la taille de police d'un paragraphe varié soudainement en fonction de la largeur d'un écran

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…

BD Le Responsive Web Design : Fille : Mon site est fini, et trop beau ! Fille : Tu veux jeter un oeil? Garçon : Je suis dessus. Garçon : Mais c'est tout moche... Fille : Mais regarde-le sur un ordi !!!

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.