Breakpoints de Framer y cómo evitar que tu página se rompa en el móvil

Los breakpoints de Framer vienen en tres tamaños: Desktop, Tablet y Phone. Construyes en Desktop y tus cambios bajan a los dos tamaños pequeños. Si cambias algo en un tamaño pequeño, se convierte en un override que se queda ahí quieto. Casi todos los fallos en móvil dentro de Framer vienen de lo mismo: un ancho fijo en píxeles que nadie cambió a rellenar.

Qué significan de verdad los tres breakpoints de Framer

Las propias páginas de producto de Framer enseñan las pestañas del canvas con las etiquetas Desktop 1200 y Tablet 810. El código publicado en framer.com dice lo mismo. Sus imágenes responsive se sirven con reglas para min-width 1200px, para 810px hasta 1199.98px y para max-width 809.98px. Así que Desktop cubre 1200 hacia arriba. Tablet cubre más o menos de 810 a 1199. Phone cubre todo lo que está por debajo de 810. Tu layout tiene que sobrevivir a esas tres líneas.

Los cambios bajan, los overrides no suben

Edita en Desktop y el cambio baja a Tablet y a Phone. Edita en Phone y has creado un override que vive solo ahí. Framer resalta cada propiedad que has sobrescrito, porque su valor ya no coincide con el del breakpoint principal y por eso deja de heredar cambios. Para deshacer uno, pulsa la etiqueta de la propiedad y dale a Reset Override. Por eso terminas primero el layout de Desktop y luego abres Phone. Cada override que pones demasiado pronto es un cambio que acabas haciendo dos veces.

Los anchos fijos son la razón de que la página se desborde

Framer tiene un artículo corto de resolución de problemas sobre esto, y acierta. Si tu sitio no llena la pantalla en el breakpoint Phone, casi siempre hay un elemento más ancho que la pantalla del móvil. Busca dos cosas. Un ancho fijo, tipo 321px, donde querías 100% o 1fr. Y un Max Width mayor que la pantalla de un móvil. Arregla las dos en la sección Size del panel derecho. Pon Width a 100% o a 1fr y quita el Max Width de todo menos del contenedor de contenido. Luego vuelve a publicar, porque los cambios del canvas solo llegan al sitio en vivo cuando publicas.

La dirección de los stacks y el padding hacen el resto

En Phone, casi todos los stacks horizontales tienen que pasar a verticales. Selecciona el stack, cambia la dirección y baja el gap por debajo del valor de escritorio. Después recorta el padding de sección. 120 píxeles arriba y abajo se ven generosos en escritorio y se ven como una pantalla vacía en el móvil. Y 80 píxeles de padding lateral dejan al visitante de móvil leyendo una tira estrecha de texto. 40 y 20 son puntos de partida sensatos. Recorre cada sección en el breakpoint Phone y encoge todo lo que obligue al visitante a hacer scroll por encima de la nada.

La tipografía necesita su propia pasada

Un titular de 64 píxeles se parte en seis líneas en un móvil y empuja el botón por debajo del fold. Arréglalo una vez en el estilo de texto, no capa por capa. Abre Assets en la barra lateral izquierda, abre el estilo y, en el diálogo Edit Style, busca la sección Breakpoints y pulsa Add Breakpoint. Framer te da Desktop (L), Tablet (M) y Mobile (S). En cada uno puedes fijar tamaño de fuente, interlineado, espaciado entre letras y espaciado entre párrafos. Configura tu H1 ahí una vez y todos los H1 del sitio lo siguen.

Pruébalo como lo van a ver los visitantes

Primero, una rareza. Framer deja un breakpoint no disponible cuando es más ancho que la ventana del navegador o que la resolución de tu monitor, así que en un portátil pequeño la vista de Desktop se puede quedar en gris. La solución de Framer es ensanchar la ventana, pasarte a un monitor más grande, o publicar y mirar la URL en vivo. Después haz la prueba de verdad en un navegador. Arrastra la ventana despacio de ancha a estrecha. Fíjate en el punto exacto en el que una fila deja de caber, y arréglalo ahí en vez de en el límite del breakpoint. Luego abre la URL en vivo en tu propio móvil, con datos móviles, y recorre la página entera. La emulación de dispositivos no te va a enseñar una red lenta ni la barra de un navegador dentro de una app.

Una pasada responsive de diez minutos

Trabaja de arriba abajo, sección a sección. Pon todos los contenedores a 100% o a 1fr. Deja exactamente un Max Width, en el contenedor de contenido. Cambia los stacks horizontales a verticales en Phone. Corta a la mitad el padding de sección. Añade tamaños por breakpoint a los estilos de H1, H2 y texto de cuerpo. Vuelve a publicar, abre la página en un móvil y comprueba que se ve el primer botón sin bajar. Esta pasada caza casi todo lo que suele salir mal, y cuando la has hecho unas cuantas veces te lleva unos diez minutos por página.