Dans l'écosystème Webflow, les breakpoints sont les éléments essentiels de toute structure adaptative. Ils s'articulent autour de quatre vues de référence - Desktop, Tablette, Mobile Paysage et Mobile Portrait - accessibles via les icônes dédiées situées en haut de l'interface. Ces breakpoints déterminent la manière dont votre contenu s'ajuste et s'affiche selon la résolution de l'écran.
À première vue, ça semble simple : on clique sur l'icône "Mobile" et on ajuste la taille du texte. Mais en réalité, les breakpoints sont le cœur de la stratégie "Responsive" de votre site. Mal les utiliser, c'est s'exposer à un site qui se casse dès qu'on change d'écran.
Voici tout ce qu'il faut savoir pour dompter les breakpoints comme un pro.
1. Le Contenu vs le Style
Avant d'ajuster vos designs, il y a un point capital à comprendre : Les breakpoints ne concernent que le style (CSS), pas le contenu.
- Le Texte : Le texte lui-même (les mots, les phrases, les fautes de frappe) est le même partout. Si vous modifiez une phrase ou que vous réécrivez un paragraphe en étant sur la vue Mobile, cette modification sera répercutée sur tous les autres breakpoints, y compris le Desktop.
- Le Style (Responsive) : En revanche, la taille de la police, la couleur, l'alignement ou l'espacement peuvent varier d'un appareil à l'autre.
Conseil : Si vous souhaitez un texte radicalement différent sur mobile (par exemple un titre beaucoup plus court), vous ne pouvez pas simplement l'éditer. Vous devrez créer deux éléments distincts et utiliser le paramètre "Display: None" pour masquer celui qui ne convient pas sur chaque appareil.
2. Comprendre la Cascade : La règle d'or
Sur Webflow, le style est descendant. L’écran par défaut est le Desktop (l’icône d’ordinateur au centre), ce qui signifie que son style s’applique initialement à toutes les tailles d’écrans, qu'ils soient plus grands ou plus petits.
Pour bien naviguer dans cette cascade, il faut retenir deux principes fondamentaux :
A. Les modifications ne remontent jamais
Une modification apportée à un breakpoint inférieur ne s'applique jamais au breakpoint supérieur.
- Exemple : Si vous changez la police de votre titre sur la vue Tablette, ce changement sera visible sur mobile, mais votre version Desktop restera inchangée.
B. Attention aux styles déjà "forcés" (overriding)
Une modification sur un breakpoint supérieur ne s'appliquera pas nécessairement aux écrans plus petits si une valeur y a déjà été définie manuellement à cet endroit.
- Exemple : Si vous avez déjà défini une couleur de texte bleue sur Mobile, et qu'ensuite vous décidez de changer la couleur sur Tablette pour du rouge, votre mobile restera bleu. Le style spécifique créé sur le petit écran "écrase" l'héritage qui vient du haut.
L'astuce : Pour savoir si un style est hérité ou non, regardez la propriété dans le panneau de droite. Si elle est orange, c'est une modification locale. Si elle est bleue, elle est héritée d'un parent.
3. Attention aux "Larger Breakpoints"
Par défaut, Webflow propose 4 vues : Desktop, Tablette, Mobile Paysage et Mobile Portrait. Mais pour les écrans géants, il existe des breakpoints supplémentaires (1280px, 1440px, 1920px).
Attention : Contrairement aux mobiles, ces breakpoints "larges" fonctionnent en sens inverse. Les modifications faites sur le breakpoint 1920px ne redescendent pas vers le Desktop classique. C'est toujours le Desktop qui reste la "source de vérité" centrale.
4. Pourquoi mon design "casse" entre deux breakpoints ?
C'est l'erreur classique. On ajuste pour l'iPhone (320px) et pour le Desktop (1200px), mais on oublie tout ce qu'il y a entre les deux. Les breakpoints Webflow sont des points de bascule, pas des compartiments étanches.
5. Masquer des éléments selon l'appareil
Webflow permet de masquer des éléments spécifiquement sur certains breakpoints (Display : None). C'est utile pour simplifier la navigation sur mobile ou pour gérer justement des contenus textuels différents (comme vu en section 1).
- Conseil d'ergonomie : N'abusez pas de cette fonction. Si vous devez masquer la moitié de votre page sur mobile, c'est que votre design de base est sans doute trop complexe. Pensez "Mobile First" dans votre structure logique !
6. Notre Check-list pour un workflow fluide
- Designez sur Desktop jusqu'à ce que la structure soit solide.
- Passez à la Tablette : Ajustez principalement les colonnes de vos Grids ou vos Flexbox.
- Vérifiez le Mobile Paysage : Surveillez la hauteur des éléments pour éviter que l'utilisateur n'ait à scroller indéfiniment.
- Terminez par le Mobile Portrait : Réduisez les marges (paddings) pour maximiser l'espace de lecture.
- Utilisez le "Drag" : Dans le Designer, étirez manuellement le bord de la zone de travail pour tester la fluidité entre chaque point de bascule.
Conclusion
Maîtriser les breakpoints permet d'assurer la cohérence d'un site sur tous les supports. En appliquant rigoureusement la logique de cascade et en distinguant la gestion du style de celle du contenu, vous optimiserez la maintenance de vos projets tout en garantissant une consultation fluide pour vos utilisateurs.
.svg)
