El diseño responsive es una metodología de diseño de páginas web en la que un sitio web se construye de manera flexible para que pueda transformarse según el dispositivo desde el que se accede. En vez de construir varias versiones de una misma página web, el diseño responsive pretende hacer que los elementos se modifiquen automáticamente cuando el tamaño de la pantalla cambie.
A continuación, te presentamos cinco patrones de layout para diseño responsive que pueden inspirarte a la hora de diseñar la disposición de tus elementos en distintos dispositivos para el diseño responsive web.
Column drop
El patrón de layout responsive column drop piensa en cómo convertir una página web diseñada con columnas para PC en una página web para móvil. La idea de este patrón es que, cuando la pantalla se hace más pequeña, las columnas se apilan verticalmente cuando no entran en la pantalla.
Imagina que hay una página web con tres columnas; al inicio, la tercera columna pasará a estar debajo de las primeras dos; luego, estarán las tres apiladas verticalmente. En una pantalla mediana estas columnas no cambiarán de tamaño en su ancho, pero en una pantalla pequeña las columnas se volverán más angostas para ocupar el ancho del móvil.
El orden de las columnas, de los patrones de diseño, puede cambiar dependiendo de la disposición de tus elementos. Es decir, el patrón de layout column drop no solo apila las columnas, sino que también juega con su orden para mejorar la experiencia de usuario.
Si tienes dudas sobre cómo ejecutar el patrón de layout responsive column drop, te invitamos a revisar estas líneas de código en el sitio web CodePen. Allí descubrirás que el número de columnas cambia dependiendo del ancho de la pantalla. Para hacer esto del responsive y los patrones de diseño, el programador se basó en el uso de media queries, una etiqueta que nos permite hacer consultas de medios para hacer que nuestra página web se modifique cuando las características del dispositivo, como el ancho de la pantalla y el tipo de dispositivo, cambian.
Mostly Fluid
El siguiente de los patrones de layout para diseño responsive que queremos mencionar es mostly fuid. Este determina que, en las pantallas grandes o medianas, se mantiene el mismo tamaño de la página web y simplemente se ajustan los márgenes de las pantallas más anchas. Bajo este layout, podemos determinar un ancho máximo y hacer que, tras este ancho, simplemente haya más margen a lado y lado, dejando la página web centrada. A la hora de modificar la página web a pantallas más pequeñas, este patrón funciona como el patrón column drop del diseño responsive web.
Layout Shifter
El patrón layout shifter es, dentro de los patrones de layout para diseño responsive, el más complejo de ver y de mantener. Sin embargo, es el patrón más receptivo al cambio de dispositivo. En lugar de apilar las columnas verticalmente, este patrón propone realizar cambios en los tamaños de los elementos y su orden con el diseño responsive web.
Off Canvas
Otro de los patrones de layout responsive para diseño es off canvas, que se puede traducir como fuera de cuadro. Su nombre indica que, en lugar de apilar verticalmente el contenido, los elementos menos usados se colocan fuera de la pantalla. De este modo, es importante que le demos al usuario una forma de revelar estos elementos mediante algún tipo de interacción responsive. Un ejemplo de este patrón o patrones CSS son los menú de hamburguesa, que están ocultos fuera de la pantalla y se revelan mediante la interacción del usuario. En este caso concreto, la interacción es pulsar un icono.
Tiny Tweaks
La expresión tiny tweaks se refiere a pequeños cambios. Como su nombre indica, este es uno de los patrones de layout para diseño responsive y determina que la mejor manera de modificar nuestra página web no es mediante la posición de los bloques ni los grandes elementos, sino mediante la realización de pequeños cambios en el diseño. Esto puede ser, por ejemplo, ajustar el tamaño de la fuente, cambiar el tamaño de las imágenes o deslazar el contenido de diferentes maneras.
Estos cambios los podemos establecer mediante media queries o mediante reglas o patrones CSS como max-width.
¿Cómo utilizar los patrones de layout para diseño responsive?
Dentro de la metodología de diseño responsive, hay distintas formas de empezar a diseñar con patrones de diseño. Hay algunos patrones CSS que prefieren seguir el método mobile first, en el que se diseña primero la disposición de elementos para el móvil y luego se expande el diseño en relación al tamaño de la pantalla. Esto se hace porque en el móvil hay menos espacio y más restricciones, entonces el diseño se vuelve más fácil a medida que se expande.
Sin embargo, el diseño responsive es en gran medida prueba y error. Aunque aquí te presentamos cinco patrones de layout para diseño responsive, la realidad es que mucho dependerá de los elementos que decidas tener en tu página web responsive y cuando des prioridad a alguno de los patrones de diseño.
Ahora que conoces algunos patrones de layout para diseño responsive, ¡es el momento de que los apliques creando y diseñando tu propia página web! En KeepCoding sabemos que tu mayor sueño es ser un desarrollador web. Por ello, te invitamos a inscribirte en nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, donde seguirás aprendiendo sobre los lenguajes de programación web. Además, con estos conocimientos, crearás y diseñarás tu propio sitio web enfocado en las estrategias de diseño responsive. ¿A qué esperas para inscribirte? ¡Pide más información y anímate e apuntarte ya!
