Tutorial de Bubble.io - Diseño móvil responsivo en Bubble

Videotutorial paso a paso para desarrollar un diseño responsivo en Bubble Mobile.

Chris Strobl
Chris Strobl

En este vídeo exploramos diferentes enfoques para el desarrollo del diseño responsivo móvil en Bubble. Este vídeo puede considerarse un complemento del tutorial sobre marcos: https://youtu.be/Hj_gSDjX7V0

Tutorial de Bubble.io - Diseño móvil responsivo en Bubble

Transcripción del video:
Hola, mi nombre es Chris Strobl y hoy voy a mostrarte cómo creamos un diseño de página responsivo en el Bubble. El lienzo en la burbuja nos da mucha flexibilidad y libertad. Podemos mostrar todo en él. Por otro lado, no es tan fácil asegurarse de que nuestro diseño se adapte siempre perfectamente al navegador, que sea responsivo. Otras herramientas lo hacen mucho más fácil. Trabajar primero en móvil y responsive.

Sin embargo, también tenemos mucha menos libertad y podemos construir mucho menos la aplicación perfecta en otras herramientas. Y es por eso que hoy estoy feliz de mostrarte mi mejor práctica para crear páginas responsivas en Bubble. Estamos utilizando el motor responsivo que proporciona Bubble, así que vamos a entrar directamente en él con un par de ejemplos. Lo primero es que, si entras en la página, verás que por defecto la página tiene un ancho fijo. Yo evitaría eso en la medida de lo posible.

Y es simplemente porque casi todos los que usan Internet lo hacen en un tamaño de pantalla diferente. Siempre pensé que todo el mundo usaba 1440 píxeles o 1920 píxeles de ancho, pero eso no es cierto, hay resoluciones completamente diferentes. Cada día hay más. Porque eso es lo bonito de Internet, que hay navegadores muy diferentes.

Y el diseño responsivo es tan poderoso porque es tu página, tu página es responsiva, es responsiva para cada uno de los navegadores y para cada uno de los usuarios y es una especie de representación perfecta para cada uno de los usuarios. Así que utiliza ese elemento todo lo que puedas y trata de ser receptivo. Lo segundo es, ¿cuál es la anchura de la página? Nos decidimos por esto después de muchas pruebas. 1280 es un ancho de píxel óptimo y eso es porque un iPhone C con 320 píxeles es uno de los teléfonos más comunes en nuestra zona lingüística. Con 1280 píxeles, tenemos exactamente cuatro veces la C del iPhone. Esto significa que es mucho más fácil calcular todas las distancias hacia atrás, porque siempre calculamos 23 y luego extrapolamos dividiendo por cuatro. La altura no es tan relevante. Por supuesto, depende de su contenido. Estamos haciendo varios ejemplos ahora, así que multiplícalo por 4000. Siempre podemos ajustarlo.

Así que empezamos directamente con nuestro primer ejemplo, es decir, dos columnas. Primero, hago un grupo a todo lo ancho de la página. Y este grupo forma el marco en el que se sitúan nuestras dos columnas. Voy a hacerlo azul para que sea muy visible como color de la señal. Por supuesto, también podemos hacerlo transparente. Cuando pusimos la página en vivo, sólo para mostrar mejor cómo reacciona Bubble, ha sido genial para el desarrollo. Ahora estamos haciendo dos columnas y la primera pregunta es ¿cuál es el ancho de nuestras columnas y cuál es el espaciado?

Para eso voy al Grip. Calculadora, la Calculadora de Rejilla y la Calculadora de Rejilla punto DK me permite especificar exactamente el tamaño de mis anchos. Es decir, decimos 1280. Queremos tener 20 píxeles de espacio en cada lado y 20 píxeles entre las columnas. Y ahora, si tenemos cuatro columnas, dijo 295 píxeles, y si tenemos dos columnas, 610, eso significa que hacemos 610. 20 en las teclas. Tanto en el conjunto de opciones como en el. Y queremos 20 píxeles tanto en la parte superior como en los laterales. Este grupo lo hacemos de nuevo en un color para ver. Luego copiamos este grupo.

Y ahora ve 20 píxeles en todos los lados. Ahora insertamos el texto para luego ver también cómo habla el texto, inserta un cuadro de texto. Y hacemos 24 como la altura y un poco de espaciado de 1,5 y eso significa que si tenemos 24 veces 1,5 entonces la altura en la caja es exactamente 36 píxeles. En las teclas subimos hasta el cero que es ahora también y uno de los puntos más importantes es utilizar realmente el espacio completamente hasta el final. Así que para ir a los 610 píxeles. Hacemos un segundo texto. Con 16 píxeles por 1,5 y de nuevo ir al borde. Pero aquí hacemos un espacio de 20 píxeles entre los dos y también un espacio de 20 píxeles hacia la parte inferior. Aquí usamos el generador de Ipsum, hacemos 300 caracteres y Despliegue ipsum d copiar todo.

Ahora copiamos estos dos textos en la otra columna y miramos el conjunto en la vista previa.... Y ya ves, tenemos el cuadro azul, el margen. Aquí también tenemos a los dos hasta el borde. Y si lo hacemos todo más pequeño, en cualquier caso nuestro navegador ya responde. Pero, ¿cómo podemos trabajar con el conjunto de forma más optimizada? Ahora estamos experimentando para mostrar cómo funciona este motor responsivo. Lo primero es Ahora, para describir esto, vamos a hacer dos columnas sin.

Es decir, entramos aquí una vez en el grupo y hacemos las llaves de la API Tramo Vintage Suizo de 100.... También puedes hacer 120, pero para que quede más claro, hagamos 100 cada vez y vayamos a Vista Previa una vez para ver la diferencia. Tenemos una vez sin tamaño máximo y aquí una vez con y podemos ver que ahora los márgenes se van y el espaciado se hace más grande. Si hacemos que todo sea receptivo. ¿Ves que funciona igual? ¿Pero se comporta de manera diferente en los Maxwell? Si ahora quieres que la distancia entre ellos sea de 20, hay un truco para esto, es decir, toma el grupo exterior, hazlo también de 100. Vamos a Vista Previa de nuevo. Y ya ves, ahora las distancias son las mismas y los mariones. Pero el grupo exterior no escala.

Hay otra forma de verlo en el navegador, si haces clic con el botón derecho del ratón y haces clic en explorar y aquí arriba en el conmutador de dispositivos, entonces puedes mirar la página responsive para páginas muy diferentes. A 19 20 se parece a esto o a dos mil cuatrocientos. 1200 800. Y siempre ve como la página es responsiva. Una cosa que es emocionante es, por ejemplo, cuando vamos a iPhone Se. Ahora bien, si queremos que aunque el tamaño de la pantalla sea pequeño tengamos aquí pero una sola columna, pues aquí vamos. Burbuja Muchas posibilidades.

Lo más sencillo es entrar en Responsive Editor y aquí podemos preseleccionar diferentes tamaños, pero también tenemos la opción de pasar siempre por encima. Y actualmente vemos la burbuja alrededor. Se rompe a unos 300 píxeles. Esto se debe a que por un lado tenemos las distancias, 20 píxeles cada una, así que 40 y en el grupo tenemos un menos de 122 píxeles. Son 122. Tenemos dos grupos de 122 cada uno, es decir, 244 y 60 píxeles. ¿Por qué una distancia aquí y otra en el centro? Lo estoy haciendo un poco más grande. Eso significa que tenemos 20 2020, es decir, 60 píxeles y luego el doble de 122. Eso significa que 244 más 60 son 304. Eso significa que exactamente en 304 píxeles caben 305.

Y exactamente en el 304 todo se nos rompe. Pero ahora decimos que queremos que sea más grande. Es decir, que fijamos el minuto al 30%, por ejemplo. Entonces tenemos 183. Por supuesto, tenemos que hacer el 30% aquí también, de lo contrario no es simétrico. Eso significa dos veces 183, y ver bien ahora. ¿Cuándo se rompe todo exactamente? 20, 20, 20, por lo que 60 necesitan espacio más el doble de 183 es exactamente 426 y ahora podemos determinar exactamente cuando quieres que se rompa todo, incluso si dices que debe romperse para el iPhone SE, es decir, 320 píxeles. Pero quizás también quieras optimizar para teléfonos más grandes como el iPhone X u otros. Y eso se puede optimizar ahora.

Es decir, vamos a la vista previa, por ejemplo. Y de nuevo el botón derecho examinar y decir Definitivamente queremos también en el iPhone 10, por lo que 375. ¿Queremos tener una columna? Como dice aquí también por ejemplo el Pixel 2 Pixel tiene 410 píxeles. También sirve para eso. Eso significa que debemos tener alrededor de digo hasta 500 píxeles debe ser una columna. Pero lo que se ve ahora es que realmente hemos optimizado toda nuestra página.

Y aquí está la belleza del editor responsivo: usted puede decidir cómo debe ser todo. ¿Cómo debería verse a 300 píxeles, a 400 píxeles, a 800 píxeles, a 12 80? Pero entonces también si dices, quiero tener un ancho máximo de mis elementos. ¿Ves cómo puedes optimizar todo esto, como en 1920? El siguiente paso es mostrarte cómo hacer todo esto con tres columnas y tres columnas y cuatro columnas, sólo para ver cómo puedes trabajar aquí. Con diferentes formas.

A tres columnas sin Max Quickbook. El primer paso es poner un grupo de vuelta a todo lo ancho. Y dale un color. El segundo paso es Ahora introducimos tres macizos en la calculadora de cuadrícula y 10 es 400 como tamaño. Eso significa que se pone un grupo. 400 en todos los lados a 20 píxeles de distancia. Copias este grupo dos veces. Copiamos estos elementos de texto. Ambos hacen exactamente 400 píxeles. Y de nuevo tener un espacio de 20 píxeles en la parte inferior. Aquí están los dos elementos de texto de nuevo. Y sólo hay que ir a la Vista Previa y eso no se ve nada mal cuando se va a investigar.

Y decir Vamos a hacer todo el 12 80. Vamos a hacer todo para un iPhone. Llaves ¡Oh, qué para un iPhone 10! Tiene muy buena pinta. Entramos en el editor responsivo y vemos qué pasa. Las columnas se hacen más pequeñas. Y tenemos un salto aquí de tres a dos a 764 63. Vamos a saltar y vemos entonces que la tercera columna ocupa el tamaño completo y ya está el primer número. ¿Cuándo hay que saltar exactamente y cómo hay que enfrentarse al 3? Si hacemos un Maxwells del 100%.

Eso significa que lo copiamos todo una vez. Y ahora vamos y hacemos el 100% para todos con la marca suiza, y especialmente en los grupos individuales, que ahora es decisivo para la próxima prueba.

Porque si ahora vamos a un editor responsivo, entonces una vez sin Macris tenemos tres columnas y vemos como esta tercera se convierte en el 100 por ciento o incluso más grande como el 100 por ciento aquí. Un tamaño de 717 en lugar de 400 es mucho mayor, mientras que aquí vemos 345 píxeles, el 86% del tamaño del elemento de 400. Y aquí tenemos 400 píxeles. Pero y aquí viene exactamente el punto que acaba de ver. Estas tres columnas son siempre difíciles, sobre todo en son siempre difíciles, sobre todo en pantallas de tamaño tan mediano. Tres columnas simplemente no se han establecido realmente allí y por la razón de que esta tercera columna entonces siempre se desplaza. Por eso siempre intentamos que se divida por dos en nuestros productos.

Eso significa, y este es también nuestro último ejemplo, o cuatro columnas o dos columnas. Y ahora hacemos otro con cuatro columnas. Haremos otro grupo. Eso ya lo sabemos. 1280 el ancho total, toma un color de nuevo para señalar todo y quiere cuatro columnas. Eso significa que entramos en la calculadora y vemos que 295 píxeles ponen un grupo. Y hazlo en blanco, ¡copia todo de nuevo! 20 píxeles. Y de nuevo toma el texto. 295 píxeles Tomamos el ancho completo. Y míralo ahora. 1920 todo se ve muy bien.

Tal vez una cosa más para que todo sea más claro Hay la opción en el campo de texto para decir Cortar el contenido, el elemento del Talento Sin Código. Hagámoslo aquí, ya que puedes ver la diferencia inmediatamente. A saber, el texto se reduce y con eso tenemos la posibilidad de simplemente tener menos texto para ver esto alrededor de todo también mejor, menos caracteres por así decirlo, si vamos al iPhone 10. ¿Ves que tenemos las cuatro columnas una debajo de la otra? Pero hay un problema con Irán y está aquí. Porque si te das cuenta ahora que tenemos suficiente espacio para ti, entonces tenemos el tema que sin embargo extrañamente con tres más uno. Hay un primer truco para ello, y es que aquí también se agrupan dos columnas. Es decir, tomamos dos columnas de elementos de grupo de clic derecho en el grupo y añadir un color de fondo aquí también, simplemente para ver la diferencia.

Y por supuesto también en el otro lado. Si entramos ahora en el Editor Responsive. Verás, ya no tenemos dos columnas. Pero ahora vemos que el espacio entre los grupos ya no existe. Hay otro truco para esto Extendemos el grupo azul, es decir, el grupo exterior en 20 píxeles. A continuación, ampliamos el grupo rojo en 20 píxeles. Ampliamos este grupo y añadimos un nuevo grupo que tiene exactamente 20 píxeles y la misma anchura. Volvemos a dar a este grupo un tono diferente de azul y ahora tenemos la siguiente función y este es el truco ahora, esto no es visible alrededor de la carga de la página. Pero sólo si la Página Actual es menor que igual.

Y ahora lo hacemos una vez. 12 100 píxeles. Simplemente para demostrarlo. Entonces esto es visible. Y si ahora entramos en el Editor Responsive, vemos lo siguiente en comparación con aquí tenemos ahora la distancia, es decir, tenemos los 63 píxeles y tenemos este grupo. Y este grupo crea esta distancia entre los dos puntos de aquí. Pero sólo lo necesitamos exactamente cuando se rompe alrededor. Eso significa que lo tenemos todo aquí en 2008 píxeles. Eso significa que entramos aquí y decimos si más pequeño es igual a miles de ocho. Añadimos el mismo contrario.

Y también no es visible. Y si ahora vamos a un editor responsivo, vemos. Si vamos a la vista previa ahora, vemos justo. Si lo hacemos todo más pequeño. ¿Tenemos ahora exactamente esta segunda línea y la distancia bajo las cajas? El último punto que quiero mostrarte es lo que sucede con el Max Quickbook? Y qué si los ponemos a 100, eso ya no es un gran acto. Pero creo que es importante para la integridad tener eso. Y estamos poniendo el 100% aquí ahora. 100 por ciento y ver.

Y finalmente, esto es lo que sucede. Narayen Responde, 1920. Y ves, tenemos las cuatro columnas aquí ahora al 100%. Hemos visto Bubble y el motor responsivo no es del todo trivial, pero por otro lado, sobre todo si tomas el ejemplo de los mejores sitios web del mundo, ya sea Airbnb o Facebook, no lo hagas demasiado complicado.

Lo que he aprendido es a pensar siempre en el diseño responsivo y tratar de hacerlo lo más rápido posible. Así que, desde el principio, optimice su sitio web para el diseño responsivo. Y si encuentra un error, busque una solución inmediatamente después y no desarrolle siempre primero todo su sitio web para un dispositivo y luego intente adaptarlo. Al final, Bubble lo hace muy bien y con mucha ayuda y el motor de respuesta ya es muy bueno. Así que no te compliques demasiado y confía en Bubble y trabaja con el motor responsivo. Nunca es perfecto, pero es un resultado muy bueno. Así que te deseo que sigas teniendo éxito y que nos veamos pronto.

Diseño receptivo