Designer son site sur le breakpoint de référence
Lorsque tu crées un site Web responsive sur Webflow, il est important de définir un breakpoint de référence pour designer ton site. Le breakpoint de référence est la taille d'écran sur laquelle tu souhaites designer la version de bureau de ton site. Tu peux ensuite utiliser les autres breakpoints pour adapter l'affichage sur les autres tailles d'écran.
Dans Webflow, le breakpoint de référence est indiqué par une étoile sur l’icône desktop. N’oublie de commencer à designer sur celui-ci si tu ne veux pas avoir de mauvaises surprises par la suite.
Qu'est-ce que les breakpoints sur Webflow ?
Les breakpoints sur Webflow sont des points de rupture dans le design d'un site Web où le contenu est redimensionné en fonction de la taille d'écran. Cela permet de créer un site Web qui s'adapte à toutes les tailles d'écran. En utilisant les breakpoints, tu peux ajuster l'affichage de ton site pour les tailles d'écran les plus courantes, comme les ordinateurs de bureau, les tablettes et les téléphones portables.
Comment utiliser les breakpoints sur Webflow ?
Sur Webflow, tu peux ajouter des breakpoints en allant sur la barre horizontale située en haut de ton site.
Lorsque tu créer ton projets, Webflow te met à disposition des points de rupture par défaut qui sont :
- Le desktop (992 px et plus)
- La tablette (768px - 991px)
- Le mobile landscape (480px - 767px)
- Le mobile portrait (240px - 479px)
En cliquant sur les 3 petits points, tu peux ajouter un breakpoint pour une taille d'écran spécifique, par exemple 992 pixels pour un écran de bureau.
Une fois que tu as ajouté un breakpoint, tu peux ajuster l'affichage de ton site pour cette taille d'écran.
Il est important de noter que chaque taille d'écran peut nécessiter des ajustements différents pour l'affichage de ton site. Par conséquent, il est recommandé d'ajouter plusieurs breakpoints pour s'assurer que ton site s'affiche correctement sur toutes les tailles d'écran.
Conseils pour utiliser les breakpoints sur Webflow
Voici quelques conseils pour optimiser ton site Webflow sur les différents breakpoints :
- Commence toujours par le point de référence (voir chapitre plus haut)
- Lorsque tu changes de breakpoints, Webflow ne te place pas sur le plus petit écran. Déplace le curseur pour t’assurer de toujours réadapter ton site sur la plus petite version de chaque breakpoints
Les éléments de Webflow pour optimiser le responsive de son site
En plus des breakpoints, Webflow propose plusieurs éléments pour optimiser le responsive de son site.
Utilise l’élément Grids (”grille” en français 🇫🇷)
L’élément Grids te permet d’adapter ton site de manière fluide. Voici ce que tu peux faire avec une grid :
- Agencer le contenu comme tu le souhaites sur les différents breakpoints. Sans cela tu ne peux pas changer la disposition des éléments de ton site sur les différents breakpoints. Pour cela clique sur l’élément que tu souhaites déplacer dans ta grid et rends toi dans le panneau de style pour sélectionner la propriété “Position : Manual”
- Supprime les colonnes et les rangées pour adapter le contenu. En faisant le contenu à l’intérieur de chaque bloque de ta grid se placera automatiquement en dessous de l’élément qui le précède
Voici où tu peux trouver l'élément Grid dans Webflow
Utilise la propriété CSS Flexbox
Les flexbox sont des éléments qui permettent de créer des mises en page flexibles et adaptables pour chaque taille d'écran. Les flexbox sont très utiles pour aligner le contenu et ajuster les espaces entre les éléments sur les différentes tailles d'écran.
Par exemple tu peux jouer sur l’horizontalité ou la verticalité des éléments ou encore interchanger le positions des éléments.
Utilise la Navigation intelligente de Webflow pour créer des barre de navigation responsive
La navigation est également importante pour un affichage responsive. Sur un écran de téléphone portable, tu voudras peut-être utiliser une navigation "hamburger" qui se rétracte lorsque l'utilisateur clique sur un bouton. Tu peux facilement ajouter cette fonctionnalité avec Webflow en utilisant le composant “Navigation” disponible dans le panneau des éléments. Dans les paramètres de cet élément tu pourras :
- Choisir l’animation d’ouverture de ton menu sur mobile
- Définir sur quelles tailles d’écrans tu souhaites que le menu burger apparaisse
Il est important de s'assurer que la navigation est facilement accessible et intuitive pour les utilisateurs, quelle que soit la taille de l'écran.
Voici où tu peux trouver la navigation intelligente de Webflow
Le responsive de Webflow n’est pas toujours fidèle à la réalité
Parfois, il se peut que le rendu sur les différentes d’écran ne soit pas fidèle à la réalité. Dans ce cas tu peux utiliser des outils tierces pour t’assurer que ton site d’adapte bien sur toutes les tailles d’écran. Chez FunnelLab nous utilisons l’outil Lambda Test.
Lambda Test est un outil en ligne qui te permet de tester ton site sur différents navigateurs et tailles d'écran. Tu peux choisir parmi une large sélection de navigateurs, y compris les navigateurs mobiles et les versions les plus courantes des navigateurs de bureau, tels que Google Chrome, Firefox et Safari.
En utilisant Lambda Test, tu peux simuler les tailles d'écran les plus courantes pour t'assurer que ton site s'affiche correctement sur les différents appareils. Lambda Test te permet également de vérifier les interactions avec les éléments de ton site, tels que les boutons et les liens.
Forme toi sur Webflow avec la FunnelLab No-code Université
Si tu veux apprendre à créer des sites responsive de qualité, tu peux rejoindre la FunnelLab No-code Université. Nous avons crée une plateforme pour permettre aux agences, freelances ou personne en reconversion professionnelle de se former sur l'outil. Tu trouveras plus de 60 heures de formations détaillées sur chaque partie de Webflow avec des sujets concrets à reproduire pour accélérer ton apprentissage.
