Breakpoints do Framer, e como parar de quebrar a página no celular

Os breakpoints do Framer vêm em três tamanhos: Desktop, Tablet e Phone. Você constrói no Desktop e as suas mudanças descem para os dois tamanhos menores. Mude algo num tamanho menor e aquilo vira um override que fica travado ali. Quase todo bug de celular no Framer volta a uma coisa só: uma largura fixa em pixels que ninguém trocou por preenchimento.

O que os três breakpoints do Framer significam

As próprias páginas de produto do Framer mostram as abas do canvas marcadas como Desktop 1200 e Tablet 810. O código publicado em framer.com diz o mesmo. As imagens responsivas de lá são servidas com regras para min-width 1200px, para 810px até 1199.98px, e para max-width 809.98px. Ou seja, Desktop cobre 1200 para cima. Tablet cobre mais ou menos de 810 a 1199. Phone cobre tudo abaixo de 810. O seu layout precisa sobreviver às três linhas.

As mudanças descem, os overrides não sobem

Edite no Desktop e a mudança desce para Tablet e Phone. Edite no Phone e você criou um override que vive só ali. O Framer destaca toda propriedade que você sobrescreveu, porque o valor dela deixou de bater com o breakpoint principal e por isso para de herdar mudanças. Para desfazer uma, clique no rótulo da propriedade e escolha Reset Override. É por isso que você termina o layout do Desktop primeiro e só depois abre o Phone. Todo override criado cedo demais é uma mudança que você acaba fazendo duas vezes.

Largura fixa é o motivo de a página estourar

O Framer tem um artigo curto de solução de problemas sobre isso, e ele acerta. Se o seu site não preenche a tela no breakpoint Phone, quase sempre existe um elemento mais largo que a tela do celular. Procure duas coisas. Uma largura fixa, tipo 321px, onde você queria 100% ou 1fr. E um Max Width maior que a tela de um celular. Corrija os dois na seção Size do painel da direita. Coloque Width em 100% ou 1fr e tire o Max Width de tudo, menos do seu contêiner de conteúdo. Depois republique, porque as mudanças no canvas só chegam ao site no ar quando você publica.

Direção da pilha e espaçamento fazem o resto

No Phone, a maioria das pilhas horizontais precisa virar vertical. Selecione a pilha, vire a direção e diminua o gap em relação ao valor do desktop. Depois corte o padding das seções. Um espaço de 120 pixels em cima e embaixo parece generoso no desktop e vira tela vazia no celular. E 80 pixels de espaço lateral deixam o visitante lendo uma tira estreita de texto. Quarenta e vinte são pontos de partida sensatos. Passe por cada seção no breakpoint Phone e encolha tudo que faz a pessoa rolar por nada.

A tipografia precisa da própria passada

Um título de 64 pixels vira seis linhas no celular e empurra o seu botão para baixo da dobra. Resolva uma vez no estilo de texto, e não camada por camada. Abra Assets na barra lateral esquerda, abra o estilo e, na janela Edit Style, procure a seção Breakpoints e clique em Add Breakpoint. O Framer dá Desktop (L), Tablet (M) e Mobile (S). Para cada um você define tamanho de fonte, altura de linha, espaçamento entre letras e espaçamento entre parágrafos. Ajuste o seu H1 ali uma vez e todos os H1 do site seguem esse ajuste.

Teste do jeito que o visitante vai ver

Uma esquisitice primeiro. O Framer deixa um breakpoint indisponível quando ele é mais largo que a sua janela de navegador ou que a resolução do monitor, então num notebook pequeno a prévia do Desktop pode ficar cinza. A saída indicada pelo Framer é alargar a janela, ir para um monitor maior, ou publicar e ver na URL no ar. Depois faça o teste de verdade no navegador. Arraste a janela devagar do largo para o estreito. Observe o ponto exato em que uma linha deixa de caber e corrija ali, em vez de corrigir na borda do breakpoint. Em seguida, abra a URL no ar no seu próprio celular, usando dados móveis, e role a página inteira. A emulação de dispositivo não mostra rede lenta nem a barra de navegador dentro de um aplicativo.

Uma passada de responsivo em dez minutos

Trabalhe de cima para baixo, uma seção por vez. Coloque todo contêiner em 100% ou 1fr. Mantenha exatamente um Max Width, no contêiner de conteúdo. Vire as pilhas horizontais para vertical no Phone. Corte o padding das seções pela metade. Adicione tamanhos por breakpoint nos estilos de H1, H2 e corpo de texto. Republique, abra a página num celular e confira se dá para ver o primeiro botão sem rolar. Essa passada pega quase tudo que dá errado, e depois de algumas vezes leva uns dez minutos por página.