I breakpoint di Framer, e come evitare che la pagina si rompa su mobile

I breakpoint di Framer sono tre: Desktop, Tablet e Phone. Costruisci su Desktop e le tue modifiche scendono verso le due misure più piccole. Cambia qualcosa su una misura più piccola e diventa un override che resta lì. Quasi ogni bug mobile in Framer torna a una cosa sola, una larghezza fissa in pixel che nessuno ha portato a riempimento.

Cosa vogliono dire davvero i tre breakpoint di Framer

Le pagine di prodotto di Framer mostrano le tab del canvas etichettate Desktop 1200 e Tablet 810. Il codice pubblicato su framer.com dice la stessa cosa. Le sue immagini responsive vengono servite con regole per min-width 1200px, per 810px fino a 1199.98px e per max-width 809.98px. Quindi Desktop copre 1200 e oltre. Tablet copre più o meno da 810 a 1199. Phone copre tutto quello che sta sotto 810. Il tuo layout deve sopravvivere a tutte e tre le linee.

Le modifiche scendono, gli override non salgono

Modifica su Desktop e il cambiamento scende in Tablet e Phone. Modifica su Phone e hai creato un override che vive solo lì. Framer evidenzia ogni proprietà che hai sovrascritto, perché i suoi valori non corrispondono più al breakpoint principale e quindi smettono di ereditare le modifiche. Per annullarne uno, clicca sull'etichetta della proprietà e premi Reset Override. Ecco perché prima finisci il layout Desktop e poi apri Phone. Ogni override messo troppo presto è una modifica che finirai per fare due volte.

Le larghezze fisse sono il motivo per cui la pagina straborda

Framer ha un breve articolo di troubleshooting su questo, e lo azzecca. Se il tuo sito non riempie lo schermo sul breakpoint Phone, quasi sempre c'è un elemento più largo dello schermo del telefono. Cerca due cose. Una larghezza fissa, tipo 321px, dove volevi 100% o 1fr. E un Max Width più grande dello schermo di un telefono. Sistemali entrambi nella sezione Size del pannello di destra. Metti Width a 100% o 1fr e togli Max Width da tutto tranne che dal contenitore del contenuto. Poi ripubblica, perché le modifiche sul canvas arrivano sul sito live solo quando pubblichi.

Direzione degli stack e padding fanno il resto

Su Phone, quasi tutti gli stack orizzontali devono diventare verticali. Seleziona lo stack, gira la direzione e taglia il gap rispetto al valore desktop. Poi taglia il padding delle sezioni. 120 pixel sopra e sotto sembrano generosi su desktop e sembrano una schermata vuota su un telefono. E 80 pixel di padding laterale lasciano chi legge da telefono con una striscia di testo strettissima. Quaranta e venti sono punti di partenza sensati. Percorri ogni sezione sul breakpoint Phone e riduci tutto quello che costringe il visitatore a scrollare nel vuoto.

Il testo vuole un passaggio a parte

Un titolo da 64 pixel va a capo su sei righe sul telefono e spinge il pulsante sotto il fold. Sistemalo una volta nello stile di testo, non layer per layer. Apri Assets nella sidebar di sinistra, apri lo stile e nella finestra Edit Style trova la sezione Breakpoints e clicca Add Breakpoint. Framer ti dà Desktop (L), Tablet (M) e Mobile (S). Per ognuno puoi impostare corpo, interlinea, spaziatura tra le lettere e spazio tra i paragrafi. Imposta lì il tuo H1 una volta e ogni H1 del sito lo segue.

Provalo come lo vedranno i visitatori

Prima una stranezza. Framer rende un breakpoint non disponibile quando è più largo della finestra del browser o della risoluzione del monitor, quindi su un laptop piccolo l'anteprima Desktop può risultare grigia. La soluzione di Framer è allargare la finestra, passare a un monitor più grande, oppure pubblicare e guardare l'anteprima sull'URL live. Poi fai il test vero nel browser. Trascina la finestra lentamente da larga a stretta. Guarda in quale punto esatto una riga smette di stare dentro e sistemala lì, invece che al confine del breakpoint. Dopo di che apri l'URL live sul tuo telefono, sotto rete mobile, e scrolla tutta la pagina. L'emulazione dei device non ti mostrerà una rete lenta né la barra di un browser dentro un'app.

Un passaggio responsive da dieci minuti

Lavora dall'alto verso il basso, una sezione alla volta. Metti ogni contenitore a 100% o 1fr. Tieni esattamente un Max Width, sul contenitore del contenuto. Su Phone gira gli stack orizzontali in verticali. Dimezza il padding delle sezioni. Aggiungi le misure per breakpoint agli stili di H1, H2 e testo del corpo. Ripubblica, apri la pagina su un telefono e controlla di vedere il primo pulsante senza scrollare. Questo passaggio intercetta gran parte di quello che va storto, e una volta che l'hai fatto qualche volta ti porta via una decina di minuti a pagina.