Framer breakpoints, en hoe je voorkomt dat je pagina breekt op mobiel

Framer breakpoints komen in drie maten: Desktop, Tablet en Phone. Je bouwt op Desktop en je wijzigingen stromen door naar de twee kleinere maten. Verander je iets op een kleinere maat, dan wordt dat een override die blijft staan. Bijna elke mobiele bug in Framer komt terug op hetzelfde: een vaste breedte in pixels die niemand op fill heeft gezet.

Wat de drie Framer breakpoints echt betekenen

Op de productpagina's van Framer zelf staan de canvas-tabs met het label Desktop 1200 en Tablet 810. De gepubliceerde code op framer.com zegt hetzelfde. De responsive images worden geserveerd met regels voor min-width 1200px, voor 810px tot en met 1199.98px, en voor max-width 809.98px. Desktop dekt dus 1200 en hoger. Tablet dekt ruwweg 810 tot 1199. Phone dekt alles onder 810. Je lay-out moet alle drie de grenzen overleven.

Wijzigingen stromen omlaag, overrides niet omhoog

Pas je iets aan op Desktop, dan stroomt die wijziging door naar Tablet en Phone. Pas je iets aan op Phone, dan heb je een override gemaakt die alleen daar bestaat. Framer markeert elke property die je hebt overschreven, omdat de waarde niet meer overeenkomt met het primaire breakpoint en dus stopt met wijzigingen overnemen. Wil je er een terugdraaien, klik dan op het label van de property en kies Reset Override. Daarom maak je eerst je Desktop-lay-out af en open je pas daarna Phone. Elke override die je te vroeg zet, is een wijziging die je twee keer mag doen.

Vaste breedtes zijn de reden dat je pagina uitloopt

Framer heeft er een kort troubleshooting-artikel over, en dat klopt. Vult je site het scherm niet op het Phone-breakpoint, dan is er bijna altijd één element breder dan het telefoonscherm. Zoek naar twee dingen. Een vaste breedte, bijvoorbeeld 321px, waar je 100% of 1fr wilde. En een Max Width die groter is dan een telefoonscherm. Los allebei op in de sectie Size in het rechterpaneel. Zet Width op 100% of 1fr, en haal Max Width overal weg behalve op je content wrapper. Publiceer daarna opnieuw, want wijzigingen op het canvas komen pas op de live site zodra je publiceert.

Stackrichting en padding doen de rest

Op Phone moeten de meeste horizontale stacks verticaal worden. Selecteer de stack, draai de richting om en zet de gap lager dan je desktopwaarde. Snijd daarna in je sectiepadding. 120 pixel boven en onder ziet er royaal uit op desktop en ziet eruit als een leeg scherm op een telefoon. En 80 pixel padding aan de zijkant laat een telefoonbezoeker door een smalle strook tekst lezen. Veertig en twintig zijn verstandige startwaarden. Loop elke sectie na op het Phone-breakpoint en verklein alles waardoor de bezoeker door niets zit te scrollen.

Typografie krijgt een eigen ronde

Een kop van 64 pixel loopt op een telefoon door tot zes regels en duwt je knop onder de fold. Los dat één keer op in de tekststijl, in plaats van laag voor laag. Open Assets in de linker zijbalk, open de stijl, en zoek in het venster Edit Style de sectie Breakpoints en klik op Add Breakpoint. Framer geeft je Desktop (L), Tablet (M) en Mobile (S). Voor elk daarvan zet je font size, line height, letter spacing en paragraph spacing. Stel je H1 daar één keer in en elke H1 op de site volgt hem.

Test hem zoals bezoekers hem gaan zien

Eerst één eigenaardigheid. Framer maakt een breakpoint onbeschikbaar zodra het breder is dan je browservenster of je schermresolutie, dus op een kleine laptop kan de Desktop-preview grijs worden. De oplossing van Framer: maak het venster breder, ga naar een groter scherm, of publiceer en bekijk het op de live URL. Doe daarna de echte test in een browser. Sleep het venster langzaam van breed naar smal. Let op het precieze punt waar een rij niet meer past, en los het daar op in plaats van bij de breakpointgrens. Open daarna de live URL op je eigen telefoon, via mobiele data, en scroll de hele pagina door. Device emulation laat je geen traag netwerk zien en ook geen browserbalk binnen een app.

Een responsive ronde van tien minuten

Werk van boven naar beneden, sectie voor sectie. Zet elke wrapper op 100% of 1fr. Houd precies één Max Width over, op de content wrapper. Draai horizontale stacks op Phone naar verticaal. Halveer je sectiepadding. Voeg breakpointmaten toe aan de tekststijlen voor H1, H2 en bodytekst. Publiceer opnieuw, open de pagina op een telefoon en check of je de eerste knop ziet zonder te scrollen. Deze ronde vangt het meeste af wat er misgaat, en als je hem een paar keer hebt gedaan kost hij ongeveer tien minuten per pagina.