Diseñar una aplicación en Bubble empieza por dominar el nuevo motor responsivo basado en Flexbox, la herramienta que reemplaza al editor antiguo y define el futuro del no code en esta plataforma. Aquí aprendes a configurar tu primera página, activar el modo responsivo y entender por qué el ancho de 1280 píxeles es la mejor decisión para que tu aplicación funcione en cualquier dispositivo.

¿Qué es el motor responsivo de Bubble y por qué importa?

El motor responsivo es la nueva forma en que Bubble construye páginas web adaptables. Fue anunciado en noviembre de 2021 [01:00] y se convirtió en una de las novedades más celebradas por la comunidad de desarrolladores.

La razón es simple: está construido sobre Flexbox, el estándar de diseño web que permite que los elementos se acomoden de forma fluida según el tamaño de pantalla. Bubble ya confirmó que no volverá a soportar el editor antiguo, así que aprender este motor no es opcional, es el camino.

¿Qué es Flexbox? Es un sistema de diseño web que organiza elementos en filas o columnas y los adapta automáticamente al espacio disponible. Bubble lo usa como base de su nuevo motor.

¿Dónde encuentro el canvas para empezar a diseñar?

Dentro de Bubble, el botón Design en el menú izquierdo abre el canvas, que es el lienzo donde vas a dibujar la estructura de tu aplicación. Ahí defines qué se ve, dónde se ve y cómo se comporta cada elemento.

¿Cómo activo el modo responsivo en una página de Bubble?

La página Index es la principal de tu aplicación, la primera que verá cualquier usuario al abrir la app en el navegador. Para empezar a trabajar con ella, selecciónala desde el desplegable en la parte superior izquierda del editor.

Justo al lado vas a ver un botón azul. Ese botón es la llave para migrar la página al nuevo motor responsivo. Al presionarlo, Bubble te pide confirmación dos veces antes de aplicar el upgrade [02:30].

Un detalle importante: una vez que migras una página al motor responsivo, no puedes volver atrás. Es un cambio definitivo, así que hazlo con la seguridad de que vas a trabajar con el estándar actual de la plataforma.

Si la página tarda en actualizarse, refresca el navegador. Cuando el botón azul desaparece, ya estás trabajando en el nuevo motor.

¿Qué configuración inicial debo darle a mi página?

Con la página migrada, haz clic derecho sobre el canvas y selecciona Edit. Eso abre el editor de propiedades, donde vas a configurar tres aspectos clave: título, ancho y container layout.

Lo primero es ponerle un título a la página, algo descriptivo que identifique tu aplicación. Después, en la pestaña Layout, vienen las decisiones que marcan la diferencia.

¿Por qué usar 1280 píxeles de ancho en lugar de 1080?

Bubble define por defecto un ancho de 1080 píxeles, pero la recomendación es cambiarlo a 1280 píxeles [04:00]. La lógica detrás de este número es matemática y estratégica.

• 1280 es múltiplo de 320.
• 320 píxeles es el ancho mínimo que queremos soportar.
• 320 corresponde al tamaño de pantalla de un iPhone 5, considerado el teléfono más popular a nivel mundial como referencia de pantalla pequeña.

Si tu aplicación se ve bien en 320 píxeles, se va a ver bien en cualquier dispositivo más grande. Por eso conviene usar siempre múltiplos de 320 al definir anchos en Bubble.

¿Por qué optimizar para 320 píxeles? Porque es el ancho de pantalla más pequeño que necesitas cubrir. Si tu app funciona ahí, funciona en celulares, tablets y desktops sin problema.

¿Qué hace el container layout y cuál debo elegir?

El container layout define cómo se comportan los elementos dentro de tu página. Bubble trae por defecto la opción Fixed, que deja cada elemento exactamente donde lo colocas, sin adaptarse al tamaño de pantalla.

Esa configuración no aprovecha la potencia del nuevo motor. La opción que sí lo hace es Column, que apila los elementos uno debajo del otro y permite que se reorganicen según el dispositivo [05:30].

Con Column activado, tu página queda lista para empezar a recibir elementos visuales que se comportarán de forma responsiva desde el primer momento.

¿Ya migraste tu página al nuevo motor? Cuéntame en los comentarios qué ancho elegiste para tu primer proyecto.