Comprendre et utiliser les unités de viewport dans Webflow pour un design responsive

‍Le design web responsive est essentiel pour offrir une expérience utilisateur fluide et optimale sur votre site, quel que soit le type d'appareil utilisé. Que vos visiteurs naviguent sur un smartphone ou un grand écran d'ordinateur, il est crucial que votre site s'adapte parfaitement à toutes les tailles d'écran.

Lors de la création de votre site web avec Webflow, vous pouvez atteindre ce niveau de flexibilité en utilisant différentes unités (CSS) de viewport. Le "viewport" correspond à la taille de la fenêtre du navigateur où votre page web est affichée. Cependant, un défi se pose avec certains navigateurs mobiles qui comportent des "barres de navigations" dynamiques. Ces barres de navigations apparaissent et disparaissent en fonction de la façon dont l'utilisateur fait défiler la page, ce qui peut perturber l'affichage de votre site web si votre CSS utilise les unités VH ou DVH.

Heureusement, pour éviter ce problème, Webflow propose des unités de viewport spécifiques !

Qu'est-ce que les unités de viewport sur le web ?

Les unités de viewport sont déterminées en fonction de la taille de l'écran. Les unités de viewport classiques sont le VH (Viewport Height) pour la hauteur et le VW (Viewport Width) pour la largeur. Cependant, ces unités ne prennent pas en compte les barres de navigation dynamiques des navigateurs mobiles. Si vous utilisez ces unités pour définir des éléments à 100 VH ou 100 VW, ils risquent de déborder du viewport sur les navigateurs avec des barres de navigation dynamiques (surtout sur mobile, pour la partie responsive de votre site web).

Afin d'éviter cela, il est préférable d'utiliser des unités de viewport "min ou max", ainsi que des unités "dynamiques" pour garantir que tous les éléments de votre site restent parfaitement visibles.

Liste des unités de viewport :

• DVH — relatif à la hauteur du viewport dynamique
• DVW — relatif à la largeur du viewport dynamique
• SVH — relatif à la petite hauteur du viewport
• SVW — relatif à la petite largeur du viewport
• LVH — relatif à la grande hauteur du viewport
• LVW — relatif à la grande largeur du viewport
• VH — relatif à la hauteur du viewport
• VW — relatif à la largeur du viewport

Les unités avec un préfixe LV correspondent aux grands viewports, c'est-à-dire la zone de viewport visible lorsque une barre de navigation dynamique est cachée sur un navigateur mobile. Les unités avec un préfixe SV correspondent aux petits viewports, soit la zone de viewport visible lorsque une barre de navigation dynamique est présente sur un navigateur mobile.

Comment utiliser ces unités pour créer un site web responsif ?

Dans Webflow, lors de la saisie d'unités dans un champ, vous ne trouverez pas les unités SVH, SVW, LVH ou LVW dans le menu déroulant. Pour les utiliser, saisissez simplement la valeur et les lettres de l'unité que vous souhaitez utiliser (par exemple, 100 SVH) dans le champ de saisie et appuyez sur Entrée.

Les bonnes pratiques pour l'utilisation des unités de viewport

Il est conseillé de définir une hauteur minimale avec SVH, plutôt que de simplement définir la hauteur de la section. Ainsi, la section respecte le contenu à l'intérieur et s'ajuste en fonction. Par exemple, si vous définissez la hauteur minimale de votre section héro à 100 SVH, la section héro occupera tout le viewport (même avec une barre de navigation dynamique) mais pourra également s'étendre en fonction du contenu à l'intérieur.

Bonus : comment modifier facilement toutes vos classes CSS avec une valeur en DVH ou VH depuis le designer Webflow ?

1. Ouvrez le designer Webflow
2. Ouvrez le gestionnaire de style (Style Manager)
3. Dans la barre "Rechercher des classes" (Search Classes), tapez "DVH" ou "VH"
4. Et voilà ! Vous avez maintenant identifié toutes les classes de votre site Webflow utilisant les unités DVH ou VH.

Conclusion sur les meilleures pratiques avec Webflow

Keypoints :

1. Ne jamais définir de taille "height" fixe à votre section
2. Utiliser la valeurs "min height" plutôt
3. Privilégier l'utilisation de taille dynamique comme le SVH

En comprenant et en utilisant correctement les unités de viewport dans Webflow, vous pouvez créer un design web véritablement responsive, offrant une expérience utilisateur optimale sur tous les appareils. N'oubliez pas de tester votre site sur différents navigateurs pour vous assurer de la compatibilité de ces unités avec le navigateur de votre public cible.

En complément, voici une super vidéo d'explication des meilleures pratiques by Webflow