Les breakpoints Framer, et comment empêcher votre page de casser sur mobile

Les breakpoints Framer existent en trois tailles : Desktop, Tablet et Phone. Vous construisez sur Desktop, et vos changements descendent vers les deux tailles plus petites. Changez quelque chose sur une taille plus petite et ça devient un override qui reste en place. Presque tous les bugs mobiles dans Framer viennent de la même chose, une largeur fixe en pixels que personne n'a passée en remplissage.

Ce que veulent vraiment dire les trois breakpoints Framer

Les pages produit de Framer montrent des onglets de canvas nommés Desktop 1200 et Tablet 810. Le code publié sur framer.com dit la même chose. Ses images responsives sont servies avec des règles pour min-width 1200px, pour 810px jusqu'à 1199.98px, et pour max-width 809.98px. Desktop couvre donc 1200 et au-dessus. Tablet couvre à peu près 810 à 1199. Phone couvre tout ce qui est en dessous de 810. Votre mise en page doit tenir sur les trois.

Les changements descendent, les overrides ne remontent pas

Modifiez sur Desktop et le changement descend dans Tablet et Phone. Modifiez sur Phone et vous créez un override qui ne vit que là. Framer met en évidence chaque propriété que vous avez surchargée, parce que sa valeur ne correspond plus au breakpoint principal et cesse donc d'hériter des changements. Pour l'annuler, cliquez sur le nom de la propriété et faites Reset Override. C'est pour ça qu'on finit d'abord la mise en page Desktop, puis qu'on ouvre Phone. Chaque override posé trop tôt est un changement que vous ferez deux fois.

Les largeurs fixes, voilà pourquoi la page déborde

Framer a un court article de dépannage là-dessus, et il vise juste. Si votre site ne remplit pas l'écran au breakpoint Phone, un élément est presque toujours plus large que l'écran du téléphone. Cherchez deux choses. Une largeur fixe, du genre 321px, là où vous vouliez 100% ou 1fr. Et une Max Width plus grande qu'un écran de téléphone. Corrigez les deux dans la section Size du panneau de droite. Mettez Width à 100% ou 1fr, et retirez Max Width partout sauf sur votre conteneur de contenu. Puis republiez, parce que les changements du canvas n'arrivent sur le site en ligne qu'à la publication.

La direction des stacks et les marges font le reste

Sur Phone, la plupart des stacks horizontaux doivent passer en vertical. Sélectionnez le stack, changez la direction, et réduisez l'écart sous votre valeur desktop. Réduisez ensuite le padding des sections. 120 pixels en haut et en bas font généreux sur ordinateur et font écran vide sur un téléphone. Et 80 pixels de marge latérale laissent le visiteur mobile lire une bande étroite. Quarante et vingt sont des points de départ raisonnables. Parcourez chaque section au breakpoint Phone et réduisez tout ce qui oblige le visiteur à scroller dans le vide.

La typo demande son propre passage

Un titre de 64 pixels passe à six lignes sur un téléphone et pousse votre bouton sous la ligne de flottaison. Corrigez-le une fois dans le style de texte, pas calque par calque. Ouvrez Assets dans la barre latérale gauche, ouvrez le style, et dans la fenêtre Edit Style trouvez la section Breakpoints puis cliquez sur Add Breakpoint. Framer vous donne Desktop (L), Tablet (M) et Mobile (S). Pour chacun, vous pouvez régler la taille de police, l'interligne, l'espacement des lettres et l'espacement des paragraphes. Réglez votre H1 là une fois et tous les H1 du site suivent.

Testez comme vos visiteurs vont voir la page

Une bizarrerie d'abord. Framer rend un breakpoint indisponible quand il est plus large que votre fenêtre de navigateur ou que la résolution de votre écran, donc sur un petit portable l'aperçu Desktop peut être grisé. La solution de Framer : élargir la fenêtre, passer sur un écran plus grand, ou publier et prévisualiser sur l'URL en ligne. Faites ensuite le vrai test dans un navigateur. Rétrécissez la fenêtre lentement, de large à étroit. Repérez le point exact où une rangée ne tient plus, et corrigez là plutôt qu'à la limite du breakpoint. Après ça, ouvrez l'URL en ligne sur votre propre téléphone, en réseau mobile, et scrollez toute la page. L'émulation d'appareil ne vous montrera ni un réseau lent ni la barre d'outils d'un navigateur intégré.

Un passage responsive en dix minutes

Travaillez de haut en bas, section par section. Mettez chaque conteneur à 100% ou 1fr. Gardez exactement une Max Width, sur le conteneur de contenu. Passez les stacks horizontaux en vertical sur Phone. Divisez par deux le padding de vos sections. Ajoutez des tailles par breakpoint aux styles H1, H2 et texte courant. Republiez, ouvrez la page sur un téléphone, et vérifiez que le premier bouton se voit sans scroller. Ce passage attrape l'essentiel des problèmes, et une fois que vous l'avez fait quelques fois il prend environ dix minutes par page.