Catégorie

Éléments & design

Vous êtes perdu ? Vous ne savez pas comment faire quelque chose ? Vous trouverez forcément votre bonheur parmis ces tutos !

Nocode Factory - Agence Expert Webflow

Nocode Factory LogoWebflow Logo

Comment rendre mon site Webflow responsive

Un site responsive est un site qui s'adapte à l'écran utilisé par le visiteur. Il est très important de rendre votre site responsive, et ce pour deux raisons :

  • de plus en plus de gens consultent des sites Internet sur leur portable, et personne ne veut naviguer sur un site conçu pour un écran d'ordinateur sur son téléphone
  • Google et les autres moteurs de recherche évaluent si un site est responsive ou non, et un site responsive apparaitra avant un site qui ne l'est pas dans les résultats de recherche.

Le responsive design comporte quatres aspects différents :

Le Reflowing Content

Ceci fait référence au contenu qui ajuste sa largeur en fonction de la largeur de la fenêtre du navigateur. Par exemple, un paragraphe avec des paramètres par défaut enveloppera automatiquement son contenu lorsque la largeur du navigateur diminue. Ce comportement peut être simulé en faisant glisser le bord du canevas du Designer.

Le Fixed sizing

Il est important de faire attention lorsque vous utilisez des largeurs de pixels fixes. Par exemple, si vous donnez à une image une largeur de 500 pixels, elle peut être très belle sur un ordinateur de bureau ou une tablette. Cependant, si vous la visualisez sur un appareil mobile plus petit, la largeur de l'image restera bloquée à 500px et ne s'adaptera pas à la fenêtre d'affichage plus petite (généralement moins de 500px).

Le Relative sizing

Il s'agit de définir la taille d'un élément par rapport à d'autres éléments, tels que la largeur du navigateur ou un élément parent. Par exemple, au lieu d'utiliser une taille basée sur les pixels pour une image, envisagez d'utiliser différentes unités telles que %, VW (viewport width) ou VH (viewport height). Si vous utilisez le pourcentage pour une image et que vous ajustez la largeur du navigateur, vous verrez que l'image s'adaptera en conséquence, alors qu'une image basée sur les pixels ne le fera pas.

Les Breakpoints

Les mises en page sont généralement beaucoup plus complexes que la gestion de la largeur d'une image. L'utilisation de breakpoints (également connus sous le nom de "media queries") vous permet non seulement de tester la refonte du contenu, mais aussi de modifier la conception et la mise en page en fonction des différentes plages de largeur des appareils.

Les changements de style se font en cascade vers le haut et vers le bas (cascade bidirectionnelle). Ils se déplacent en cascade vers le haut à partir de 992px (bureau) et vers le bas à partir du bureau vers le mobile. Cela signifie que les styles appliqués sur le bureau, 1280px, 1440px et 1920px se déplacent en cascade vers les appareils plus grands et que les styles définis sur le point d'arrêt du bureau se déplacent en cascade vers le bas et s'appliquent à la tablette et aux deux tailles d'appareils mobiles. Tous les styles définis sur la tablette seront reportés sur les points d'arrêt du mobile. Vous pouvez remplacer tous les styles hérités d'un point d'accès supérieur.

Cette nature en cascade s'applique aux styles textuels, sauf si un style est écrasé.

Pour les utiliser, passez les en revue un par un, de la gauche vers la droite. Vous les trouverez en haut du canevas, au centre de l'écran

rendre un site responsive avec Webflow
##