Utiliser le Fluid Responsive dans Webflow grâce à Finsweet

Le responsive design est devenu une norme pour la création de sites Web modernes, mais trouver la bonne méthode pour rendre votre site Web "responsive" peut être un défi.

Heureusement, l'utilisation du "Fluid Responsive" peut faciliter grandement ce processus. Dans cet article, nous allons explorer ce qu'est le Fluid Responsive et comment l'utiliser dans Webflow grâce à Finsweet.

Qu'est-ce que le Fluid Responsive ?

Définition du Fluid Responsive

Le Fluid Responsive est une technique de design Web qui permet à un site Web de s'adapter en douceur (avec fluidité 😁) à différentes tailles d'écran en utilisant une mise à l'échelle proportionnelle.

Cette technique de conception de sites web aux designs flexibles et adaptables à toutes les tailles d'écran utilise généralement des pourcentages plutôt que des pixels pour définir les dimensions et les marges des éléments de la page.

Contrairement aux designs fixes, qui ont des tailles prédéfinies pour chaque élément, le "fluid responsive" permet aux éléments de se redimensionner et de se repositionner en fonction de la taille de l'écran de l'utilisateur. Ainsi, un site web conçu avec cette technique s'adaptera automatiquement à tous les appareils, qu'il s'agisse d'un ordinateur de bureau, d'une tablette ou d'un smartphone.

Qu'est-ce que le responsive Design ?

Les unités du responsive fluide

Pour mettre en place un design "fluid responsive", il est important d'utiliser des unités relatives (pourcentages, em ou rem) plutôt que des unités absolues (pixels). Cela permet de définir les dimensions et les marges en fonction de la taille de la fenêtre d'affichage, plutôt que d'une taille absolue.

Il est également possible d'utiliser les échelles vw (view width : valeur en fonction de la largeur de l'écran) et vh (view height : valeur en fonction de la hauteur de l'écran). Cependant, il y a plusieurs problèmes à cela :

• Tous les éléments doivent être en vw ou vh. Cela implique beaucoup de classes et beaucoup de gestion.
• Si l'écran est très grand, on peut avoir des éléments ou marges gigantesques et inversement.
• Les vw et vh ne prennent pas en compte les préférences des utilisateurs et posent donc des problèmes d'accessibilité web.

Pour créer un fluid responsive, il faut également définir des points de rupture ("breakpoints") à partir desquels le design de la page se réorganisera pour s'adapter aux tailles d'écran plus petites. Les points de rupture permettent de définir les règles de mise en page et les styles de chaque élément en fonction de la largeur de l'écran.

Mettre en place un Fluid Responsive sur son projet Webflow

Contextualisation du Fluid Responsive avec Client-First et Finsweet

Avant de commencer, nous allons préciser que pour mettre en place le responsive fluide sur un projet Webflow, il y a plusieurs méthodes. Dans cet article, nous allons nous concentrer sur la meilleure manière (et sûrement la plus simple) de l'implémenter dans un projet. Cette méthode suivra donc le principe de Client-First et des outils mis à disposition par Finsweet.

Si vous connaissez un peu Client-First, vous savez que lors du développement d'un projet, nous utilisons les REM plutôt que les autres unités de taille (comprendre la différence entre REM et Pixels).

Pour résumé, les REM sont une unité de mesure utilisée en CSS pour définir la taille des éléments d'une page web. Contrairement aux pixels et aux autres unités de mesure absolues, les REM sont relatifs à la taille de la racine HTML de la page plutôt qu'à celle de l'élément parent.

Cela signifie que les tailles définies en REM resteront proportionnelles à la taille de la police par défaut de la page, quel que soit l'élément parent dans lequel ils se trouvent. Par conséquent, l'utilisation de REM est une pratique recommandée pour créer des designs "fluid responsive" qui s'adaptent à toutes les tailles d'écran.

Par défaut, 1 REM = 16px, mais nous pouvons modifier cette valeur de police racine.

C'est pourquoi pour son Fluid Responsive, Client-First utilise "root-font scaling" (Mise à l’échelle de la police racine). De cette manière, nous pouvons contrôler toutes les tailles dans votre projet de manière globale.

Générer un Fluid Responsive Client-First dans Webflow

Pour générer un responsive fluide, il faudra tout simplement ajouter un code CSS dans les paramètres de son projet. Le code peut être ajouté à la fin du projet lorsque votre développement est terminé et ne prend que quelques minutes à configurer.

Pour ce faire, vous devez au préalable installer l'extension Finsweet pour Webflow. Une fois que l'extension est installée, vous devrez :

1. Entrer dans le Designer de votre projet
2. Cliquer sur l'icône de l'extension Finsweet
3. Cliquer sur "Client-First"
4. Cliquer sur "Fluid Design Generator"
5. Paramétrer votre Fluid Responsive

Paramétrer un Fluid Responsive Client-First dans Webflow

Lorsque vous êtes sur le générateur de design fluide de Client-First dans Webflow, vous avez plusieurs options pour paramétrer votre responsive.

Modifier les breakpoints

Par défaut, vous avez 3 breakpoints (479px, 1440px et 1920px).

Dans un premier temps, vous pouvez supprimer, ajouter ou modifier les breakpoints par défaut.

• Pour en ajouter, vous pouvez cliquer sur un des plus entre les breakpoints déjà existants.
• Pour en supprimer, vous pouvez survoler un breakpoint et cliquer sur la croix rouge à côté.
• Pour modifier, vous pouvez tout simplement cliquer sur la valeur d'un breakpoint et la modifier.

Modifier les valeurs de la police racine par breakpoint

Après avoir modifié vos breakpoints, pour chacun d'entre eux, vous pouvez définir la valeur de "départ" de la police racine et sa valeur de "fin".

Par exemple, si nous avons un breakpoint à 1920px et un autre à 1440px, nous pouvons définir qu'à 1920px, la valeur de la police racine est de 18px (et non 16px par défaut) et à 1440px de 16px.

Ainsi entre 1920px et 1440px, la valeur de 1 REM diminuera de façon linéaire de 18 à 16px. Cela signifie qu'à 1680px, 1 rem sera égale à 17px ou encore qu'à 1560px, 1 rem sera égale à 16,5px.

Bref, nous pouvons donc faire varier la taille d'un rem en fonction de la largeur d'un écran grâce à nos breakpoints et droites linéaires.

Autre exemple de Fluid Responsive personnalisé :

Options supplémentaires

Le générateur nous propose des options supplémentaires pour aller plus loin :

• Stop Scalling at max breakpoint : pour garder une taille fixe après le plus grand breakpoint
• Add editable variables to code : Permet de modifier les valeurs "plus facilement" directement dans le code ensuite sans avoir à repasser par le générateur
• Remove style tag : pour ne garder que le code pur sans les balises de style

Intégrer le code CSS

Une fois que votre configuration est prête, vous pouvez directement copier le code grâce au bouton dédié et l'intégrer dans le code personnalisé de votre projet (dans le head tag).

Si vous souhaitez voir le code directement en action et que vous avez un projet Client-First, vous pouvez l'insérer dans l'embed du component Global Styles (sinon il faudra publier le projet).

code css fluid responsive client-first webflow

‍

Avantages de l'utilisation du Fluid Responsive avec Finsweet

• Vous êtes libres dans son implémentation ou non dans un projet Webflow
• Pas de contraintes concernant le développement
• Gestion facile
• Accessible

Conclusion

En conclusion, nous pouvons voir que le Fluid Responsive est une technique de design Web efficace pour rendre son site Web "responsive". Grâce à Finsweet, il est facile d'ajouter cette technique à n'importe quel projet Webflow "Client-First" sans avoir besoin de calculs compliqués ou de code CSS personnalisé. Donc si vous cherchez une méthode simple pour rendre votre site Web "responsive", essayez le Fluid Responsive avec Finsweet !