Responsive Fluide

Ajoutez du responsive fluide (fluid responsive) à tous les projets Client-First à l'aide d'un outil visuel de calibrage. Pas de calculs, pas de code CSS personnalisé, pas de javascript.

Translator

Thibaut Legrand

Translator

Florian Bodelot

Les outils

Deux solutions existent pour que notre site Webflow "Client-First" ait un responsive fluide

Le configurateur de code CSS visuel sur cette page
Le même configurateur visuel dans l'extension Finsweet

Qu'est-ce que le responsive fluide (Fluid Responsive) ?

Lorsque la taille de la fenêtre du navigateur change, la design s'adapte

Le responsive fluide de Client-First fluid comparativement aux échelles vw et vh

Lorsque la fenêtre du navigateur change de taille, le design évolue avec elle.

L'utilisation d'unités vw ou vh est un moyen de rendre notre contenu responsive fluide lors du changement de la taille de la fenêtre du navigateur. Les problèmes que pose cette méthode sont les suivants :

Nous devons définir pour chaque élément des tailles d'unités vw ou vh pour qu'il soit responsive
Les éléments peuvent rapidement devenir trop petits ou trop grands en raison d'une mise à l'échelle linéaire. Les unités vw et vh suivent une évolution linéaire.
Il y a un problème d’accessibilité car les unités vw et vh ne prennent pas en considération les paramètres de grossissement du navigateur.
Il peut être délicat de gérer et de faire la maintenance de notre projet Webflow en vw et vh (surtout pour les clients et/ou les autres développeurs)

Client-First utilise "root-font scaling" (Mise à l’échelle de la police racine) à la place.

Root-font scaling (Mise à l’échelle de la police racine)

Le système "Client-First" utilise les unités rem pour toutes les tailles. L'unité rem est basée sur une seule chose : la taille de la police racine HTML (HTML root font size).

Tous les éléments de notre projet sont relatifs à la taille de la police HTML. De ce fait, nous avons un contrôle global sur toutes les tailles dans notre projet.

En modifiant cette taille, nous rendons effectivement nos rems "plus grandes" ou "plus petites" visuellement. Notre générateur visuel de responsive fluide fonctionne grâce à un ensemble de calculs qui modifient la taille de la police racine en fonction de nos préférences.

L'ajout du code CSS généré permet à notre projet Webflow de suivre des règles de mise à l'échelle personnalisées. La modification de la taille de la police HTML à travers des points de rupture (breakpoints) nous offre une personnalisation ultime pour notre responsive.

Avantages :

Utilisez Client-First comme vous le faites habituellement. Il n'y a pas de modification spécifique du flux de travail pour les sites responsive fluides par rapport aux sites responsive non fluides.
La stratégie de responsive fluide est un ajout facultatif (un bonus). Vous pouvez l'ajouter, ou non, à n'importe quel projet.
La stratégie de responsibe fluide peut être ajoutée à la fin du projet, une fois que tout est développé.
Les navigateurs font un zoom classique.
Les paramètres de taille de police des navigateurs définis par les utilisateurs sont respectés.
La maintenance d'un projet Webflow en rem est plus facile que celle d'un projet utilisant des tailles fixes basées sur vw ou vh.

Tout comprendre sur le fluid responsive et son implémentation dans Webflow.