WebflowHANDOFF RESPONSIVE DEV
Prérequis
- Styleguide Webflow avec containers posés
- Breakpoints alignés avec la stack cible
- Pages clés testées tablette et mobile
- Liste des sections à comportement spécifique
Le responsive Webflow mal documenté génère des écarts entre maquette et intégration : breakpoints incohérents, ordre flex oublié. Le développeur ne doit pas deviner les comportements par viewport. Vous allez aligner classes, grilles et livrables pour un handoff fiable vers l’équipe dev.
Cadrer breakpoints et containers
Project Settings → Breakpoints : alignez desktop, tablette et mobile sur la grille du projet. Le container `u-container` porte max-width et padding par breakpoint.
Comparez avec figma-grille-responsive-handoff si Figma a précédé Webflow : les deux sources doivent converger sur les mêmes largeurs utiles.
Flex, grid et ordre des blocs
Sur hero, pricing et footer, vérifiez flex-direction et wrap par breakpoint. Utilisez `order` pour réorganiser sans déplacer le DOM si le SEO l’exige.
Marquez dans le Navigator les éléments dont l’ordre change : le dev utilisera `order` ou restructurera le JSX en connaissance de cause.
Livrables handoff et recette responsive
Document handoff : URL des pages références, tokens spacing, menu mobile (overlay, trap focus). Testez sur appareils réels — un menu peut être masqué par `overflow: hidden` sur iOS.
Signalez les composants qui seront recodés hors Webflow et les limites des interactions IX2 reproductibles en code.
Erreurs fréquentes
Ajuster uniquement desktop puis « réparer » en mobile en urgence.
Images sans `object-fit` : déformation entre breakpoints.
Interactions menu non décrites : le dev recode un comportement différent.
Scroll horizontal sur mobile par élément plus large que 100 vw.
Ce qu’il faut retenir
Breakpoints alignés stack + container unique = base handoff solide.
Documentez flex, order et états masqués par viewport.
Tests appareils réels avant validation client.
FAQ
L’important est la couverture systématique de chaque section en mobile avant handoff, quel que soit l’ordre de travail. Documentez les écarts breakpoint par breakpoint dans la fiche handoff.
Capture vidéo courte + paramètres trigger, easing, durée. Précisez si l’équivalent doit être en CSS, GSAP ou abandonné en reduced-motion.
Webflow est la source de vérité visuelle live ; Figma reste utile pour l’amont brand. Évitez les contradictions de spacing.
